Date picker

Set the appearance of the picker. subtle will remove the borders, background, and icon. NOTE: Appearance values will be ignored if styles are parsed through selectProps.

Used to associate accessible descriptions to the date picker.

Set the picker to autofocus on mount.

Set the aria-label for the clear button. Add the word "Clear" at the beginning of the clearControlLabel. For instance, for a field to set an appointment, use "Clear appointment date and time".

You should not be accessing this prop under any circumstances. It is provided by @atlaskit/analytics-next and integrated in the component

Format the date with a string that is accepted by date-fns's format function. When set, the default parser also uses this format (via date-fns) so displayed labels re-parse. Without dateFormat, parsing falls back to the locale. A custom parseInputValue overrides this default.

Note that though we are using date-fns version 2, we use the tokens from date-fns version 1 under the hood.

The default for isOpen. Will be false if not provided.

The default for value.

An array of ISO dates that should be disabled on the calendar. This does not affect what users can type into the picker.

A filter function for disabling dates on the calendar. This does not affect what users can type into the picker.

The function is called with a date string in the format YYYY-MM-DD and should return true if the date should be disabled.

A function for formatting the date displayed in the input. By default composes together date-fns's parse method and date-fns's format method to return a correctly formatted date string.

Note that this does not affect how the input is parsed. Use dateFormat for default parsing of the display format, or parseInputValue for a custom parser.

Hides icon for dropdown indicator.

The icon shown in the picker.

Set the id of the field. Associates a <label></label> with the field.

Props to apply to the container.

If you are looking to set your width, use a Box from @atlaskit/primitives around the picker to achieve the same effect.

The name of the input, used when shouldShowCalendarButton is true. See shouldShowCalendarButton description for more details.

The ID of the label for the input, used when shouldShowCalendarButton is true. See shouldShowCalendarButton description for more details.

Set if the picker is disabled.

Set if the picker has an invalid value.

Set if the picker is open.

Set the field as required.

Accessible name for the Date Picker Select, rendered as aria-label. This will override any other method of providing a label.

Locale used to format the date and calendar. See DateTimeFormat.

The latest enabled date. Dates after this are disabled on the calendar. This does not affect what users can type into the picker.

This overrides the inner wrapper the Calendar. @private Please use this with extreme caution, this API may be changed in the future.

The earliest enabled date. Dates before this are disabled on the calendar. This does not affect what users can type into the picker.

The name of the field.

The aria-label attribute associated with the next-month arrow.

Called when the field is blurred.

Called when the value changes. The only argument is an ISO time or empty string.

Called when the field is focused.

The label associated with the button to open the calendar, rendered via the shouldShowCalendarButton prop. If a label prop is provided, this calendar button label will be prefixed by the value of label. If no label prop is provided, this prefix should be manually added. For example,

<label id="label" htmlFor="datepicker">Desired Appointment Date</label>
<DatePicker
	id="datepicker"
	shouldShowCalendarButton
	inputLabel="Desired Appointment Date"
	openCalendarLabel="open calendar"
/>

A function for parsing input characters and transforming them into a Date object. Overrides the default parser. By default, when dateFormat is set the input is parsed with that format via date-fns; otherwise the date string is parsed based off the locale. Note that this does not affect how the resulting value is displayed in the input. Use the dateFormat or formatDisplayLabel prop to handle how the value is displayed.

Placeholder text displayed in input.

The aria-label attribute associated with the previous-month arrow.

Provides a functional calendar button that opens the calendar picker that lives on the right side of the date picker.

The accessible name for this button is caculated using either the label, inputLabel, or inputLabelId props, along with the openCalendarLabel prop.

The spacing for the select control.

Compact is gridSize() * 4, default is gridSize * 5.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests

• {testId}--container wrapping element of date-picker
• {testId}--calendar--container nested calendar component

The ISO time used as the input value.

Start day of the week for the calendar.

• 0 sunday (default value)
• 1 monday
• 2 tuesday
• 3 wednesday
• 4 thursday
• 5 friday
• 6 saturday