This package has been deprecated

Author message:

This component has moved to @density/ui

@density/ui-date-range-picker

1.2.3 • Public • Published

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.

Readme

Keywords

none

Package Sidebar

Install

npm i @density/ui-date-range-picker

Weekly Downloads

1

Version

1.2.3

License

MIT

Unpacked Size

706 kB

Total Files

8

Last publish

Collaborators

  • 1egoman
  • jshanley
  • density-ci
  • rjgrazioli
  • cat.density