react-date-range-next-freeze v1.0.0-beta.2

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

*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