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.