反应日期选择器抛出无效的时间值

Question

我有一个使用 react-datepicker 的反应表单，当我尝试填充来自数据库的日期字段的值时，我收到错误无效时间值。

我尝试了几种时间格式，但都无济于事。下面是我的解决方案。

<DatePicker
    className="createMeditation-input"
    onChange={d => this.handleDateChange(d)}
    selected={data.publishedDate}
    autoComplete="off"
    placeholderText="Please select a publish date"
    id="DatePicker"
    dateFormat="MMMM dd, yyyy"
    disabled={uncontrolledFormState ? true : false}
/>

selected prop 中发布日期的值为2020-12-31T23:00:00.000Z

问题似乎与日期格式有关，但我不知道所选内容会接受什么。如果我的问题足够清楚，请告诉我们。

Answer 1

我希望您使用来自 this 日期选择器库的日期选择器。

看起来 DatePicker 的 selected 属性接受 Date 实例而不是 ISO 字符串。 尝试将日期字符串转换为日期，同时将其传递给道具。

const selectedDate = new Date(data.publishedDate)

<DatePicker
  className="createMeditation-input"
  onChange={d => this.handleDateChange(d)}
  selected={selectedDate}
  autoComplete="off"
  placeholderText="Please select a publish date"
  id="DatePicker"
  dateFormat="MMMM dd, yyyy"
  disabled={uncontrolledFormState ? true : false}
/>

Answer 2

这个问题不是 100% 明确的，因为我不知道您是如何处理 .post 的，也不知道您的日期在数据库中的格式是什么。然而，这是来自here 的模板，请尝试使您的代码适应这些内容。大约 2 周前，我使用此模板完成了 DatePicker，并且运行良好。

<DatePicker
      dateRender={current => {
        const style = {};
        if (current.date() === 1) {
          style.border = '1px solid #1890ff';
          style.borderRadius = '50%';
        }
        return (
          <div className="ant-picker-cell-inner" style={style}>
            {current.date()}
          </div>
        );
      }}
    />

您可以看到多个 DatePicker here 。希望对你有帮助。