Locales

Calendar month names, weekday headers, and related dayjs formatting follow a dayjs locale id, not a raw BCP-47 tag alone. Import the locale module, then pass the same id to locale.

Import rule

dayjs does not load locale data until you import it. Do this once before rendering a picker that needs that locale:

import "dayjs/locale/fr";
import { DateTime } from "universal-datetime-picker";
import "universal-datetime-picker/style.css";

<DateTime
  locale="fr"
  weekStartsOn={1}
  inline
  mode="date"
  onChange={console.log}
/>

Using locale="fr-ca" without import "dayjs/locale/fr-ca" falls back to incomplete or English names. Match the import path to the id you pass.

labels vs locale

Control	Affects
`locale`	dayjs-driven calendar text: months, weekdays, and formatted values that go through dayjs
`labels`	UI chrome strings: OK, Clear, Close, Date/Time tab titles, range prompts, and similar

Locale does not translate OK/Clear for you. Set labels when those strings must match the user's language.

<DateTime
  inline
  locale="fr"
  weekStartsOn={1}
  labels={{
    ok: "Valider",
    clear: "Effacer",
    close: "Fermer",
    date: "Date",
    time: "Heure",
  }}
/>

Verified playground locales

These ids are exercised in the site playground. Friendly names are for humans. Pass the id string to locale.

dayjs id	Name
`en`	English
`en-gb`	English (United Kingdom)
`en-ca`	English (Canada)
`fr`	French
`fr-ca`	French (Canada)
`de`	German
`es`	Spanish
`es-mx`	Spanish (Mexico)
`it`	Italian
`pt-br`	Portuguese (Brazil)
`ja`	Japanese
`ko`	Korean
`zh-cn`	Chinese (Simplified)
`zh-tw`	Chinese (Traditional)
`nl`	Dutch
`sv`	Swedish

React example (French, Monday start)

import { useState } from "react";
import "dayjs/locale/fr";
import { DateTime } from "universal-datetime-picker";
import "universal-datetime-picker/style.css";

export function FrenchDatePicker() {
  const [value, setValue] = useState<Date | null>(null);

  return (
    <DateTime
      inline
      mode="date"
      locale="fr"
      weekStartsOn={1}
      asString={false}
      value={value}
      onChange={(next) => setValue(next instanceof Date ? next : null)}
      labels={{
        clear: "Effacer",
        close: "Fermer",
        chooseDate: "Choisir une date",
      }}
    />
  );
}

Other locales ship with dayjs. Import the module, pass the id, and test weekday order with weekStartsOn. See the examples playground and Troubleshooting if names stay in English.