@density/ui-date-range-picker v1.2.3

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, and focusedInput.
• 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's startDate and endDate
• onOpenCommonRangeList: ()=> void - Triggered when the common range list is opened.