rct-daterange
v1.1.0
Published
A React date range picker based on Date-fns
Downloads
2
Readme
rct-daterange
React date range picker powered by Date-fns. https://spredemann.github.io/rct-daterange/
Install
yarn add date-fns #add date-fns if you haven't already
yarn add rct-daterange
Usage
import React from 'react'
import DateRangeSelect from 'rct-daterange'
import 'rct-daterange/styles/core.css'
class Example extends React.Component {
render () {
return (
<DateRangeSelect />
)
}
}
Props
// What month will be displayed in the first calendar. Default: new Date()
month: PropTypes.instanceOf(Date),
// Make it a controlled component by passing startDate and endDate
startDate: PropTypes.instanceOf(Date),
endDate: PropTypes.instanceOf(Date),
// Limit selection with minDate and maxDate
minDate: PropTypes.instanceOf(Date),
maxDate: PropTypes.instanceOf(Date),
// Link calendar page navigation
link: PropTypes.bool,
// Single date or date range? Defaults to true
range: PropTypes.bool,
// Number or array of option objects that are passed to each page. Default: 1
pages: PropTypes.oneOfType([
PropTypes.number,
PropTypes.arrayOf(PropTypes.object),
]),
// Format string. Default: 'MMMM YY'
titleFormat: PropTypes.string,
// Format string. Default: 'dd'
dayOfWeekFormat: PropTypes.string,
// Week starts on... Default: 'sunday'
firstDayOfWeek: PropTypes.string,
// Date-fns locale object. Defaults: en
locale: PropTypes.object
// Right to left. Default: false
range: PropTypes.bool,
Events
// fires when user changes page
onNav
/*
[{
"id": 0
"month": Date,
},{
"id": 1
"month": Date,
}]
*/
// fires when user makes a selection
onSelect
/*
{
"startDate": Date,
"endDate": Date | null
}
*/
// fires when user makes a selection or navigates
onChange
License
MIT © spredemann