react-date-picker

What is react-date-picker?

The react-date-picker package is a flexible and customizable date picker component for React applications. It allows users to select dates from a calendar interface and provides various customization options to fit different use cases.

What are react-date-picker's main functionalities?

Basic Date Picker

This code demonstrates a basic usage of the react-date-picker component. It initializes a date state and renders a DatePicker component that allows the user to select a date.

import React, { useState } from 'react';
import DatePicker from 'react-date-picker';

function MyApp() {
  const [date, setDate] = useState(new Date());

  return (
    <div>
      <DatePicker
        onChange={setDate}
        value={date}
      />
    </div>
  );
}

export default MyApp;

Date Range Picker

This code demonstrates how to use react-date-picker to select a date range by using two DatePicker components, one for the start date and one for the end date.

import React, { useState } from 'react';
import DatePicker from 'react-date-picker';

function MyApp() {
  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState(new Date());

  return (
    <div>
      <DatePicker
        onChange={setStartDate}
        value={startDate}
      />
      <DatePicker
        onChange={setEndDate}
        value={endDate}
      />
    </div>
  );
}

export default MyApp;

Custom Date Format

This code demonstrates how to customize the date format displayed in the react-date-picker component. The 'format' prop is used to specify the desired date format.

import React, { useState } from 'react';
import DatePicker from 'react-date-picker';

function MyApp() {
  const [date, setDate] = useState(new Date());

  return (
    <div>
      <DatePicker
        onChange={setDate}
        value={date}
        format="y-MM-dd"
      />
    </div>
  );
}

export default MyApp;

Disable Specific Dates

This code demonstrates how to disable specific dates in the react-date-picker component. The 'tileDisabled' prop is used to specify which dates should be disabled.

import React, { useState } from 'react';
import DatePicker from 'react-date-picker';

function MyApp() {
  const [date, setDate] = useState(new Date());

  const disableDates = [
    new Date(2023, 9, 10),
    new Date(2023, 9, 15)
  ];

  return (
    <div>
      <DatePicker
        onChange={setDate}
        value={date}
        tileDisabled={({ date }) => disableDates.some(disabledDate => date.getTime() === disabledDate.getTime())}
      />
    </div>
  );
}

export default MyApp;

Other packages similar to react-date-picker

react-datepicker

react-datepicker is another popular date picker component for React. It offers a wide range of features including date and time selection, custom date formats, and localization support. Compared to react-date-picker, react-datepicker provides more advanced features such as time selection and inline display.

react-dates

react-dates is a date picker component developed by Airbnb. It is highly customizable and supports date ranges, single date selection, and internationalization. It is known for its accessibility and mobile-friendly design. Compared to react-date-picker, react-dates offers more comprehensive support for date ranges and better accessibility features.

rc-calendar

rc-calendar is a date picker component from the rc-components library. It provides a flexible and customizable calendar interface with support for date and time selection. Compared to react-date-picker, rc-calendar offers more customization options and supports both date and time selection.

README

react-date-picker

A carefully crafted date picker for React

See demo at jslog.com/react-date-picker

Install

$ npm install react-date-picker

Changelog

See changelog

Usage

NOTES:

Don't forget to include index.css or index.styl! ( require('react-date-picker/index.css') )

If you use the files from the dist directory, (eg: dist/react-date-picker.js), you will need to make sure you have both React and moment global variables, so make sure you include ReactJS and MomentJS

The preferred React version for react-date-picker is >=0.12. The initial version of react-date-picker worked with React 0.11.2 as well, but I do not intend to continue to support it, in order to be able to focus on advancing the current features and developing other high-quality React components.

Example

var date = '2014-10-10' //or Date.now()

function onChange(dateString, moment){
    //...
}

<DatePicker
    minDate='2014-04-04'
    maxDate='2015-10-10'
    date={date}
    onChange={onChange}
/>

I18n and localization

For rendering the date picker with a custom locale, there are two options

require locale

