DatePicker

The anchor is the inline element that the user will interact with to trigger the datepicker.

Built-in anchors include:

• 'button': A button that users can click to open the picker.
• 'input': A text input box that users can type dates into if they prefer.
• 'icon-only': A button that is styled as a calendar icon for integration into other components.

To use a custom anchor, either provide a render function here or provide a ref to an externally rendered anchor. If a render function is provided, the current selection string will be provided as the children prop.

Optional style overrides for the anchor. Ignored if a custom anchor is used.

Control whether the datepicker is disabled or not.

Control whether the user needs to press a button to apply their changes. If false, the datepicker will apply changes and close as soon as a selection is made.

Control whether the user should confirm their changes if they exit the picker without saving. If true, the picker will be put into confirmation mode, regardless of the value of the confirmation prop.

Show a smaller header with month/year dropdowns.

Control how the selection will be displayed in the anchor.

If true, users will not be able to select weekends (Saturday or Sunday).

Control where the calendar icon will display on the anchor.

The maximum date the user can select. This is inclusive - the user can select the maxDate but not any date after.

The minimum date the user can select. This is inclusive - the user can select the minDate but not any date before.

Control whether inputs are shown inside the picker. Inputs are not shown when confirmation mode is disabled or when variant is 'multi'.

Control whether to show a 'today' button in the picker. This button will cause today's date to appear and be focused. If today's date is outside the allowed range (defined by minDate and maxDate, the button will not be displayed.

Control whether to show a 'clear' button in the picker. This button will set the date to null.

Control the size of the datepicker. Will always be '1-month' on screens too small to display 2 months side-by-side.

Determine the day of the week that is shown in the first column when displaying a month.

Placeholder string when there is no selection.

The name of the field that this datepicker is associated with. This is used in the aria-label, otherwise defaults to "Date"

Called when the selection changes. For confirmation datepicker, onChange will only be called one time, when the user clicks to confirm.

Determines whether the overlay portion of the component should be shown or not. If not defined, the date picker will manage its own internal closed/open state.

A callback which is called whenever the overlay is currently open and a "close" or "submit" gesture is detected.

A callback which is called whenever the overlay is currently closed and an "open gesture" is detected.

Current value of the picker.

Props to be spread on the internal AnchoredOverlay component. DatePicker props will take precedence in the event of a conflict.

Configuration object, if you'd like to reuse a single configuration object among multiple pickers. These can also be supplied as top-level props. If any top-level props conflict with the configuration object props, the top-level props will apply instead.