---
title: "Angular Date & Time Localization Example | Mobiscroll"
component: "Date & Time"
framework: "Angular"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/angular/datetime/localization"
---

# Localization - Angular Date & Time demo

Angular Date & time picker localization example supporting 37 languages, date, time formats with full RTL capability.

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

```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
- [`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]="['date']" display="inline" [locale]="myLocale"></mbsc-datepicker>
```

## 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-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: [Calendar systems](https://demo.mobiscroll.com/angular/datetime/gregorian-jalali-hijri.md) - Angular Date & time supporting calendar systems: Gregorian, Hijri and Jalali along with different languages and cultures.
- Next: [RTL mode](https://demo.mobiscroll.com/angular/datetime/rtl-right-to-left.md) - Angular datetime picker with RTL support. Manual control and built-in right to left languages: Arabic, Hebrew, Farsi.