如何正确使用react-datepicker dateFormat

Question

我正在创建一个包含 2 个（开始和结束）DatePickers 的表单，一切正常：我可以选择日期，然后使用状态中的值（它是功能性的）。 My issue is that, when picking a date, it doesn't show correctly inside the field.

它应该看起来像这样：December 6, 2019 4:00 PM
但实际上它看起来像这样：Dec

您只能看到前 3 个字符。

我该如何解决这个问题？我尝试从字段 props 获取值并将其插入选定的属性，但它不起作用 - 它始终只显示前 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>
   );
 }
}

Answer 1

只需更改此：

dateFormat="LLL"

至

dateFormat="MMMM d, yyyy h:mm aa"

您在 react-datepicker

中使用了 moment 库格式

有关 react-datepicker 格式的更多信息，请转到 here

如何正确使用react-datepicker dateFormat

How to use react-datepicker dateFormat correctly

reactjs

react-datepicker