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

# Localization - JavaScript Calendar demo

Localize the Javascript date picker across 37 languages — set date/time formats, RTL, and button text, with manual overrides for any locale setting. Plain JS api for usage everywhere.

- [Live demo](https://demo.mobiscroll.com/javascript/calendar/localization)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/datepicker/calendar/localization)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/calendar/localization.md), [Angular](https://demo.mobiscroll.com/angular/calendar/localization.md), [React](https://demo.mobiscroll.com/react/calendar/localization.md), [Vue](https://demo.mobiscroll.com/vue/calendar/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 date picker examples for selecting a single date.
- **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 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.
- **Header navigation** The month and year label in the top left opens a month and year picker. The blue previous and next arrow buttons on the right navigate between months.
- **Month view** A fixed weekday header displays abbreviated day names from Sunday through Saturday, with the dates arranged in a grid below it.
- **Month navigation** The month can be changed by clicking and dragging the calendar left or right.
- **Day cell states** Hovering a day highlights the day number with a gray background. Selecting a day highlights the day number with a blue background. The current date is highlighted by default and remains blue when the user selects another date.
- **Adjacent months** Dates from the previous and next months appear with a muted style. Selecting one navigates the calendar to the corresponding month.

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

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

With "Arabic":

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

With "Bulgarian":

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

With "Català":

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

With "Cestina":

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

With "Chinese":

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

With "Croatian":

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

With "Dansk":

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

With "Deutsch":

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

With "English (UK)":

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

With "Español":

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

With "Français":

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

With "Greek":

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

With "Hindi":

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

With "Italiano":

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

With "Japanese":

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

With "Korean":

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

With "Lietuvių":

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

With "Magyar":

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

With "Nederlands":

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

With "Norsk":

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

With "Polski":

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

With "Português Europeu":

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

With "Pt. Brasileiro":

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

With "Română":

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

With "Serbian":

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

With "Slovencina":

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

With "Suomi":

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

With "Svenska":

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

With "Thai":

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

With "Türkçe":

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

With "Ukrainian":

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

With "Vietnamese":

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

With "Русский":

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

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

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

With "עברית":

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

With "فارسی":

```js
mobiscroll.datepicker('#calendar', {
    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
- [`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'],
  display: 'inline',
  locale: mobiscroll.localeEs, // Sets the language of the component
});
```

### HTML

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

## Implementation notes

- Use `controls: ['calendar']` and `display: 'inline'`, initialized with `locale: 'en'`. `locale` can be updated at runtime via `setOptions({ locale: mobiscroll.locale[code] })` to live-switch the picker's localization.
- 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 - used for the picker's initial state before a locale is selected from the dropdown.
- `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-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/calendar/gregorian-jalali-hijri.md) - Use a Javascript calendar date picker with Gregorian, Jalali (Persian), and Hijri (Arabic) calendar system support for regional date selection.
- Next: [Right-to-Left](https://demo.mobiscroll.com/javascript/calendar/rtl-right-to-left.md) - Use a Javascript calendar date picker with RTL support — enable right-to-left layout or inherit it from locale settings for Arabic, Hebrew, or Farsi.