Date Picker
Date pickers are to help users select a date on a form.
Use a date picker when a user needs to select a date that has a small range of possible values around a known date (e.g. when a user recently moved in to their property), or to communicate availability of a limited set of dates (e.g. booking a smart meter installation).
When the date is completely unknown (e.g. a birthday), prefer the date input component instead. Navigating long periods of time to find the correct date can require a lot of clicks on a calendar component, which is tedious.
Examples
Basic usage
When no date is selected, the calendar will default to the current date. Alternatively, a default selected date can be provided.
Errors
Errors are displayed in the same way as for text inputs.
Minimum and maximum dates
The calendar input can be restricted using minimum and maximum dates. The user can manually type in dates outside of the minimum/maximum range, so be careful to handle this in validation.
Excluding unavailable days
If certain days are unavailable, they can be disabled on the calendar. The user can manually type in unavailable days, so be careful to handle this in validation.
This example shows weekends as unavailable.
Localisation
The date picker is currently only available for the UK locale.
Implementation
Props
DatePicker
is an extension of a <TextInput>
. For <TextInput>
props, see TextInput docs.
minDate
(optional) Date
Specifies the minimum date available on the calendar. This will prevent the calendar going back past the minimum date.
This does not do any validation. Validation is up to the consumer of the component. A user may still manually type
in a date before the minDate
.
maxDate
(optional) Date
Specifies the maximum date available on the calendar. This will prevent the calendar going back past the maximum date.
This does not do any validation. Validation is up to the consumer of the component. A user may still manually type
in a date after the maxDate
.
isDateAvailable
(optional) (date: Date) => boolean
Return false
if a given date should not be available for selection on the calendar.
This does not do any validation.. Validation is up to the consumer of the component.
initialFocusedDate
(optional) Date
If there is no date selected (i.e. value
is null
), this controls the date that will be initially focused in the
calendar. Defaults to the current date.
initialShowCalendar
(optional) boolean
true
if the calendar should be initially open when the component renders. Defaults to false
.