The first option is to simply require the appropriate momentjs locale before require-ing react-date-picker

Example:

//make sure you require this first!
var nl = require('moment/locale/nl')

//and then require the date picker - it will use
//the locale you previously required

var DatePicker = require('react-date-picker')

locale prop

The second option is specifying the locale prop on the date picker. This assumes you have momentjs with the locale already into page (for example, you are using moment-with-locales.js)

<DatePicker locale="fr" />

Other i18n props

• weekDayNames - either an array of week day names, or a function that returns an array. In case you specify weekDayNames as an array, it should have Sunday as the first day. If not specified, will be built with momentjsusing moment.weekdaysShort()
• weekStartDay: Number - Sun 0, Monday 1, etc... If not specified, the locale specific value will be used.
• locale: String

Props

• hideFooter: Boolean - by default footer is shown, so specify this to true if you don't want the footer

• date : Date / String / Moment / Number

• minDate : Date / String / Moment / Number

• maxDate : Date / String / Moment / Number

• dateFormat: String see moment.js formats. Default date format is 'YYYY-MM-DD'

• onChange: Function(dateText, moment, event) - called when the user selects a date

• onSelect: Function(dateText, moment, view) - called when the user selects a year/month

• onNav: Function(dateText, moment, view, direction) - called when the user navigates to the next/previous month/year/decade.

• renderDay: Function - (optional) A function that should return a React DOM for the day cell. The first param is the props object. You can use this to have full control over what gets rendered for a day.

• onRenderDay: Function - (optional) A function that can manipulate the props object for a day, and SHOULD return a new props object. Use this for custom day styling. You can use this to take full control over the styles/css classes/attributes applied to the day cell in the month view.

Formatting props

• dayFormat - The format in which days should be rendered (on the MonthView)
• monthFormat - The format in which months should be rendered (on the YearView)
• yearFormat - The format in which years should be rendered (on the DecadeView)

Props related to the view (the current date in view and the type of view)

• defaultViewDate: Date / String / Moment / Number - a date for the period to show in the picker. If none specified, defaults to date or to the current date.

• viewDate: Date / String / Moment / Number - controlled version for defaultViewDate

• onViewDateChange: Function(dateText, moment , view) - called when navigating to another viewDate.

• defaultView: String - the view to render initially in the datepicker - if no defaultView is specified, the "month" view is rendered. Possible values: "month", "year", "decade".

• view: String - controlled version for defaultView.

• onViewChange: Function - function called when the view is changed. If using the controlled view version, make sure you update the view prop in this function if you want to navigate to another view as expected.

• navOnDateClick: Boolean - defaults to true. If false, will not navigate to the date that was clicked, even if that date is in the prev/next month

Examples

Custom styling of day cells

function onRenderDay(props){
    if (props.date.isBefore('2010-01-01')){
        props.className += ' invalid'
    }

    props.style.border = '1px solid red'

    return props
}

<DatePicker
    onChange={this.onChange}
    onRenderDay={onRenderDay}
/>

Contributing

When contributing, please work on the src dir.

You'll need to run the following commands:

$ npm run serve # starts a local http server
$ npm run dev # starts webpack-dev-server, which does all the bundling and live reloading

Now navigate to http://localhost:8080/. With this setup, you have an environment which live-reloads all your changes, so you have a rapid development cycle.

In order to build a new production version, make sure you run npm run build (it builds the lib directory from the src directory, it concats all files and builds the dist directory, and also prepares the css files)

Other

react-date-picker uses the awesome moment.js library ( Big thanks!)

If you don't use npm you can include any of the following:

• dist/react-date-picker.js - the full sources. NOTE: You'll need to include React separately
• dist/react-date-picker.min.js - minified & optimized version. NOTE: You'll need to include React separately
• dist/react-date-picker.nomoment.js - the full sources. NOTE: You'll need to include React AND moment.js separately
• dist/react-date-picker.nomoment.min.js - minified & optimized version. NOTE: You'll need to include React AND moment.js separately

License

MIT