Issue using moment timezone in Vue components

I am trying to use moment timezone in my Vue components, I am pretty sure I have both moment and moment timezone installed correctly as I can type

moment().tz('Australia/Sydney').format('YYYY-MM-DD')

etc in the console and it all works fine and i've has no issues with moment.js so far.

I have been using some custom filters to return UTC datetimes from the database and format them to the local user time depending on their timezone and these work fine.

The issue comes when trying to use moment timezone in the data e.g:

data: function () {
            return {
                startDate: moment().tz(user.timezone).subtract(29, 'days').format('YYYY-MM-DD'),
                endDate: moment().tz(user.timezone).format('YYYY-MM-DD')
}

Both of these work when I type them into the console but not when inside the component, it keeps producing the error moment(...).tz is not a function.

The strange thing is that the below works fine with no errors if I remove the .tz()

data: function () {
            return {
                startDate: moment().subtract(29, 'days').format('YYYY-MM-DD'),
                endDate: moment().format('YYYY-MM-DD')
}

I think the issue is that the document is not ready when the startDate and endDate are declared and so doesn't recognise the function.

How can I make sure that moment timezone is loaded before the data is declared?

I am using laravel spark if that makes any difference.

Thanks

willbrowning

9 years ago

Best Answer

Level 4

I found a solution to this by adding:

window.moment.tz = require('moment-timezone/builds/moment-timezone-with-data.min');

right below

window.moment = require('moment');

at the top of

vendor/laravel/spark/resources/assets/js/spark-bootstrap.js

and then running gulp.

1 like

EventFellows

8 years ago

Level 16

I tried your solution but did not get it to work: Error always was "Uncaught TypeError: window.moment.tz.guess is not a function"

Here is what worked in my setup for future reference for others:

window.moment = require('moment-timezone/builds/moment-timezone-with-data');

I have put it in behind the require('spark-bootstrap'); in the app.js file and ran gulp

Please or to participate in this conversation.