---
title: "React Range Localization Example | Mobiscroll"
component: "Range"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/range/localization"
---

# Localization - React Range demo

Localize the React date range picker — set date and time formats, button labels, RTL support, and 37 languages, with overridable settings. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/range/localization)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/datepicker/range/localization)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/datepicker/range/localization)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/range/localization.md), [jQuery](https://demo.mobiscroll.com/jquery/range/localization.md), [Angular](https://demo.mobiscroll.com/angular/range/localization.md), [Vue](https://demo.mobiscroll.com/vue/range/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 date range picker example for selecting a start and end date from a monthly calendar.
- **Locale selector** The left side of the calendar shows a "Set localization to" label with a dropdown. That opens a list of available locales that updates the date range picker calendar 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 range picker** This example embeds the date range picker directly in the page without an input by using inline display mode.
- **Start and end inputs** Clickable inputs appear above the calendar header. The active input has a white background, while the inactive input has a gray background. A clear button appears after a range is selected.
- **Header navigation** The month and year label in the upper-left corner opens the month and year picker. The previous and next arrow buttons on the right navigate between months.
- **Month view** A fixed weekday header shows abbreviated day names from Sunday through Saturday, with dates arranged in a grid below.
- **Month navigation** Drag the calendar left or right to move between months.
- **Day cell states** Hovering over a day highlights its number with a gray background. The first selected day becomes the range start, and the second becomes the range end. Selected days are highlighted in blue. The current date is highlighted by default and remains blue when another date is selected.
- **Adjacent months** Dates from the previous and next months use a muted style. Selecting one navigates to its corresponding month.

## Best for

- **Multi-language date range picker UIs** Apps that need the same date range 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
- [`select`](https://mobiscroll.com/docs/react/datepicker/api#opt-select) - option
- [`display`](https://mobiscroll.com/docs/react/datepicker/api#opt-display) - option
- [`locale`](https://mobiscroll.com/docs/react/datepicker/api#localization-locale) - option
- [`controls`](https://mobiscroll.com/docs/react/datepicker/api#opt-controls) - option

## Code

### JSX

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

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

function App() {
  return (
    <div>
      <Datepicker
        select="range"
        display="inline"
        locale={localeEs} // Sets the language of the component
      />
    </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={['calendar']}
    select="range"
    display="inline"
    locale={localeEs} // Sets the language of the component
  />
);
export default App;
```

## Implementation notes

- Use `controls: ['calendar']`, `select: 'range'`, and `display: 'inline'` for an embedded date range picker.
- Set the `locale` option to a locale object (e.g. `mobiscroll.locale.de`) to switch date/time formatting, button copy, and RTL support for the whole picker.
- Locale objects are exposed per framework: JS/jQuery reference `mobiscroll.locale[code]` directly on the options object; Angular imports named exports (e.g. `localeDe`) from `@mobiscroll/angular` and binds with `[locale]="localeDe"`; React passes the same imported object as the `locale` prop; Vue binds it with `:locale="locale"`.
- Changing the active locale at runtime is done by calling `.setOptions({ locale: mobiscroll.locale[code] })` on the picker instance (JS/jQuery) or by reassigning the bound `locale` value in the framework wrappers - the component re-renders with the new formatting and copy without recreating the instance.
- No other option needs to change per locale - `min`/`max`, `minRange`/`maxRange`, and any invalid/valid rules continue to apply under the new locale's date format.

## 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: [Gregorian Jalali Hijri](https://demo.mobiscroll.com/react/range/gregorian-jalali-hijri.md) - Use the React date range picker with Gregorian, Jalali, and Hijri calendar systems to support regional user bases.
- Next: [RTL Support](https://demo.mobiscroll.com/react/range/rtl-right-to-left.md) - Use the React date range picker with built-in RTL support — set right-to-left layout manually or inherit it from locale settings.