'How do I use vue-datetime with timezones?

I am using this component called vue-datetime and I am hoping someone has used the same use case as me.

I am trying to put a max-date based on any timezone a user's "assets" are in. I am using moment to get timezone dates.

<datetime
    v-model="date"
    zone="Asia/Tokyo"
    value-zone="Asia/Tokyo"
    :max-datetime="dateNow">
</datetime>

I am passing date and dateNow as

moment().tz('Asia/Tokyo').format()

which is as ISO 8601 string and these dates are right (it returns the local time in Tokyo). However, when I open the day picker, May 25 is disabled even though it is currently May 25 2:45 am in Tokyo.

vue.jsmomentjs


Solution 1:[1]

Set the default local zone for the country/city you want

Install luxon if not installed:

npm install --save luxon

Then

import moment from 'moment';
import { Settings } from 'luxon'
...
//set to display dates for English language
Settings.defaultLocale = 'en'

image with the setting used

Solution 2:[2]

.tz() is only available if you also install the moment-timezone package.

Example using npm (for others, see https://momentjs.com/timezone/):

npm install moment-timezone --save

Initialization example:

import VueMoment from "vue-moment";
import moment from "moment-timezone";

moment.tz.guess();
Vue.use(VueMoment, { moment });

Documentation: https://momentjs.com/timezone/docs/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Peter Krebs

Related Questions