---
title: "React Date & Time Localization Example | Mobiscroll"
component: "Date & Time"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/datetime/localization"
---

# Localization - React Date & Time demo

React Date & time picker localization example supporting 37 languages, date, time formats with full RTL capability. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/datetime/localization)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/datepicker/datetime/localization)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/datepicker/datetime/localization)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/datetime/localization.md), [jQuery](https://demo.mobiscroll.com/jquery/datetime/localization.md), [Angular](https://demo.mobiscroll.com/angular/datetime/localization.md), [Vue](https://demo.mobiscroll.com/vue/datetime/localization.md)

## Description

All components are fully localized. In case of the date picker this covers date and time format, button copy, rtl and more. You can see how each example shows up by clicking on the small flag icon or checking the examples below.

**All settings can be manually overridden** [See what options the localization impacts →](https://mobiscroll.com/docs/react/datepicker/api#localization)

## What this demo shows

- Shows a wheel-style inline date picker with different localizations.
- **Locale selector** The left side of the date picker shows a "Set localization to" label with a dropdown. That opens a list of available locales that updates the date picker localization.
- **Localization behavior** The localized setup affects date and time formatting, button labels, RTL layout support, and other built-in UI text and behaviors.
- **Inline date picker** The example embeds the picker directly in the page without an input by using inline display mode.
- **Date selection** Separate scrollable wheels let users select the month, day, and year. The selected values appear in a central selection area, while neighboring values remain visually subdued.
- **Scrolling behavior** Users can scroll vertically through neighboring values to move between dates, including dates in other months or years.

## Best for

- **Multi-language date picker UIs** Apps that need the same date picker experience in multiple languages and regional formats.
- **Region-specific experiences** Products that need localized date formats, time formats, and translated interface copy without rebuilding the date picker UI.

## Tutorial

### Set localization to

`English`

```jsx
<Datepicker
    locale={localeEn}
/>
```

With "Arabic":

```jsx
<Datepicker
    locale={localeAr}
/>
```

With "Bulgarian":

```jsx
<Datepicker
    locale={localeBg}
/>
```

With "Català":

```jsx
<Datepicker
    locale={localeCa}
/>
```

With "Cestina":

```jsx
<Datepicker
    locale={localeCs}
/>
```

With "Chinese":

```jsx
<Datepicker
    locale={localeZh}
/>
```

With "Croatian":

```jsx
<Datepicker
    locale={localeHr}
/>
```

With "Dansk":

```jsx
<Datepicker
    locale={localeDa}
/>
```

With "Deutsch":

```jsx
<Datepicker
    locale={localeDe}
/>
```

With "English (UK)":

```jsx
<Datepicker
    locale={localeEnGB}
/>
```

With "Español":

```jsx
<Datepicker
    locale={localeEs}
/>
```

With "Français":

```jsx
<Datepicker
    locale={localeFr}
/>
```

With "Greek":

```jsx
<Datepicker
    locale={localeEl}
/>
```

With "Hindi":

```jsx
<Datepicker
    locale={localeHi}
/>
```

With "Italiano":

```jsx
<Datepicker
    locale={localeIt}
/>
```

With "Japanese":

```jsx
<Datepicker
    locale={localeJa}
/>
```

With "Korean":

```jsx
<Datepicker
    locale={localeKo}
/>
```

With "Lietuvių":

```jsx
<Datepicker
    locale={localeLt}
/>
```

With "Magyar":

```jsx
<Datepicker
    locale={localeHu}
/>
```

With "Nederlands":

```jsx
<Datepicker
    locale={localeNl}
/>
```

With "Norsk":

```jsx
<Datepicker
    locale={localeNo}
/>
```

With "Polski":

```jsx
<Datepicker
    locale={localePl}
/>
```

With "Português Europeu":

```jsx
<Datepicker
    locale={localePtPT}
/>
```

With "Pt. Brasileiro":

```jsx
<Datepicker
    locale={localePtBR}
/>
```

With "Română":

```jsx
<Datepicker
    locale={localeRo}
/>
```

With "Serbian":

```jsx
<Datepicker
    locale={localeSr}
/>
```

With "Slovencina":

```jsx
<Datepicker
    locale={localeSk}
/>
```

With "Suomi":

```jsx
<Datepicker
    locale={localeFi}
/>
```

With "Svenska":

```jsx
<Datepicker
    locale={localeSv}
/>
```

With "Thai":

```jsx
<Datepicker
    locale={localeTh}
/>
```

With "Türkçe":

```jsx
<Datepicker
    locale={localeTr}
/>
```

With "Ukrainian":

```jsx
<Datepicker
    locale={localeUa}
/>
```

With "Vietnamese":

```jsx
<Datepicker
    locale={localeVi}
/>
```

With "Русский":

```jsx
<Datepicker
    locale={localeRu}
/>
```

With "Русский (UA)":

```jsx
<Datepicker
    locale={localeRuUA}
/>
```

With "עברית":

```jsx
<Datepicker
    locale={localeHe}
/>
```

With "فارسی":

```jsx
<Datepicker
    locale={localeFa}
/>
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/react/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/react/datepicker/api#opt-themeVariant) - option
- [`controls`](https://mobiscroll.com/docs/react/datepicker/api#opt-controls) - option
- [`display`](https://mobiscroll.com/docs/react/datepicker/api#opt-display) - option
- [`locale`](https://mobiscroll.com/docs/react/datepicker/api#localization-locale) - option

## Code

### JSX

```jsx
import { Datepicker, localeEs, setOptions } from '@mobiscroll/react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

function App() {
  return (
    <div>
      <Datepicker controls={['date']} display="inline" locale={localeEs} />
    </div>
  );
}

export default App;
```

### TSX

```tsx
import { Datepicker, localeEs, setOptions } from '@mobiscroll/react';
import { FC } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

const App: FC = () => (
  <Datepicker
    controls={['date']}
    display="inline"
    locale={localeEs} // Sets the language of the component
  />
);
export default App;
```

## Implementation notes

- Use `controls: ['date']` and `display: 'inline'` on a single inline `Datepicker` (wheel-style, not the month-grid `calendar` control), initialized with `locale: 'en'`. `locale` can be changed at runtime via `setOptions({ locale: mobiscroll.locale[code] })` to switch the picker's localization on the same instance.
- React/Angular/Vue import the desired locale as a named export from `@mobiscroll/react`/`@mobiscroll/angular`/`@mobiscroll/vue` (e.g. `localeEs`) and pass it to the `locale` prop/binding. JS/jQuery reference locales off the `mobiscroll` namespace instead (e.g. `mobiscroll.localeEs`) and set it via the `locale` option.
- `locale` also accepts a plain locale code string (e.g. `'en'`) in place of the imported locale object - useful for a picker's initial state before a full locale object is available.
- `locale` drives month/day names, first-day-of-week, button copy, and date/time formatting conventions together; pair it with `calendarSystem` only when also switching to a non-Gregorian calendar (see the Gregorian/Jalali/Hijri demo).

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-react.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config react
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config react --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/react/getting-started/installation

## Related demos

- Previous: [Calendar systems](https://demo.mobiscroll.com/react/datetime/gregorian-jalali-hijri.md) - React Date & time supporting calendar systems: Gregorian, Hijri and Jalali along with different languages and cultures.
- Next: [RTL mode](https://demo.mobiscroll.com/react/datetime/rtl-right-to-left.md) - React datetime picker with RTL support. Manual control and built-in right to left languages: Arabic, Hebrew, Farsi.