How to combine moment("from", "now") with timezone in a Vue binding

Question

The data is pulled straight from firebase\firestore into vue\nuxt. This is the biding for the object.

So log.Created is a firebase Timespan, toDate() makes it a Date, then moment from\now turns it into "4 hours ago"

<td class="py-3">{{ log.Created.toDate() | moment("from", "now") }}</td>

Problem is, it wasn't 4 hours ago, it was now, but UTC isn't giving me the timezone offset.

I tried setting the default timezone in a moment plugin

import Vue from 'vue'
import VueMoment from 'vue-moment'
import moment from 'moment-timezone'

moment.tz.setDefault(moment.tz.guess())

Vue.use(
    VueMoment, {
    moment,
})

But I think I may have some lines crossed here...

What's the missing piece of the puzzle?

More debug data

<td class="py-3">
  {{ convertDate(log.Created.toDate()) | moment("from", "now") }}<br/><br/>
  {{ convertDate(log.Created.toDate()) }} <br/><br/>
  {{ log.Created.toDate() }}
</td>

Function:

convertDate: function(date){
  return moment(date).tz(moment.tz.guess());
}

...and output

4 hours ago

Tue Oct 22 2019 17:11:59 GMT-0400

Tue Oct 22 2019 17:11:59 GMT-0400 (Eastern Daylight Time)

It's not entirely clear what you're asking. Firestore's [`toDate()`](https://firebase.google.com/docs/reference/js/firebase.firestore.Timestamp.html#todate) returns a JS `Date` object so any timezone should be irrelevant when passing it to Moment.js to format as a relative period. Where does the `moment` filter that you're using come from? — Phil, Oct 23 '19 at 01:29
Are you 100% sure your timestamps are what you expect? `Tue Oct 22 2019 17:11:59 GMT-0400` **was** about 4 hours ago — Phil, Oct 23 '19 at 01:37
I think you might be right and it's the conversion server side, that explains a lot... Digging into it — Steve McNiven-Scott, Oct 23 '19 at 01:45

score 0 · Answer 1 · answered Oct 23 '19 at 02:18

Issue was the data conversion code from here https://www.hanselman.com/blog/OnTheNightmareThatIsJSONDatesPlusJSONNETAndASPNETWebAPI.aspx

.AddHours(-8) was not correct

Moving to ConvertFromUnixTimestamp on this SO How can I convert a DateTime to the number of seconds since 1970? worked great...

Thanks for the assistance Phil

How to combine moment("from", "now") with timezone in a Vue binding

1 Answers1