Upgrade guide for React Date Picker ≤5 users

React-Date-Picker 6.0 comes with entirely different architecture, but for most use cases, upgrading should be fairly easy. Benefits from upgrading are substantial - React-Date-Picker 2.0 is built on modern web technologies and does not need dependencies like moment.js.

tl;dr, just give me a working component

If you used React-Date-Picker simply for picking dates inside a form, you can update in less than 5 minutes.

• Instead of including DateField and Calendar in your application, just do import DatePicker from 'react-date-picker'. React-Date-Picker will handle opening the calendar automatically.
• Pass date prop as Date(). For example, instead of writing date="2017-09-30" write date={new Date(2017, 8, 30)}.
• onChange callbacks instead of three arguments (dateString, dateMoment, timestamp) has just one argument, Date().
  • If you need a stringified date, you can use the following solutions:
    • For ISO format: date.toISOString() will return "2017-09-30T00:00:00.000Z"
    • Local formats:
      • User's default date format: date.toLocaleDateString() will return user's default date format, for example "30.09.2017".
      • Other local formats: date.toLocaleDateString('en-US') will return date formatted for en-US locale, "9/30/2017"`.
    • All others: You can use custom solutions or use libraries like moment.js.
  • If you need a moment.js date, just write const dateMoment = moment(date).
  • If you need a timestamp, just write const timestamp = date.getTime().
• Don't pass dateFormat prop. Date format is now automatically determined based on locale prop. For example, setting it to en-US will set the date format to MM/DD/YYYY.

Where are all the components like MonthView, YearView, and DecadeView?

React-Date-Picker is just responsible for creating an interactive date input field. It uses React-Calendar to provide users with calendar UI after they focus on date input field. You will find them there!