Date picker (UI SDK): Language

locale sets the typed format, the hint and the calendar’s names. Without it, the picker reads the page’s lang. The buttons have English names, so pass aria-label to translate them.

TT.MM.JJJJ

import {
  DatePicker,
  DatePickerContent,
  DatePickerControl,
  DatePickerHint,
  DatePickerInput,
  DatePickerTrigger,
} from "@/components/ui/ui-sdk-date-picker"

function UiSdkDatePickerLocale() {
  return (
    <DatePicker locale="de" defaultValue="2026-12-03" className="max-w-56">
      <DatePickerControl>
        <DatePickerInput aria-label="Lieferdatum" />
        <DatePickerTrigger aria-label="Datum wählen" />
      </DatePickerControl>
      <DatePickerHint />
      <DatePickerContent aria-label="Datum wählen" />
    </DatePicker>
  )
}

export { UiSdkDatePickerLocale }

Add this example

This adds the example as components/examples/ui-sdk-date-picker/locale.tsx, together with the Date picker component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/ui-sdk-date-picker-locale.json

To add only the component, follow the Date picker installation.

Props in this example

The Date picker props this example sets, from the API reference.

DatePicker

Prop	Type	Default
`defaultValue`	`string \| [string, string] \| null`	`–`
`locale`	`string`	`–`

DatePickerTrigger

Prop	Type	Default
`aria-label`	`string`	`"Choose date"`

Every prop is in the Date picker API reference.

More Date picker examples

See them all, with keyboard support and accessibility notes, on the Date picker page.