Skip to content

Upgrade guide for React Date Picker ≤5 users

Jump to bottom
Wojciech Maj edited this page Nov 28, 2017 · 7 revisions

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 6.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.

Architecture

React-Date-Picker's architecture is now rebuilt from the ground up. React-Date-Picker now provides you with just one component: DatePicker. This is a counterpart of DateField component in React-Date-Picker 5.

If you wish to use just the calendar, check out React-Calendar. It's the calendar used internally in React-Date-Picker. By splitting the architecture I believe I can keep components more generic and because of that, more useful for the community.

moment.js

If you used moment.js only for React-Date-Picker 5.0, you can safely remove it. React-Date-Picker relies only on native ECMAScript functionalities.

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!

How do I highlight weekends?

Tiles for Saturday and Sunday have their own className, react-calendar__month-view__days__day--weekend. If you want them highlighted, just apply styles of your choice to this class.

Alternatively, you can use tileClassName function to pass custom class for weekend dates:

tileClassName={({ date, view }) => view === 'month' && (date.getDay() === 0 || date.getDay() === 6) ? 'weekend' : null}

## How do I choose date ranges?

Unfortunately, React-Date-Picker does not support choosing date ranges in one component. This is my #1 priority when I'll have a sufficient amount of time for implementing this.
Clone this wiki locally