React Datepicker How to format date from string

Question

my goal is simple, displaying a date from database in react datepicker. From my database, I got the string "2019/10/26 15:05", but when setting it as selected it returned,

Starting with v2.0.0-beta.1 date-fns doesn't accept strings as arguments. Please use parseISO to parse strings

<DatePicker
dateFormat="dd-MM-yyyy HH:mm"
showTimeSelect
timeFormat="HH:mm"
timeIntervals={1}
selectsEnd
startDate={this.state.beginDate}
endDate={this.state.endDate}
selected={this.state.endDate}
onChange={this.selectEndDate} />

I also tried date-fns's parseISO but it's still not working. what should I do?

How, exactly, did you try `parseISO`? You should be able to write `selected={parseISO(this.state.endDate)}` etc. Or better, use parseISO when setting state in the first place to keep things consistent with `selectEndDate`, which receives a `Date` object. — jdaz, Jun 02 '20 at 05:29

score 2 · Answer 1 · answered Feb 01 '22 at 11:58

2

Date.parse(this.state.endDate)

makes it work for me

answered Feb 01 '22 at 11:58

Colfah

308
1
16

score -1 · Answer 2 · answered Feb 04 '20 at 11:34

handleChange =(selectedDate) =>{
    var selectedDateStr = moment(selectedDate).format('DD.MM.YYYY');
    this.props.input.onChange(selectedDateStr);
}

render() {
    const { input, meta: { touched, error, active } } = this.props;
    return (
        <div>
            <DatePicker
                {...input}
                className="datepicker form-control"
                peekNextMonth
                showMonthDropdown
                onChange={selectedDate => this.handleChange(selectedDate)}
                dateFormat="dd.MM.yyyy"
                showYearDropdown
                dropdownMode="select"
            />
            {touched && (!active && error &&
                <div className="invalid-feedback d-block position-absolute">
                    test
                </div>
            )}
        </div>
    );
}

React Datepicker How to format date from string

2 Answers2