Calendar systems
The date picker supports multiple calendar systems. You can control it with the calendarSystem setting, and it supports the following options:
- Gregorian - it is included by default
- Jalali - it is the default system of the Persian calendar and is included within the Farsi language pack
- Hijri - it is included in the Arabic language pack
Interested in localization? Explore this example →
Demo
Pick a calendar system
<script setup>
import { , } from '@mobiscroll/vue';
</script>
<template>
<MbscDatepicker
:calendarSystem=" "
:locale=" "/>
</template>
SFC JSSFC TS
<script setup>
import {
hijriCalendar,
jalaliCalendar,
localeAr,
localeFa,
MbscDatepicker,
setOptions
} from '@mobiscroll/vue'
setOptions({
theme: ' ',
themeVariant: ' '
})
</script>
<template>
<MbscDatepicker display="inline" :controls="['date']" />
<MbscDatepicker
display="inline"
:controls="['date']"
:calendarSystem="jalaliCalendar"
:locale="localeFa"
/>
<MbscDatepicker
display="inline"
:controls="['date']"
:calendarSystem="hijriCalendar"
:locale="localeAr"
/>
</template>
<script setup lang="ts">
import {
hijriCalendar,
jalaliCalendar,
localeAr,
localeFa,
MbscDatepicker,
setOptions
} from '@mobiscroll/vue'
setOptions({
theme: ' ',
themeVariant: ' '
})
</script>
<template>
<MbscDatepicker display="inline" :controls="['date']" />
<MbscDatepicker
display="inline"
:controls="['date']"
:calendarSystem="jalaliCalendar"
:locale="localeFa"
/>
<MbscDatepicker
display="inline"
:controls="['date']"
:calendarSystem="hijriCalendar"
:locale="localeAr"
/>
</template>