React Date Picker

Calendar component built to be customizable.

The main calendar component right now supports changing day templates, selecting ranges, changing week day titles. I don't know what else needs customization.

Usage

Read the docs

$ npm install react-jdate-picker
# OR 
$ yarn add react-jdate-picker

// Simple date picker. Change displayed month and select a date
import DatePicker from 'react-jdate-picker';
// OR
// Like date picker but can select a range instead of a single date
import { RangePicker } from 'react-jdate-picker';
// OR
// Main calendar component. Needs every prop there is!
import { Calendar } from 'react-jdate-picker';

Jalali and other calendars

Default calendar is what the default Moment provides, that is to say Gregorian. But you can customize the calendar to display other calendars too (tested with moment-jalaali, let me know if there is an issue with other calendars). To customize the calendars you need to add the localized Moment to the component you are using. For example for Jalali calendar you need to do something like this:

import moment from 'moment-jalaali';
import { DatePicker } from 'react-jdate-picker';
 
<DatePicker
  {/* Other props as usual */}
  weekdays={['ش', 'ی', 'د', 'س', 'چ', 'پ', 'ج']}
  Moment={moment}
  headerFormat={day => {
    return moment(day).format('jMMMM jYYYY');
  }}
  UnitOfMonth="jmonth"
  FormatOfDay="jD"/>

Example

To run the example you have to either link this component and use the link there as below:

# Same directory as this readme file 
$ npm link
$ cd example
$ npm link react-jdate-picker

Or just install the component in the example folder

$ cd example
$ npm install react-jdate-picker