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

Date picker for React

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

Install

$ npm install react-date-picker

Usage

NOTES:

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

Also you need to have React included in the page.

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(moment, dateString){
    //...
}
<DatePicker
        minDate='2014-04-04'
        maxDate='2015-10-10'
        date={date}
        onChange={onChange}
/>

Options

• hideFooter: Boolean - by default footer is shown, so specify this to true if you don't want the footer
• date : Date / String / Moment / Number
• viewDate: 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(moment, dateText, event) - called when the user selects a date
• onSelect: Function(moment, dateText, view) - called when the user selects a year/month
• onNav: Function(moment, dateText, 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.

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

Now navigate to http://localhost:8080/

In order to build a new version, make sure you run npm run build in order to build the lib directory from the src directory.

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

Changelog

v1.4.0

• today and gotoSelected are renamed as todayText and gotoSelectedText. Old names are now deprecated, and will be removed in a future minor version.
• add renderFooter prop, which can be used to render a different footer.
• change the behavior of renderDay prop: if it now returns undefined, we assume it just changed props, so we render the default cell, with the updated props. This means you can use renderDay both to affect the props object passed to day cells and/or the render a completely different cell

v1.3.0

• renderDay & onRenderDay properties are available to allow full control over day-cell rendering
• onNav is called with new args: moment, text, view, direction - where moment is a date as a momentjs instance, text is the date formatted as text, the view is the view name ('month','year','decade') and direction is 1 (nav to next period) or -1 (nav to prev period)
• onSelect is called with new args: moment, text, view