react-date-range

⚠️ 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

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

• Make mobile friendly (integrate tap and swipe actions)
• Add complex booking customization example with exposed dayRenderer prop
• Add tests
• Improve documentation