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

# Localization - JavaScript Range demo

Localize the Javascript date range picker — set date and time formats, button labels, RTL support, and 37 languages, with overridable settings. Plain JS api for usage everywhere.

- [Live demo](https://demo.mobiscroll.com/javascript/range/localization)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/datepicker/range/localization)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/range/localization.md), [Angular](https://demo.mobiscroll.com/angular/range/localization.md), [React](https://demo.mobiscroll.com/react/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/javascript/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`

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeEn
});
```

With "Arabic":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeAr
});
```

With "Bulgarian":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeBg
});
```

With "Català":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeCa
});
```

With "Cestina":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeCs
});
```

With "Chinese":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeZh
});
```

With "Croatian":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeHr
});
```

With "Dansk":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeDa
});
```

With "Deutsch":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeDe
});
```

With "English (UK)":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeEnGB
});
```

With "Español":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeEs
});
```

With "Français":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeFr
});
```

With "Greek":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeEl
});
```

With "Hindi":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeHi
});
```

With "Italiano":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeIt
});
```

With "Japanese":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeJa
});
```

With "Korean":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeKo
});
```

With "Lietuvių":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeLt
});
```

With "Magyar":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeHu
});
```

With "Nederlands":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeNl
});
```

With "Norsk":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeNo
});
```

With "Polski":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localePl
});
```

With "Português Europeu":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localePtPT
});
```

With "Pt. Brasileiro":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localePtBR
});
```

With "Română":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeRo
});
```

With "Serbian":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeSr
});
```

With "Slovencina":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeSk
});
```

With "Suomi":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeFi
});
```

With "Svenska":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeSv
});
```

With "Thai":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeTh
});
```

With "Türkçe":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeTr
});
```

With "Ukrainian":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeUa
});
```

With "Vietnamese":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeVi
});
```

With "Русский":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeRu
});
```

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

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeRuUA
});
```

With "עברית":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeHe
});
```

With "فارسی":

```js
mobiscroll.datepicker('#range', {
    locale: mobiscroll.localeFa
});
```

## API used in this demo

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

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

mobiscroll.datepicker('#demo', {
  controls: ['calendar'],
  select: 'range',
  display: 'inline',
  locale: mobiscroll.localeEs, // Sets the language of the component
});
```

### HTML

```html
<div id="demo"></div>
```

## 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-javascript.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 javascript
   ```

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 javascript --trial`.

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

## Related demos

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