React-date-range-next NPM

react-date-range

npm.io

⚠️ Warning: the current branch represents v2 pre-release version. See v1 branch.

A library agnostic React component for choosing dates and date ranges. Uses date-fns for date operations.

Why should you use `react-date-range`?

Stateless date operations
Highly configurable
Multiple range selection
Based on native js dates
Drag n Drop selection
Keyboard friendly

Live Demo : http://adphorus.github.io/react-date-range

npm.io

Getting Started

Installation

yarn add react-date-range@next

If you don't use yarn

$ npm install --save react-date-range@next

Usage

Date Picker

import React, { Component } from 'react';
import { Calendar } from 'react-date-range';
// main style file
import 'react-date-range/dist/styles.css';
// theme css file
import 'react-date-range/dist/theme/default.css';


class MyComponent extends Component {
	handleSelect(date){
		console.log(date); // native Date object
	}

	render(){
		return (
			<div>
				<Calendar
					date={new Date()}
					onChange={this.handleSelect}
				/>
			</div>
		)
	}
}

Range Picker

import React, { Component } from 'react';
import { DateRange } from 'react-date-range';

class MyComponent extends Component {
	handleSelect(range){
		console.log(range);
		// An object with two keys,
		// 'startDate' and 'endDate' which are Momentjs objects.
	}

	render(){
		return (
			<div>
				<DateRange
					onInit={this.handleSelect}
					onChange={this.handleSelect}
				/>
			</div>
		)
	}
}

Options (DateRange, Calendar)

Property	type	Default Value	Desctiption
locale	Object	enUS from locale	you can view full list from here. Locales directly exported from `date-fns/locales`.
className	String		wrapper classname
months	Number	1	rendered month count
showSelectionPreview	Boolean	true	show preview on focused/hovered dates
previewColor	String		defines color for selection preview
shownDate	Date		initial focus date
specialDays	Date[]	[]	defines special days
onPreviewChange	Func		callback for preview changes. fn()
minDate	Date		defines minimum date. Disabled earlier dates
maxDate	Date		defines maximum date. Disabled later dates
showMonthArrow	Boolean	true	show/hide month arrow button
onChange(Calendar)	Func		callback function for date changes. fn(date: Date)
color(Calendar)	String	`#3d91ff`	defines color for selected date in Calendar
date(Calendar)	Date		date value for Calendar
onChange(DateRange)	Func		callback function for range changes. fn(changes). changes contains `startDate` and `endDate` under an object key of changed range
moveRangeOnFirstSelection(DateRange)	Boolean	false	move range on startDate selection. Otherwise endDate will replace with startDate.
ranges(Calendar)	*Object[]	[]	Defines ranges. array of range object
showDateDisplay(DateRange)	Boolean	true	show/hide selection display row. Uses `dateDisplayFormat` for formatter
dateDisplayFormat(DateRange)	String	`MMM D,YYYY`	selected range preview formatter. checkout date-fns's format option

*shape of range:

	{
		startDate: PropTypes.object,
		endDate: PropTypes.object,
		color: PropTypes.string,
		key: PropTypes.string,
		autoFocus: PropTypes.bool,
		disabled: PropTypes.bool,
		show: PropTypes.bool,
		showDateDisplay: PropTypes.bool,
	}

TODOs