Skip to content
+

Translated components

Date and Time Pickers support translations between languages.

As with all MUI X components, you can modify text and translations inside the Date and Time Pickers. You can find all the translation keys supported in the source in the GitHub repository.

The default locale of MUI X is English (United States). If you want to use other locales, follow the instructions below.

Set translations globally

Using the theme

To translate all your components from @mui/x-date-pickers and @mui/x-date-pickers-pro, import the locale from @mui/x-date-pickers (see the list of supported locales below).

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { deDE } from '@mui/x-date-pickers/locales';

const theme = createTheme(
  {
    palette: {
      primary: { main: '#1976d2' },
    },
  },
  deDE, // use 'de' locale for UI texts (start, next month, ...)
);

function App({ children }) {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}

Note that createTheme accepts any number of arguments. If you are already using the translations of the core components or the translations of the Data Grid, you can add deDE as a new argument.

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { deDE as dataGridDeDE } from '@mui/x-data-grid';
import { deDE as coreDeDE } from '@mui/material/locale';
import { deDE } from '@mui/x-date-pickers/locales';

const theme = createTheme(
  {
    palette: {
      primary: { main: '#1976d2' },
    },
  },
  deDE, // x-date-pickers translations
  dataGridDeDE, // x-data-grid translations
  coreDeDE, // core translations
);

function App({ children }) {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}

Using LocalizationProvider

If you want to pass language translations without using createTheme and ThemeProvider, you can directly load the language translations from the @mui/x-date-pickers or @mui/x-date-pickers-pro package and pass them to the LocalizationProvider.

import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { deDE } from '@mui/x-date-pickers/locales';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

<LocalizationProvider
  localeText={deDE.components.MuiLocalizationProvider.defaultProps.localeText}
>
  <DatePicker />
</LocalizationProvider>;

Set translations locally

You can also customize the translations of a single component.

If you want to customize some translations on specific component, you can use the localeText prop exposed by all our pickers.

<DatePicker localeText={{ clearButtonLabel: 'Empty' }} />

Supported locales

LocaleBCP 47 language tagImport nameCompletionSource file
Basqueeueu
37/50
Edit
Belarusianbe-BYbeBY
35/50
Edit
Bulgarianbg-BGbgBG
Done 🎉
Edit
Catalanca-EScaES
Done 🎉
Edit
Chinese (Hong Kong)zh-HKzhHK
Done 🎉
Edit
Chinese (Simplified)zh-CNzhCN
Done 🎉
Edit
Croatianhr-HRhrHR
Done 🎉
Edit
Czechcs-CZcsCZ
Done 🎉
Edit
Danishda-DKdaDK
Done 🎉
Edit
Dutchnl-NLnlNL
Done 🎉
Edit
Finnishfi-FIfiFI
Done 🎉
Edit
Frenchfr-FRfrFR
Done 🎉
Edit
Germande-DEdeDE
Done 🎉
Edit
Greekel-GRelGR
36/50
Edit
Hebrewhe-ILheIL
Done 🎉
Edit
Hungarianhu-HUhuHU
Done 🎉
Edit
Icelandicis-ISisIS
36/50
Edit
Italianit-ITitIT
Done 🎉
Edit
Japaneseja-JPjaJP
Done 🎉
Edit
Kazakhkz-KZkzKZ
35/50
Edit
Koreanko-KRkoKR
49/50
Edit
Macedonianmkmk
37/50
Edit
Norwegian (Bokmål)nb-NOnbNO
36/50
Edit
Norwegian (Nynorsk)nn-NOnnNO
Done 🎉
Edit
Persianfa-IRfaIR
Done 🎉
Edit
Polishpl-PLplPL
28/50
Edit
Portuguesept-PTptPT
Done 🎉
Edit
Portuguese (Brazil)pt-BRptBR
Done 🎉
Edit
Romanianro-ROroRO
36/50
Edit
Russianru-RUruRU
Done 🎉
Edit
Slovaksk-SKskSK
35/50
Edit
Spanishes-ESesES
Done 🎉
Edit
Swedishsv-SEsvSE
Done 🎉
Edit
Turkishtr-TRtrTR
36/50
Edit
Ukrainianuk-UAukUA
Done 🎉
Edit
Urdu (Pakistan)ur-PKurPK
28/50
Edit
Vietnamesevi-VNviVN
Done 🎉
Edit

You can find the source in the GitHub repository.

To create your own translation or to customize the English text, copy this file to your project, make any changes needed and import the locale from there. Note that these translations of the date and time picker components depend on the Localization strategy of the whole library.

Access the translations in slots and subcomponents

You can use the usePickersTranslations hook to access the translations in your custom components.

import { usePickersTranslations } from '@mui/x-date-pickers/hooks';

const translations = usePickersTranslations();

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.