Date picker

<React.Fragment />

<React.Fragment />

<React.Fragment />

Date picker configuration

DatePicker components can use the following props:

className (optional)

A CSS class name to pass to the component.

disabledDates (optional)

Space-separated list of dates to disable in the date picker. Uses the format dd/mm/yyyy.

errorMessage (optional)

Text to use for an error message.

hasError (optional)

Whether the date picker is in an error state. Boolean.

hintText (optional)

Text to use for a date picker hint text.

id

Value to use for the id attribute of the date picker's input element. If the date picker is using multiple inputs, each field starts with the ID. For example, myId-day, myId-month, myId-year.

isMultiple (optional)

Whether to display the day, month and year as separate fields. Boolean.

label

Text to use for the date picker's associated label.

maxDate (optional)

Latest selectable date in the date picker. Uses the format dd/mm/yyyy.

minDate (optional)

Earliest selectable date in the date picker. Uses the format dd/mm/yyyy.

name (optional)

Value to use for the name attribute of the date picker. The behaviour of this on date pickers with multiple input fields is the same as the behaviour of the id prop.

onBlur (optional)

Function to fire in response to a blur event.

onChange (optional)

Function to fire in response to a change event.

value (optional)

The default value of the date picker.

width (optional)

The width of the input element. See TextInput for the available options. Default is fixed-10.