DatePicker breaks with "date.clone is not a function" when "selected" date is passed down as a prop

If I initialize a DatePicker by directly providing the selected prop as a moment object, everything works fine:

const WrapperComponent = ({ startDate, onDateChange }) => (
    <div>
        <DatePicker
                selected={moment()}
                onChange={onDateChange}
            />
    </div>
)

However if i try to initialize the component by passing the “selected” prop externally as a startDate prop from WrapperComponent like this:

const WrapperComponent = ({ startDate, onDateChange }) => (
    <div>
        <DatePicker
                selected={startDate}
                onChange={onDateChange}
            />
    </div>
)

…the DatePicker breaks by moment js, even if the startDate provided by a predefined value of the same moment() object:

date_utils.js:167 Uncaught TypeError: date.clone is not a function
    at safeDateFormat (date_utils.js:167)
    at DatePicker._this.renderDateInput (datepicker.js:388)
    at DatePicker.render (datepicker.js:474)
    at ReactCompositeComponent.js:795
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:794)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:821)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:361)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:257)
    at Object.mountComponent (ReactReconciler.js:45)

What am I doing wrong? Can’t I use a DatePicker in a stateless component, passing down it’s props?

Issue Analytics

State:
Created 6 years ago
Reactions:24
Comments:12

Top GitHub Comments

64reactions

jamessralcommented, Jan 23, 2018

I just ran into the same thing, but if you use moment to parse your date back into a moment object, it works.

Example:

<DatePicker
  className={styles.datePicker}
  selected={moment(this.props.endDate)}
  onChange={this.handleChangeEnd}
/>

2reactions

Ic3ksycommented, Oct 22, 2018

Just found the solution for my project. Share it here if it can help :

<DatePicker selected={(this.props.myDate !== ")?moment(this.props.myDate, 'YOURFORMAT'):moment()} value={(this.props.myDate !== ")?moment(this.props.myDate, 'YOURFORMAT'):""} dateFormat="YOURFORMAT" onChange={onDateChange} />

Weird but works…

Top Results From Across the Web

Antd datepicker (date.clone is not a function) - reactjs

This worked for me. The critical part is that the error is thrown for DatePickers inside of a <Form.Item>. Thanks for the answer!...

DatePicker breaks with "date.clone is not a function" when ...

DatePicker breaks with "date.clone is not a function" when "selected" date is passed down as a prop.

[Solved]-Antd datepicker (date.clone is not a function)

I have realized that when using the inside <Form.Item > <Form.Item /> it will drop 'date.clone is not a function' error. So you...

ng2-date-picker.umd.js.map

The CDN for ng2-date-picker. ... hasOwnProperty(prop)) {\n obj[prop] = this. ... secondsInterval;\n break;\n }\n return time.clone().subtract(amount, ...

KendoReact Changelog

add title prop to dropdownbutton and splitbutton ... element rendered by the DateTimePicker component; do not apply k-focus className on ...