React Daterange Picker

A React based date range picker. Demo

Getting started

Installation

Add React Daterange Picker to your project by executing

npm install react-daterange-picker

or

yarn add react-daterange-picker

Usage

Here's an example of basic usage:

import React, {Component} from 'react'
import DateRangePicker from 'react-daterange-picker'
import 'react-daterange-picker/dist/css/react-calendar.css' // For some basic styling. (OPTIONAL)

class MyApp extends Component {
  state = {
    dates: null
  }

  onSelect = dates => this.setState({dates})

  render() {
    return (
      <div>
        <DateRangePicker
          onSelect={this.onSelect}
          value={this.state.dates}
        />
      </div>
    )
  }
}

Here is a working example:

Features

• Select a date range in an intuitive way.
• Define date ranges that are not available for selection.
• Show any number of months at the same time.
• Visually represent half day states.

Available props

prop	description	default	type
bemBlock			String
bemNamespace		'DateRangePicker'	String
className			String
dateStates	An array of date ranges and their states		Array
defaultState			String
disableNavigation		false	Boolean
firstOfWeek	The first day of the week, as a number between 0-6, where 0 is Sunday	0	Integer
helpMessage			String
initialDate			Date
initialFromValue		true	Boolean
initialMonth	Overrides values derived from initialDate/initialRange		Integer
initialRange			Object
initialYear	Overrides values derived from initialDate/initialRange		Integer
locale		moment().locale()	String
maximumDate	The last date that is possible to choose. Every date after will be unselectable	null	Moment or Date
minimumDate	The earliest date that is possible to choose. Every date before will be unselectable	null	Moment or Date
monthFormat	Month representation according to Moment	'MMMM'	String
yearFormat	Year representation according to Moment	'YYYY'	String
numberOfCalendars	The number of months showing next to each other	1	Integer
onHighlightDate	Triggered when a date is highlighted (hovered)		Function
onHighlightRange	Triggered when a range is highlighted (hovered)		Function
onSelect	Triggered when a date or range is selected. returns value		({start, end}) => this.setState({start, end})
onSelectStart	Triggered when the first date in a range is selected		Function
paginationArrowComponent		PaginationArrow	Component
selectedLabel		'Your selected dates'	String
selectionType			String (single or range)
selectOnlyDateInSelectedRange	Show selected state only dates in the selected range	false	Boolean
singleDateRange		false	Boolean
showLegend		false	Boolean
stateDefinitions			Object
value	Contains the start and end value of the selected date range. Format: value={start: null, end: null} (moment range)	null	Moment

React version

React 0.14, 15, and 16 are all supported in the latest version of react-daterange-picker.

If you wish to user an older version of React, please use react-daterange-picker v0.12.x or below.

Changelog

All change log information is available within the project's releases.

Contribute

Please feel to contribute to this project by making pull requests. You can see a list of tasks that can be worked on in the issues list.

Before a pull request can be merged, ensure that you have linted your files and all tests are passing -

npm run lint
npm run test

Publishing

If you have been added as a project contributor and wish to publish a new release -

• Ensure that you have added yourself to the package.json contributors list
• Bump the npm version as appropriate, following SemVer conventions
• Update the Demo by running npm run deploy-example

Building example page

Once you have the repository cloned run the following commands to get started:

npm install
npm run develop

This will start a local server at http://localhost:9989 where you can see the example page. It will also watch for any files changes and rebuild. To update the compiled files in dist run npm run build-dist-js, and you can lint the code with npm run lint.