DatePicker

A date picker that supports both text input and a dropdown calendar.

If you need to display the calendar differently, check out the Calendar component.

Showcase

Source

<DatePicker format="%m/%d/%Y" closeOnSelection />
<DatePicker format="%m/%d" noCalendar />
<DatePicker range top />

Properties #

Name	Default	Type	Description
`noCalendar`	`false`	`boolean`	Whether to hide the calendar dropdown and only keep the text input.
`top`	`false`	`boolean`	Whether to show the calendar dropdown above or below the text field.
`right`	`false`	`boolean`	Whether to align the calendar dropdown to the right or the left side of the text field.

Name	Default	Type	Description
`range`	`false`	`boolean`	If this is set, the date picker will have two fields – for the start and the end of the date range.
`value`	`null`	`Date` or `{ start, end }`	Depending on the value of the `range` prop, this is either a Date object or an object with two fields, `start` and `end`, containing Date objects.
`locale`	`undefined`	`string`	The language tag defining the desired locale (e.g., `en-US`). If left `undefined`, the user's locale will be used. This will affect the weekdays and the day number representations as well as the spelling of the selected month.
`firstWeekday`	`1`	`number`	The index of the weekday to start the week at. 0 is for Sunday and 6 is for Saturday.
`disabledDates`	`[]`	`Array<Date \| {start?: Date; end?: Date}>`	A range of dates (or date ranges) for which to disable selection.
`closeOnSelection`	`false`	`boolean`	If `true`, the dropdown will be automatically closed after a date is selected.
`format`	`'%d.%m.%Y'`	`string`	The format string for the text input and representation. The `%`-specifiers are a subset of C date format specifiers, with only `%d`, `%m`, `%y` and `%Y` allowed.

All <DatePicker> components use the .date-picker class.

Falsy values passed to classes will be disregarded.

Name	Default	Type	Description
`class`	`null`	`string`	A class string to add to the component.
`weekdaysClass`	`null`	`string`	A class string to add to the list of weekdays above the calendar.
`weekClass`	`null`	`string`	A class string to add to each element containing a row of days in the calendar.
`dayClass`	`null`	`string`	A class string to add to each day in the calendar.
`inputClass`	`null`	`string`	A class string to pass down to the `TextField`(s).

Name	Event Detail	Description
`change`	`{ value }`	Fired when the value of the picker changes. For the range pickers, will only fire when both ends of the range are selected. The `value` field contains the same thing as the `value` property would contain.

The area between two text fields in a range picker. Defaults to the text "to".

The icon to use for switching to the previous month in the calendar.

The icon to use for switching to the next month in the calendar.

Name	Description	Default
`$textfield-bg`	The background color of the text field.	#F5F5F5
`$main`	The color of the bottom border of the focused text field and calendar selection.	#4300B0
`$bold-font-weight`	The bold font weight of the selected month in the calendar.	`500`
`$dark` From `Calendar`	The text color of the days in the calendar.	#333333
`$disabled` From `Calendar`	The text color of the days in the calendar outside the current month.	#888888
`$danger`	The color of the disabled days in the calendar.	#B80000
`$main-text` From `Calendar`	The text color of the selected days in the calendar.	#FFFFFF
`$regular-font-weight` From `Calendar`	The font weight of the days.	`400`
`$font` From `Button`	The font of the days in the calendar and the text of the text field.	`'Ubuntu'`
`$button-radius` From `Button`	The curvature radius of a button.	`1.5625em`
`$background` From `Dropdown`	The background color of the dropdown content	#FFFFFF
`$shadow-raised` From `Dropdown`	The shadow of the dropdown.	hover me 0 2px 4px -1px rgba(0, 0, 0, .2), 0 3px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
`$card-radius` From `Dropdown`	The curvature radius of the dropdown.	`1.25em`
`$textfield-border` From `TextField`	The color of the bottom border of the unfocused text field.	rgba(0, 0, 0, .42)
`$thin-font-weight` From `TextField`	The thin font weight for the text inside the text field.	`300`