Date Range Picker component


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
Minified + gzip package size for @density/ui-date-range-picker in KB



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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.