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

[pixelhijack]

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?

[timfisher]

Please see #491

[pixelhijack]

@timfisher it does not solve my issue, i also pass a moment() object: if i give it directly, it works, if i pass a moment() object as prop, it doesn't.

[pixelhijack]

The issue corresponds to #862 and a workout i used is to use a react class component instead of a stateless function as react-datepicker needs an internal state. The downside is that this way the external redux state and the internal this.state.startDate, etc needs to be reconciled somehow, but this is the question of controlled forms and redux which redux-forms answers for example.

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

[jamessral]

A lot of the moment methods return the date string (and are no longer an object)

[johnsonsamuel]

I am getting the same error. Is there any specific format we need to pass as prop ? Cant we use it without moment? Help needed.

[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...

[bamne123]

This may help

`
import React from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';

import 'react-datepicker/dist/react-datepicker.css';

// CSS Modules, react-datepicker-cssmodules.css
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';

class Example extends React.Component {
constructor(props) {
super(props)
this.state = {
startDate: moment()
};
this.handleChange = this.handleChange.bind(this);
}

handleChange(date) {
    this.setState({
        startDate: date
    });
}

render() {
    return <DatePicker
        selected={this.state.startDate}
        onChange={this.handleChange}
    />;
}

}`

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[GotUser]

This has helped me solve the issue

<DatePicker
                                        onChange={(e) => { this.SaveDateOfDeposit(e, i) }}
                                        selected={ this.state.dateOfDeposit==""?moment():moment(this.state.dateOfDeposit,"DD/MM/YYYY")}
                                      
                                        peekNextMonth
                                        showMonthDropdown
                                        showYearDropdown
                                        dropdownMode="select"
                                        maxDate={moment()}   
                                    
                                        dateFormat="DD/MM/YYYY"

                                   
                                                               
                                    />



    SaveDateOfDeposit(date,i) {
   
        let DOB = date.format("DD/MM/YYYY");
        
        this.setState({
            dateOfDeposit: DOB,
        })

      
    }

Note: 
this.state: {
dateOfDeposit=""
}

[alinadirkhanloo]

Hi. you must add DateAdapter to your providers in your Module like that:

import { MAT_DATE_FORMATS, DateAdapter} from '@angular/material/core' ;

@NgModule({
... ,
providers:[{ provide: DateAdapter}, { provide: MAT_DATE_FORMATS}]
...
})

also if you want to use custom format :

@NgModule({
... ,
providers:[{ provide: DateAdapter, useClass: CustomComponent},
{ provide: MAT_DATE_FORMATS, useValue: CUSTOM_FORMAT}],
...
})

[tlcpack]

I'm still getting this same error. I'm just experimenting with code from the docs, so I'm not sure why it won't work
`const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(null);

const onChange = (dates) => {
const [start, end] = dates;
setStartDate(start);
setEndDate(end);
};

`

Getting this error:
TypeError: date.clone is not a function
at localizeDate (webpack-internal:///./node_modules/react-datepicker/lib/date_utils.js:354:15)
at Calendar._this.localizeDate (webpack-internal:///./node_modules/react-datepicker/lib/calendar.js:111:43)
at new Calendar (webpack-internal:///./node_modules/react-datepicker/lib/calendar.js:356:19)
at constructClassInstance (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:13308:18)
at updateClassComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:16985:5)
at beginWork$1 (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:18505:16)
at HTMLUnknownElement.callCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:347:14)
at Object.invokeGuardedCallbackDev (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:397:16)
at invokeGuardedCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:454:31)
at beginWork$$1 (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:23217:7)