Vue, dayjs wrong output on template

Question

In the console log, I have 15:14, but in the template, I got 12:14. Why?

<template>
    <span>{{ date }}</span> <!-- **expected** Thu, 25 Feb 2021 15:14:04 Thu, **got** 25 Feb 2021 12:14:04 GMT -->
</template>

<script>
export default {
  computed: {
    date() {
      const date = getStatusDate(); // returns string 2021-02-25 15:14:04
      return dayjs(date, 'YYYY-MM-DD HH:mm:ss+z')
    }
  }
}
</script>

it is converting the timezone also. the solution could be getStatusDate return a datetime format that also informs the timezone or you do the time shifting manually. — Eduardo Sousa, Feb 25 '21 at 13:01
how can i change it manually if idk user timezone? Any advice? — elsestatementcheckdasko, Feb 25 '21 at 13:15
new Date().getTimezoneOffset() gets the timezone offset in minutes. let me know if this works so I can post the answer. — Eduardo Sousa, Feb 25 '21 at 13:16

score 0 · Accepted Answer · answered Feb 25 '21 at 19:59

Since the input date string has no timezone specified, the underlying Date object in dayjs assumes local timezone. The template's string interpolation leads to dayjs().toString(), which uses Date.prototype.toUTCString(), causing the display of different times.

The solution is to use dayjs().format() to control the format of the output string:

dayjs(date, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')

const getStatusDate = () => '2021-02-25 15:14:04'

new Vue({
  el: '#app',
  computed: {
    date() {
      const date = getStatusDate()
      return dayjs(date, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss')
    }
  }
})

<script src="https://unpkg.com/vue@2.6.12"></script>
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>

<div id="app">
  <p>{{ date }}</p>
</div>

Vue, dayjs wrong output on template

1 Answers1