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.

score 1 · Answer 1 · answered Nov 25 '20 at 14:15

I hope you're using Date picker from this date picker lib.

It looks like selected prop of DatePicker accepts instance of Date and not an ISO string. Try converting your date string to date while passing it to 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}
/>

score 0 · Accepted Answer · answered Nov 25 '20 at 14:58

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.

I was able to resolve this yesterday but my bad I didnt return to clarify. I had to convert moment to date() and I did something similar to this — Martins, Nov 26 '20 at 14:16

React datepicker throwing invalid time value

2 Answers2