How do I use vue-datetime with timezones?

Question

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.

Felipe Maia · Accepted Answer · 2019-09-27 18:45:20Z

0

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

edited Sep 27, 2019 at 18:45

answered Sep 27, 2019 at 18:24

Felipe Maia

1014 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Felipe Maia Over a year ago

moment().tz() I think there is no such method

Peter Pointer · Accepted Answer · 2020-04-08 14:32:00Z

0

.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/

answered Apr 8, 2020 at 14:32

Peter Pointer

4,2212 gold badges21 silver badges40 bronze badges

Collectives™ on Stack Overflow

How do I use vue-datetime with timezones?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related