求助：如何在React DatePicker中用date-fns从DateTime值提取日期

先说说你原代码的问题：

• 原生new Date()无法正确解析DD/MM/YYYY格式的字符串，你传入的'27/02/2023 11:00 PM'会被解析成无效的Date对象，自然拿不到结果
• 就算解析正常，getDate是方法，必须加括号getDate()调用，而且它只能返回日期的数字（比如27），不是你要的完整日期字符串

结合你在用的date-fns库，给你两种场景的解决方案：

场景1：处理字符串格式的DateTime值 #

如果你的输入是'27/02/2023 11:00 PM'这种字符串，用date-fns的parse和format组合处理：

import { parse, format } from 'date-fns';

// 先将字符串解析为Date对象，指定输入格式
const dateObj = parse('27/02/2023 11:00 PM', 'dd/MM/yyyy hh:mm a', new Date());
// 再格式化为需要的日期字符串
const dateStr = format(dateObj, 'dd/MM/yyyy');
console.log(dateStr); // 输出 '27/02/2023'

场景2：从React DatePicker的选中值提取日期 #

React DatePicker选中后返回的是标准Date对象，直接用date-fns的format处理即可：

import { format } from 'date-fns';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

// DatePicker的 onChange 回调示例
const handleDateChange = (selectedDate) => {
  if (selectedDate) {
    const dateStr = format(selectedDate, 'dd/MM/yyyy');
    console.log(dateStr); // 输出选中的日期字符串，比如'27/02/2023'
  }
};

// 组件使用示例
<DatePicker
  selected={startDate}
  onChange={handleDateChange}
  showTimeSelect
  dateFormat="dd/MM/yyyy hh:mm a"
/>

注意：date-fns的格式符里，小写dd代表两位数的日，MM是两位数的月，yyyy是四位数的年，别和其他日期库的格式符混淆。

内容的提问来源于stack exchange，提问作者pappu_kutty