DateRangePicker
This component is used to allow the user to select a range of dates. It relies heavily on the DateRangePicker from the react-dates library.
Along with the date range picker, this component includes functionality for commonly used ranges, as a shortcut to selecting date ranges. If common ranges are passed through as props, the component will render a collapsable list that controls the startDate
and endDate
of the parent component.
Common Range Format
To enable the common range list, pass through a JSON array of common range definitions to the commonRanges
prop. The formatting should follow:
[
{
name: "Week to date",
startDate: moment.utc().startOf('week'),
endDate: moment.utc()
},
{
name: "Month to date",
startDate: moment.utc().startOf('month'),
endDate: moment.utc()
},
{
name: "Quarter to date",
startDate: moment.utc().startOf('quarter'),
endDate: moment.utc()
}
]
Component Props
- Allows for all component props of the DateRangePicker from the react-dates library. Commonly used props include
startDate
,endDate
,onChange
, andfocusedInput
. -
commonRanges: Array | null (optional)
- Array of common range definitions (documented above). If null, the toggleable list won't be rendered. -
showCommonRangeSubtitles: Boolean
- Determines whether the range subtitles (containing the actual date ranges) are rendered. Defaults to false. -
onSelectCommonRange: ()=> {CommonRangeObject}
- Triggered when a common range is selected. Use to modify the parent component'sstartDate
andendDate
-
onOpenCommonRangeList: ()=> void
- Triggered when the common range list is opened.