React-dates: Set previously saved date to SingleDatePicker on page load.

[Nozibulla]

I have saved a date from the SingleDatePicker in db. NO I want to retrieve this date from db and set in the SingleDatePicker. Is that possible. When I try to set the state of date by retrieved date value. A warning shows that

Invalid input type: date of type string supplied to SingleDatePicker, expected object
and a typeerror

TypeError: date.format is not a function

value from the date picker I get is 2016-10-07T00:00:00+06:00

my datepicker component code is

import React, { Component } from 'react';
import { SingleDatePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';
export default class DatePickerBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      focused: false,
      date: null,
    };
    this.handleOnChange = this.handleOnChange.bind(this);
    this.onFocusChange = this.onFocusChange.bind(this);
  }
  componentWillMount() {
    this.populateValueFromProps(this.props);
  }
  populateValueFromProps(props) {
    const {item} = props;
    const date = item.value;
   this.state = {
      date: date,
    };
    this.props.updateData({
      ...item,
      value: date,
    });
  }
  onFocusChange(data) {
    this.setState({ focused: data.focused });
  }
  handleOnChange = (date) => {
    console.log(date);
    const { item } = this.props;
    this.setState({
      date,
    });
    this.props.updateData({
      ...item,
      value: date.format(item.format)
    });
  }
  enablePrevious() {
    return false;
  }
  render() {
    const { item } = this.props;
    const { focused, date } = this.state;
    return (<div className="rq-rub-element-block">
      <h3 className="rq-rub-shortcode-title">{item.label}</h3>
      <p className="rq-rub-shortcode-subtitle">{item.subtitle}</p>
      <SingleDatePicker
        id={item.id}
        date={date}
        focused={focused}
        onDateChange={this.handleOnChange}
        onFocusChange={this.onFocusChange}
        isOutsideRange={this.enablePrevious}
      />
    </div>);
  }
}

[msuzoagu]

hi @Nozibulla: Running into same problem and would like to know if/how you resolved this issue. Thank you!

[Nozibulla]

@MsUzoAgu use moment to do this.

[rajkapoordev]

Getting the same error:

Invalid input type: date of type string supplied to SingleDatePicker, expected object and a type error
TypeError: date.format is not a function

Here is my code:

<SingleDatePicker date={this.state.date} onDateChange={({ date }) => this.setState({ date })} focused={this.state.focused} onFocusChange={({ focused }) => this.setState({ focused })} />

[ljharb]

@rajkapoordev are you passing a string instead of a moment object?

[calebkeene]

@ljharb is right, you need to pass a moment JS object rather than a string

date={moment(dateString)}