Skip to content

Latest commit

 

History

History
135 lines (102 loc) · 4.37 KB

README.md

File metadata and controls

135 lines (102 loc) · 4.37 KB
Raw

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: Edit 0xv5m04yql

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
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)
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.