React datepicker throwing invalid time value

Question

I have a react form where I'm using react-datepicker, when I try to populate the value of the date field coming from the database I get the error invalid time value.

I have tried several time formats but to no avail. My solution below.

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

The value of published date in the selected prop is 2020-12-31T23:00:00.000Z

The issue appears to be with the date format but I don't know what selected will accept. Please let met know if my question is clear enough.

Answer 1

The question is not 100% clear, because I don't know how you are doing the .post and I don't know in what format your date is in the DB. Yet, this is a template from here , try to adapt your code, to something along those lines. I've done a DatePicker about 2 weeks ago using this template and worked fine.

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

You can see multiple DatePickers here . I hope it helps you buddy.