react-date-range-select
React date range picker powered by Date-fns. https://spredemann.github.io/react-date-range-select/
Install
yarn add date-fns #add date-fns if you haven't already yarn add react-date-range-select
Usage
import React from 'react'import DateRangeSelect from 'react-date-range-select'import 'react-date-range-select/styles/core.css' Component { return <DateRangeSelect /> }
Props
// What month will be displayed in the first calendar. Default: new Date()month: PropTypes// Make it a controlled component by passing startDate and endDatestartDate: PropTypesendDate: PropTypes// Limit selection with minDate and maxDateminDate: PropTypesmaxDate: PropTypes// Link calendar page navigationlink: PropTypesbool// Single date or date range? Defaults to truerange: PropTypesbool// Number or array of option objects that are passed to each page. Default: 1pages: PropTypes// Format string. Default: 'MMMM YY'titleFormat: PropTypesstring// Format string. Default: 'dd'dayOfWeekFormat: PropTypesstring// Week starts on... Default: 'sunday'firstDayOfWeek: PropTypesstring// Date-fns locale object. Defaults: enlocale: PropTypesobject// Right to left. Default: falserange: PropTypesbool
Events
// fires when user changes pageonNav/*[{ "id": 0 "month": Date,},{ "id": 1 "month": Date,}]*/ // fires when user makes a selectiononSelect/*{ "startDate": Date, "endDate": Date | null}*/ // fires when user makes a selection or navigatesonChange
License
MIT © spredemann