如何正确配置react-datepicker的dateFormat？日期显示不全问题求助

我正在创建一个包含2个DatePicker（开始和结束日期选择器）的表单，目前功能正常：可以选择日期并在状态中使用其值。但存在一个问题：选择日期后，字段内的显示不符合预期。预期显示格式为「December 6, 2019 4:00 PM」，但实际仅显示前3个字符「Dec」。我尝试从字段props中获取value并赋值给selected属性，但问题仍未解决——始终只显示前3个字符。以下是我当前的代码：

render() {
  const placeholder = this.props.name === "start" ? "From" : "To";
  const { showTime, value } = this.props
  console.log(moment(value).format('LLL'))
  return (
    <div className="date-picker">
      <DatePicker 
        timeFormat="HH:mm" 
        selected={value ? new Date(moment(value).format('LLL')) : this.state.startDate} 
        onChange={this.handleChange} 
        showTimeSelect={showTime} 
        dateFormat="LLL" 
        dropDownMode="select" 
        placeholderText={placeholder} 
      />
    </div>
  );
}

我来帮你排查这个问题～核心问题出在你给selected属性赋值的方式上：

你现在把moment对象先格式化为字符串（moment(value).format('LLL')），再把这个字符串转成Date对象，这个操作完全没必要，而且会导致DatePicker无法正确解析日期的完整上下文，最终让dateFormat="LLL"配置没有按预期生效，只渲染了月份缩写。

react-datepicker的selected属性本身就支持直接接收Date对象或者moment对象，你只需要传递原始的日期对象即可，不需要做额外的格式转换。

修改后的代码如下：

render() {
  const placeholder = this.props.name === "start" ? "From" : "To";
  const { showTime, value } = this.props;
  console.log(moment(value).format('LLL'));
  
  // 直接将value转成Date对象（如果value是moment对象），或者直接使用原始Date
  const selectedDate = value ? moment(value).toDate() : this.state.startDate;

  return (
    <div className="date-picker">
      <DatePicker 
        timeFormat="HH:mm" 
        selected={selectedDate} 
        onChange={this.handleChange} 
        showTimeSelect={showTime} 
        dateFormat="LLL" 
        dropDownMode="select" 
        placeholderText={placeholder} 
      />
    </div>
  );
}

如果你的value本身就是一个Date对象，那可以更简单：

selected={value || this.state.startDate}

另外补充一点：如果之后还遇到月份名称不是英文全称的情况，记得确保已经导入并设置了moment的本地化：

import moment from 'moment';
import 'moment/locale/en';

moment.locale('en');

这样修改后，DatePicker就能按照你设置的LLL格式，正确渲染出「December 6, 2019 4:00 PM」这样的完整日期时间啦～

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