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

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.

react-date-picker works with both React 0.11.2 and the newer 0.12

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

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-color-picker.js - the full sources. NOTE: You'll need to include React separately
• dist/react-color-picker.min.js - minified & optimized version. NOTE: You'll need to include React separately
• dist/react-color-picker.nomoment.js - the full sources. NOTE: You'll need to include React AND moment.js separately
• dist/react-color-picker.nomoment.min.js - minified & optimized version. NOTE: You'll need to include React AND moment.js separately