DateRangePicker

import { DateRangePicker } from '@enmovil/ui-design-system';

Lets the user pick a start and end date, with optional time and week display and a list of quick ranges such as "Last Month".

Properties

Property	Type	Required	Default	Allowed values	Description
minDate	string | Date	No	new Date()	—	Earliest date the user can select.
maxDate	string | Date	No	new Date()	—	Latest date the user can select.
size	string	No	'middle'	'small', 'middle', 'large'	Size of the input.
format	string	No	'DD-MM-YYYY'	'YYYY-MM-DD', 'DD/MM/YYYY', 'MM-DD-YYYY', 'YYYY/MM/DD', 'DD-MM-YYYY'	Display format of the dates, and the format of the strings passed to onDateRangeChange.
isShowTime	boolean	No	false	—	Adds time selection to the picker.
isAllowClear	boolean	No	true	—	Shows a clear button in the input.
isShowWeek	boolean	No	false	—	Shows week numbers in the calendar.
isQuickSelection	boolean	No	true	—	Shows the quick-range list beside the calendar.
quickSelectors	QuickSelectorKey[]	No	—	—	Which quick ranges to show, in order. When empty or omitted, all ranges are shown.
disabled	boolean | [boolean, boolean]	No	—	—	Disables the picker.
placeholder	[string, string]	No	—	—	Placeholder text for the start and end inputs, as a two-item array.
disabledDate	DisabledDate<Dayjs>	No	—	—	Called for each date; return true to make that date unselectable. Use it for rules that minDate and maxDate can't express.

Other attributes

DateRangePicker passes 361 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.

Events

Name	Signature	When it fires
onDateRangeChange	((vals: string[]) => void)	Fires when the user selects or clears a range. Receives the start and end dates as strings in format, or empty strings when the range is cleared.
onFocus	PickerFocusEventHandler	Fires when either input receives focus.
onBlur	PickerFocusEventHandler	Fires when either input loses focus.
onOpenChange	((open: boolean) => void)	Fires when the calendar popup opens or closes.
onCalendarChange	((dates: NoUndefinedRangeValueType<Dayjs>, dateStrings: [string, string], info: BaseInfo) => void)	Fires on each click inside the calendar, including after only the start date is picked.

Children

DateRangePicker does not accept children.

Type definitions

Shapes used by the properties above.

QuickSelectorKey

type QuickSelectorKey = | 'today'
  | 'yesterday'
  | 'thisWeek'
  | 'lastWeek'
  | 'thisMonth'
  | 'lastMonth'
  | 'lastQuarter'
  | 'lastHalfYear'
  | 'thisYear'
  | 'lastYear';

Usage notes

• Set minDate and maxDate. Both default to the current date, so without them the user can only select today.
• onDateRangeChange gives you strings, not date objects. Parse them with the same format you passed in.
• Quick ranges are calculated from the current date when the component renders. A quick range that falls outside minDate–maxDate is still listed.

Variants

Loading examples…

Playground

Change the controls to see how the properties affect the component. Values the controls don't cover come from the Primary example.

Loading playground…

Storybook

Open DateRangePicker in Storybook to try every story with the full set of controls.