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

Question

我有一个react表单，其中我使用react datepicker，当我尝试填充来自数据库的date字段的值时，我得到错误invalid time值。

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

<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}
/>

所选道具中发布日期的值为2020-12-31T23:00:00.000Z

问题似乎与日期格式有关，但我不知道所选内容是否可以接受。请让met知道我的问题是否足够清楚。

Answer 1

这个问题不是100%清楚，因为我不知道你是怎么做的。我不知道你的日期在数据库中是什么格式。然而，这是一个来自这里的模板，试着调整你的代码，使之符合这些思路。大约两周前，我用这个模板做了一个日期选择器，效果很好。

<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>
        );
      }}
    />

您可以在这里看到多个日期选择器。我希望这对你有帮助，伙计。

Answer 2

我希望您正在使用此日期选择器库中的日期选择器。

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

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}
/>