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'

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