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?

[jamessral]

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

[Ic3ksy]

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…