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

# Localization - Angular Range demo

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

- [Live demo](https://demo.mobiscroll.com/angular/range/localization)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/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), [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/angular/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`

```html
<mbsc-datepicker
    [locale]="localeEn">
</mbsc-datepicker>
```

With "Arabic":

```html
<mbsc-datepicker
    [locale]="localeAr">
</mbsc-datepicker>
```

With "Bulgarian":

```html
<mbsc-datepicker
    [locale]="localeBg">
</mbsc-datepicker>
```

With "Català":

```html
<mbsc-datepicker
    [locale]="localeCa">
</mbsc-datepicker>
```

With "Cestina":

```html
<mbsc-datepicker
    [locale]="localeCs">
</mbsc-datepicker>
```

With "Chinese":

```html
<mbsc-datepicker
    [locale]="localeZh">
</mbsc-datepicker>
```

With "Croatian":

```html
<mbsc-datepicker
    [locale]="localeHr">
</mbsc-datepicker>
```

With "Dansk":

```html
<mbsc-datepicker
    [locale]="localeDa">
</mbsc-datepicker>
```

With "Deutsch":

```html
<mbsc-datepicker
    [locale]="localeDe">
</mbsc-datepicker>
```

With "English (UK)":

```html
<mbsc-datepicker
    [locale]="localeEnGB">
</mbsc-datepicker>
```

With "Español":

```html
<mbsc-datepicker
    [locale]="localeEs">
</mbsc-datepicker>
```

With "Français":

```html
<mbsc-datepicker
    [locale]="localeFr">
</mbsc-datepicker>
```

With "Greek":

```html
<mbsc-datepicker
    [locale]="localeEl">
</mbsc-datepicker>
```

With "Hindi":

```html
<mbsc-datepicker
    [locale]="localeHi">
</mbsc-datepicker>
```

With "Italiano":

```html
<mbsc-datepicker
    [locale]="localeIt">
</mbsc-datepicker>
```

With "Japanese":

```html
<mbsc-datepicker
    [locale]="localeJa">
</mbsc-datepicker>
```

With "Korean":

```html
<mbsc-datepicker
    [locale]="localeKo">
</mbsc-datepicker>
```

With "Lietuvių":

```html
<mbsc-datepicker
    [locale]="localeLt">
</mbsc-datepicker>
```

With "Magyar":

```html
<mbsc-datepicker
    [locale]="localeHu">
</mbsc-datepicker>
```

With "Nederlands":

```html
<mbsc-datepicker
    [locale]="localeNl">
</mbsc-datepicker>
```

With "Norsk":

```html
<mbsc-datepicker
    [locale]="localeNo">
</mbsc-datepicker>
```

With "Polski":

```html
<mbsc-datepicker
    [locale]="localePl">
</mbsc-datepicker>
```

With "Português Europeu":

```html
<mbsc-datepicker
    [locale]="localePtPT">
</mbsc-datepicker>
```

With "Pt. Brasileiro":

```html
<mbsc-datepicker
    [locale]="localePtBR">
</mbsc-datepicker>
```

With "Română":

```html
<mbsc-datepicker
    [locale]="localeRo">
</mbsc-datepicker>
```

With "Serbian":

```html
<mbsc-datepicker
    [locale]="localeSr">
</mbsc-datepicker>
```

With "Slovencina":

```html
<mbsc-datepicker
    [locale]="localeSk">
</mbsc-datepicker>
```

With "Suomi":

```html
<mbsc-datepicker
    [locale]="localeFi">
</mbsc-datepicker>
```

With "Svenska":

```html
<mbsc-datepicker
    [locale]="localeSv">
</mbsc-datepicker>
```

With "Thai":

```html
<mbsc-datepicker
    [locale]="localeTh">
</mbsc-datepicker>
```

With "Türkçe":

```html
<mbsc-datepicker
    [locale]="localeTr">
</mbsc-datepicker>
```

With "Ukrainian":

```html
<mbsc-datepicker
    [locale]="localeUa">
</mbsc-datepicker>
```

With "Vietnamese":

```html
<mbsc-datepicker
    [locale]="localeVi">
</mbsc-datepicker>
```

With "Русский":

```html
<mbsc-datepicker
    [locale]="localeRu">
</mbsc-datepicker>
```

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

```html
<mbsc-datepicker
    [locale]="localeRuUA">
</mbsc-datepicker>
```

With "עברית":

```html
<mbsc-datepicker
    [locale]="localeHe">
</mbsc-datepicker>
```

With "فارسی":

```html
<mbsc-datepicker
    [locale]="localeFa">
</mbsc-datepicker>
```

```ts
import { localeEn } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeEn = localeEn;
}
```

With "Arabic":

```ts
import { localeAr } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeAr = localeAr;
}
```

With "Bulgarian":

```ts
import { localeBg } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeBg = localeBg;
}
```

With "Català":

```ts
import { localeCa } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeCa = localeCa;
}
```

With "Cestina":

```ts
import { localeCs } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeCs = localeCs;
}
```

With "Chinese":

```ts
import { localeZh } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeZh = localeZh;
}
```

With "Croatian":

```ts
import { localeHr } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeHr = localeHr;
}
```

With "Dansk":

```ts
import { localeDa } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeDa = localeDa;
}
```

With "Deutsch":

```ts
import { localeDe } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeDe = localeDe;
}
```

With "English (UK)":

```ts
import { localeEnGB } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeEnGB = localeEnGB;
}
```

With "Español":

```ts
import { localeEs } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeEs = localeEs;
}
```

With "Français":

```ts
import { localeFr } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeFr = localeFr;
}
```

With "Greek":

```ts
import { localeEl } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeEl = localeEl;
}
```

With "Hindi":

```ts
import { localeHi } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeHi = localeHi;
}
```

With "Italiano":

```ts
import { localeIt } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeIt = localeIt;
}
```

With "Japanese":

```ts
import { localeJa } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeJa = localeJa;
}
```

With "Korean":

```ts
import { localeKo } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeKo = localeKo;
}
```

With "Lietuvių":

```ts
import { localeLt } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeLt = localeLt;
}
```

With "Magyar":

```ts
import { localeHu } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeHu = localeHu;
}
```

With "Nederlands":

```ts
import { localeNl } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeNl = localeNl;
}
```

With "Norsk":

```ts
import { localeNo } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeNo = localeNo;
}
```

With "Polski":

```ts
import { localePl } from '@mobiscroll/angular';
                                     
class myComponent {
    public localePl = localePl;
}
```

With "Português Europeu":

```ts
import { localePtPT } from '@mobiscroll/angular';
                                     
class myComponent {
    public localePtPT = localePtPT;
}
```

With "Pt. Brasileiro":

```ts
import { localePtBR } from '@mobiscroll/angular';
                                     
class myComponent {
    public localePtBR = localePtBR;
}
```

With "Română":

```ts
import { localeRo } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeRo = localeRo;
}
```

With "Serbian":

```ts
import { localeSr } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeSr = localeSr;
}
```

With "Slovencina":

```ts
import { localeSk } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeSk = localeSk;
}
```

With "Suomi":

```ts
import { localeFi } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeFi = localeFi;
}
```

With "Svenska":

```ts
import { localeSv } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeSv = localeSv;
}
```

With "Thai":

```ts
import { localeTh } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeTh = localeTh;
}
```

With "Türkçe":

```ts
import { localeTr } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeTr = localeTr;
}
```

With "Ukrainian":

```ts
import { localeUa } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeUa = localeUa;
}
```

With "Vietnamese":

```ts
import { localeVi } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeVi = localeVi;
}
```

With "Русский":

```ts
import { localeRu } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeRu = localeRu;
}
```

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

```ts
import { localeRuUA } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeRuUA = localeRuUA;
}
```

With "עברית":

```ts
import { localeHe } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeHe = localeHe;
}
```

With "فارسی":

```ts
import { localeFa } from '@mobiscroll/angular';
                                     
class myComponent {
    public localeFa = localeFa;
}
```

## API used in this demo

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

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { localeEs, MbscModule, setOptions } from '@mobiscroll/angular';

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

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, MbscModule],
})
export class AppComponent {
  myLocale = localeEs; // Sets the language of the component
}
```

### Template

```html
<mbsc-datepicker [controls]="['calendar']" select="range" display="inline" [locale]="myLocale"></mbsc-datepicker>
```

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

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

   ```
   npm install
   ```

6. Run the project:

   ```
   ng serve
   ```

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

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

## Related demos

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