Modified react-datepicker not showing value

Question

I am using react v.15. Using the react-datepicker library is giving issues when using the default code. I've successfully modified the codes but whenever I click on the selected date, it's not showing any date at all. Here's what my code looks like:

import * as React from 'react';
let DatePicker = require('react-datepicker');
import 'react-datepicker/dist/react-datepicker.css';

export default class DtePicker extends React.Component<any, any> {
    constructor() {
        super()
        this.state = {
            startDate: new Date(),
        }
        this.handleChange = this.handleChange.bind(this)
    }

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

    render() {
        return (
            <div>
                <DatePicker
                    dateFormat='yyyy/MM/dd'
                    selected={this.state.startDate}
                    onChange={this.handleChange}
                />
            </div>
        );
    }
}

Am I missing a code perhaps in my handleChange function? Also, it's a typescript file, using ASP.Net framework.

Answer 1

After specifying the versions I was seeing a "date.clone is not a function" error, so I suspected there was an issue with moment.

react-datepicker v0.40.0 uses moment under the hood

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

Selected date must be a moment object, so we save each date object as a moment date object.

class DtePicker extends Component {
  constructor(props) {
    super(props); // Don't forget to pass props to super constructor!
    this.state = {
      startDate: moment(new Date())
    };
    this.handleChange = this.handleChange.bind(this);
  }

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

  render() {
    return (
      <div>
        <DatePicker
          dateFormat="YYYY/MM/dd" // Also corrected date format
          selected={this.state.startDate}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

• moment v2.24.0
• react v15.4.1
• react-datepicker v0.40.0
• react-dom v15.4.1