---
title: "Vue Date & Time Localization Example | Mobiscroll"
component: "Date & Time"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/datetime/localization"
---

# Localization - Vue Date & Time demo

Vue Date & time picker localization example supporting 37 languages, date, time formats with full RTL capability. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/datetime/localization)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/datepicker/datetime/localization)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/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), [Angular](https://demo.mobiscroll.com/angular/datetime/localization.md), [React](https://demo.mobiscroll.com/react/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/vue/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`

```vue
<template>
  <MbscDatepicker :locale="localeEn" />
</template>
```

With "Arabic":

```vue
<template>
  <MbscDatepicker :locale="localeAr" />
</template>
```

With "Bulgarian":

```vue
<template>
  <MbscDatepicker :locale="localeBg" />
</template>
```

With "Català":

```vue
<template>
  <MbscDatepicker :locale="localeCa" />
</template>
```

With "Cestina":

```vue
<template>
  <MbscDatepicker :locale="localeCs" />
</template>
```

With "Chinese":

```vue
<template>
  <MbscDatepicker :locale="localeZh" />
</template>
```

With "Croatian":

```vue
<template>
  <MbscDatepicker :locale="localeHr" />
</template>
```

With "Dansk":

```vue
<template>
  <MbscDatepicker :locale="localeDa" />
</template>
```

With "Deutsch":

```vue
<template>
  <MbscDatepicker :locale="localeDe" />
</template>
```

With "English (UK)":

```vue
<template>
  <MbscDatepicker :locale="localeEnGB" />
</template>
```

With "Español":

```vue
<template>
  <MbscDatepicker :locale="localeEs" />
</template>
```

With "Français":

```vue
<template>
  <MbscDatepicker :locale="localeFr" />
</template>
```

With "Greek":

```vue
<template>
  <MbscDatepicker :locale="localeEl" />
</template>
```

With "Hindi":

```vue
<template>
  <MbscDatepicker :locale="localeHi" />
</template>
```

With "Italiano":

```vue
<template>
  <MbscDatepicker :locale="localeIt" />
</template>
```

With "Japanese":

```vue
<template>
  <MbscDatepicker :locale="localeJa" />
</template>
```

With "Korean":

```vue
<template>
  <MbscDatepicker :locale="localeKo" />
</template>
```

With "Lietuvių":

```vue
<template>
  <MbscDatepicker :locale="localeLt" />
</template>
```

With "Magyar":

```vue
<template>
  <MbscDatepicker :locale="localeHu" />
</template>
```

With "Nederlands":

```vue
<template>
  <MbscDatepicker :locale="localeNl" />
</template>
```

With "Norsk":

```vue
<template>
  <MbscDatepicker :locale="localeNo" />
</template>
```

With "Polski":

```vue
<template>
  <MbscDatepicker :locale="localePl" />
</template>
```

With "Português Europeu":

```vue
<template>
  <MbscDatepicker :locale="localePtPT" />
</template>
```

With "Pt. Brasileiro":

```vue
<template>
  <MbscDatepicker :locale="localePtBR" />
</template>
```

With "Română":

```vue
<template>
  <MbscDatepicker :locale="localeRo" />
</template>
```

With "Serbian":

```vue
<template>
  <MbscDatepicker :locale="localeSr" />
</template>
```

With "Slovencina":

```vue
<template>
  <MbscDatepicker :locale="localeSk" />
</template>
```

With "Suomi":

```vue
<template>
  <MbscDatepicker :locale="localeFi" />
</template>
```

With "Svenska":

```vue
<template>
  <MbscDatepicker :locale="localeSv" />
</template>
```

With "Thai":

```vue
<template>
  <MbscDatepicker :locale="localeTh" />
</template>
```

With "Türkçe":

```vue
<template>
  <MbscDatepicker :locale="localeTr" />
</template>
```

With "Ukrainian":

```vue
<template>
  <MbscDatepicker :locale="localeUa" />
</template>
```

With "Vietnamese":

```vue
<template>
  <MbscDatepicker :locale="localeVi" />
</template>
```

With "Русский":

```vue
<template>
  <MbscDatepicker :locale="localeRu" />
</template>
```

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

```vue
<template>
  <MbscDatepicker :locale="localeRuUA" />
</template>
```

With "עברית":

```vue
<template>
  <MbscDatepicker :locale="localeHe" />
</template>
```

With "فارسی":

```vue
<template>
  <MbscDatepicker :locale="localeFa" />
</template>
```

## API used in this demo

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

## Code

### SFC JS

```vue
<script setup>
import { localeEs, MbscDatepicker, setOptions } from '@mobiscroll/vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})
</script>

<template>
  <MbscDatepicker :locale="localeEs" :controls="['date']" display="inline" />
</template>
```

### SFC TS

```vue
<script setup lang="ts">
import { localeEs, MbscDatepicker, setOptions } from '@mobiscroll/vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})
</script>

<template>
  <MbscDatepicker :locale="localeEs" :controls="['date']" display="inline" />
</template>
```

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

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

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

## Related demos

- Previous: [Calendar systems](https://demo.mobiscroll.com/vue/datetime/gregorian-jalali-hijri.md) - Vue Date & time supporting calendar systems: Gregorian, Hijri and Jalali along with different languages and cultures.
- Next: [RTL mode](https://demo.mobiscroll.com/vue/datetime/rtl-right-to-left.md) - Vue datetime picker with RTL support. Manual control and built-in right to left languages: Arabic, Hebrew, Farsi.