@umnico/react-date-range NPM

react-date-range

npm.io

⚠️ Warning: the current branch represents the new pre-release version. Legacy version deprecated.

A date 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

You need to import skeleton and theme styles first.

import 'react-date-range/dist/styles.css'; // main style file
import 'react-date-range/dist/theme/default.css'; // theme css file

`DatePicker`

import { Calendar } from 'react-date-range';

class MyComponent extends Component {
	handleSelect(date){
		console.log(date); // native Date object
	}
	render(){
		return (
			<Calendar
				date={new Date()}
				onChange={this.handleSelect}
			/>
		)
	}
}

`DateRangePicker / DateRange`

import { DateRangePicker } from 'react-date-range';

class MyComponent extends Component {
	handleSelect(ranges){
		console.log(ranges);
		// {
		// 	selection: {
		// 		startDate: [native Date Object],
		// 		endDate: [native Date Object],
		// 	}
		// }
	}
	render(){
		const selectionRange = {
			startDate: new Date(),
			endDate: new Date(),
			key: 'selection',
		}
		return (
			<DateRangePicker
				ranges={[selectionRange]}
				onChange={this.handleSelect}
			/>
		)
	}
}

Options

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
rangeColors	String[]		defines color for selection preview.
shownDate	Date		initial focus date
minDate	Date		defines minimum date. Disabled earlier dates
maxDate	Date		defines maximum date. Disabled later dates
direction	String	'vertical'	direction of calendar months. can be `vertical` or `horizontal`
scroll	Object	{ enabled: false }	infinite scroll behaviour configuration. Checkout Infinite Scroll section
showMonthArrow	Boolean	true	show/hide month arrow button
navigatorRenderer	Func		renderer for focused date navigation area. fn(currentFocusedDate: Date, changeShownDate: func, props: object)
ranges	*Object[]	[]	Defines ranges. array of range object
moveRangeOnFirstSelection(DateRange)	Boolean	false	move range on startDate selection. Otherwise endDate will replace with startDate.
onChange(Calendar)	Func		callback function for date changes. fn(date: Date)
onChange(DateRange)	Func		callback function for range changes. fn(changes). changes contains changed ranges with new `startDate`/`endDate` properties.
color(Calendar)	String	`#3d91ff`	defines color for selected date in Calendar
date(Calendar)	Date		date value for Calendar
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
staticRanges(`DefinedRange`, `DateRangePicker`)	Array	default preDefined ranges	-
inputRanges(`DefinedRange`, `DateRangePicker`)	Array	default input ranges	-

*shape of range:

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

Infinite Scrolled Mode

To enable infinite scroll set `scroll={{enabled: true}}` basically. Infinite scroll feature is affected by `direction`(rendering direction for months) and `months`(for rendered months count) props directly.
If you prefer, you can overwrite calendar sizes with `calendarWidth`/`calendarHeight` or each month's height/withs with `monthWidth`/`monthHeight`/`longMonthHeight` at `scroll` prop.

	// shape of scroll prop
  scroll: {
    enabled: PropTypes.bool, 
    monthHeight: PropTypes.number,
    longMonthHeight: PropTypes.number, // some months has 1 more row than others
    monthWidth: PropTypes.number, // just used when direction="horizontal"
    calendarWidth: PropTypes.number, // defaults monthWidth * months
    calendarHeight: PropTypes.number, // defaults monthHeight * months
  }),

TODOs