Timezones
The date picker works with local times by default, but ships with support for changing the timezone. The conversions and correct output relies on either of these three external libraries: luxon, moment-timezone and day.js. For installing and using these libraries check out this guide.
There are two angles regarding timezones:
dataTimezone- the datepicker expects this format and returns this format. It is'local'by default if the date-times don't contain any timezone informationdisplayTimezone- the datepicker displays everything in this timezone. The date-times will be converted from thedataTimezoneand displayed accordingly. It is'local'by default
Invalid date-times will be interpreted in dataTimezone when they contain no timezone info and will be shown in displayTimezone on the wheels.
Demo
Data timezone is
Display timezone is
The local timezone your browser is in:
<script setup>
import { dayjsTimezone } from '@mobiscroll/vue';
import dayjs from 'dayjs';
import timezone from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';
// Extend Day.js with UTC and timezone plugins
dayjs.extend(utc);
dayjs.extend(timezone);
// Setup Mobiscroll Day.js plugin
dayjsTimezone.dayjs = dayjs;
const selected = ref()
</script>
<template>
<MbscDatepicker
dataTimezone="utc"
displayTimezone="local "
:controls="['datetime']"
:timezonePlugin="dayjsTimezone"
v-model="selected"
>
</MbscDatepicker>
</template>
Selected date & time is returned in "Data timezone"
<script setup>
import { dayjsTimezone, MbscDatepicker, setOptions } from '@mobiscroll/vue'
import dayjs from 'dayjs'
import timezone from 'dayjs/plugin/timezone'
import utc from 'dayjs/plugin/utc'
import { ref } from 'vue'
dayjs.extend(utc)
dayjs.extend(timezone)
dayjsTimezone.dayjs = dayjs
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const selected = ref()
</script>
<template>
<MbscDatepicker
:controls="['datetime']"
:timezonePlugin="dayjsTimezone"
v-model="selected"
dataTimezone="utc"
displayTimezone="local"
label="Select Date & Time in Display Timezone"
inputStyle="outline"
labelStyle="stacked"
/>
<div class="mbsc-padding">
<p v-if="selected">
Selected date is returned in Data Timezone<br />
<code>{{ selected }}</code>
</p>
</div>
</template>
<script setup lang="ts">
import { dayjsTimezone, MbscDatepicker, setOptions } from '@mobiscroll/vue'
import dayjs from 'dayjs'
import timezone from 'dayjs/plugin/timezone'
import utc from 'dayjs/plugin/utc'
import { ref } from 'vue'
dayjs.extend(utc)
dayjs.extend(timezone)
dayjsTimezone.dayjs = dayjs
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const selected = ref<any>(null)
</script>
<template>
<MbscDatepicker
:controls="['datetime']"
:timezonePlugin="dayjsTimezone"
v-model="selected"
dataTimezone="utc"
displayTimezone="local"
label="Select Date & Time in Display Timezone"
inputStyle="outline"
labelStyle="stacked"
/>
<div class="mbsc-padding">
<p v-if="selected">
Selected date is returned in Data Timezone<br />
<code>{{ selected }}</code>
</p>
</div>
</template>