ComponentsDate Picker

Date Picker

Use GdsDatePicker when users need to enter or pick a calendar date.

Wrap your app (or the picker subtree) in GdsLocalizationProvider. It defaults to the Dayjs adapter — install dayjs and @mui/x-date-pickers alongside the other GDS peers. Theme overrides for the calendar popup can be layered later; the field already inherits GDS Text Field styles.

Default

A basic date picker with a label.

Controlled

Control the value with value and onChange (Dayjs).

Variants

Pass variant through slotProps.textField for outlined, filled, or standard.

Sizes

Pass size through slotProps.textField for small or medium.

States

Show required, disabled, and error states via the text field slot.

Views

Limit calendar views with views (for example month/year only).

Props