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.
• Don't pass weekStartDay prop. Week start day is now automatically determined based on locale prop. If you wish to forcibly change it anyway, set calendarType to US or ISO 8601, depending on which calendar you would like to have displayed.

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!