DatePicker

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

Lets the user pick a single date, with optional time and week display and a list of quick selections. onDateChange reports the selected date as a string in format.

Properties

Property	Type	Required	Default	Allowed values	Description
format	string	No	'DD-MM-YYYY'	'YYYY-MM-DD', 'DD/MM/YYYY', 'MM-DD-YYYY', 'YYYY/MM/DD', 'DD-MM-YYYY'	Config the input field parse and format. When set format.type, it will force user input type with your input, it's only support basic format mask: YYYY, MM, DD, HH, mm, ss, SSS. Once use config mode, it must be fill with format your config.
isShowTime	boolean	No	false	—	Adds time selection to the picker. Off by default. Overridden by showTime when that is also set.
isAllowClear	boolean	No	true	—	Shows a clear icon that removes the selected date. On by default.
isShowWeek	boolean	No	false	—	Shows week numbers in the calendar. Off by default.
isQuickSelection	boolean	No	true	—	Shows a list of quick selections (Today, Yesterday and so on) beside the calendar. On by default.
quickSelectors	QuickSelectorKey[]	No	—	—	Which quick selections to show, from today, yesterday, tomorrow, dayBeforeYesterday and dayAfterTomorrow. Shows all five when absent or empty. Requires isQuickSelection.
disabled	boolean	No	—	—	Disables the picker so no date can be picked.
size	string	No	'middle'	'small', 'middle', 'large'	Height of the picker: small, middle or large. Defaults to middle.
placeholder	string	No	—	—	Text shown while no date is selected.
showTime	boolean | SharedTimeProps<Dayjs>	No	—	—	Adds time selection to the picker. Takes precedence over isShowTime.
minDate	Dayjs	No	new Date()	—	Earliest date that can be picked. Defaults to today, so set it to allow past dates.
maxDate	Dayjs	No	new Date()	—	Latest date that can be picked. Defaults to today, so set it to allow future dates.

Other attributes

DatePicker passes 366 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
onDateChange	((key: string) => void)	Fires when a date is picked or cleared, with the formatted date string. Use this rather than onChange: passing onChange replaces the internal handler, so onDateChange stops firing.
onFocus	PickerFocusEventHandler	Fires when the input receives focus.
onBlur	PickerFocusEventHandler	Fires when the input loses focus.
onOpenChange	((open: boolean) => void)	Fires when the calendar popup opens or closes.
onOk	((date: Dayjs) => void)	Fires when the OK button is clicked. Only shown with showTime.

Children

DatePicker does not accept children.

Type definitions

Shapes used by the properties above.

QuickSelectorKey

type QuickSelectorKey = | "today"
  | "yesterday"
  | "tomorrow"
  | "dayBeforeYesterday"
  | "dayAfterTomorrow";

Variants

Loading examples…

Playground

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

Loading playground…

Storybook

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