CODEWITHSUNDEEP
reactjsdatepicker
Art
Art

Reputation: 277

react-datepicker fails to set default value on load

datepicker in my Meteor/React app and I can't find a way to set/update state to get default value be loaded from the props.

import DatePicker from "react-datepicker";

export default class AddDate extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            startDate: this.props.start.format('MM/DD/YYYY')
        };
    }

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

    render() {
        return (
        <DatePicker
            selected={this.state.startDate}
            onChange={this.handleStartDate.bind(this)} 
            className="form-control" 
            id="startDate"
            todayButton={"Get Today's Date"} />
        );
    }
}

AddDate.propTypes = {
  start: PropTypes.object.isRequired,
};

Initially, the props come from the Fullcalendar "select" event, which provides (start, end).

The error I get is: "Uncaught TypeError: t.date.clone is not a function"

Upvotes: 2

Views: 11484

Answers (1)

Fabian Schultz
Fabian Schultz

Reputation: 18556

The startDate prop should be a (moment) object, not a string. No need to format() it.

import moment from "moment";

// ...

this.state = {
  startDate: moment(this.props.start),
};

Upvotes: 8

Related Questions