react-date-range v1.0.0-alpha0

react-date-range

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

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)

*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,
	}

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 renderer props