React-dates: Moment type error, although i make it with moment

[huystart17]

Warning: Failed prop type: Invalid prop date of type object supplied to withStyles(SingleDatePicker), expected Moment.

import moment from "moment";
<SingleDatePick
    block
    small
    date={moment(gateInput.start_date)}
    onDateChange={date => this.onChange({ target: { name: "start_date", value: date } })}
    focused={this.state.focused_start_date}
    onFocusChange={({ focused }) => this.setState({ focused_start_date: focused })}
/>;

export class SingleDatePick extends React.Component {
    constructor(props){
        super(props);
    }
    render(){
           return (
                <SingleDatePicker
                    {...this.props}
                />
            )
    }
}

[davidbucka]

@huystart17 I could not reproduce, can you post the contents of your gateInput.start_date ?

[Parthchokshi]

Facing same error. This happens because of initial value as null.
Here is how to reproduce: date={moment(null)}.

That's how I solved it: date = {date ? moment(date): null}

@huystart17 In your case: date = {gateInput.start_date ? moment(gateInput.start_date): null}

[majapw]

@Parthchokshi has the right idea! I wonder if this is maybe something that could be addressed in https://github.com/CalebMorris/react-moment-proptypes or in moment itself. It's kind of strange that passing null into the moment constructor doesn't ... satisfy the proptype (i'm also surprised that moment(null) doesn't just resolve to moment() which is today's date).

[ljharb]

I would expect moment(undefined) and moment() to be the same, but i'd also expect that moment(null) would be an invalid date. It definitely seems like something react-moment-propTypes should be better handling.

[Parthchokshi]

True. react-moment-proptypes should give a more meaningful message.

The validation code throw an error at second level saying the date is invalid with moment constructor as null:

Code

But rather throws an error saying the given prop is object and not Moment type:

Code