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

Question

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

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

<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

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

Answer 1

希望您使用的是 this 日期选择器库中的日期选择器。

DatePicker 的 selected 属性似乎接受 Date 实例而不是 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}
/>

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

您可以看到多个 DatePickers here。希望对小伙伴有帮助

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

React datepicker throwing invalid time value

javascript

date

reactjs

react-datepicker