CODEWITHSUNDEEP
javascriptreactjsdatereact-datepicker
Martins
Martins

Reputation: 130

React datepicker throwing invalid time value

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.

Upvotes: 1

Views: 1946

Answers (2)

TiagoRibeiro
TiagoRibeiro

Reputation: 316

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.

Upvotes: 0

Tabrez Basha
Tabrez Basha

Reputation: 192

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

Upvotes: 1

Related Questions