Check user timezone and transform it to UTC - Vuejs

Viewed 325

// 2019-10-25 08:15:00 == UTC

// 2019-10-25 08:15:00 == Check users timezone and transform to UTC

// 2019-10-25 08:15:00 == if !== UTC transform to current timezone

// after transform 2019-10-25 10:15:00 ===> example +2

Check users timezone and transform it to UTC, if its !=, after the transform add the difference

Currently what i have done is taking the current dateTime from the user and i have an endDate that will be received from backend and showing the difference as a countdown

<template>
  <div class="m-countdown">
    <h3 class="m-countdown__title">
      {{ text }}
    </h3>
    <div class="m-countdown__interval">
      <div class="m-countdown__interval-block">
        <h3 class="m-countdown__interval-digit">
          {{ days | two_digits }}
        </h3>
        <p class="m-countdown__text">
          Days
        </p>
      </div>
      <div class="m-countdown__interval-block">
        <h3 class="m-countdown__interval-digit">
          {{ hours | two_digits }}
        </h3>
        <p class="m-countdown__text">
          Hours
        </p>
      </div>
      <div class="m-countdown__interval-block">
        <h3 class="m-countdown__interval-digit">
          {{ minutes | two_digits }}
        </h3>
        <p class="m-countdown__text">
          Minutes
        </p>
      </div>
      <div class="m-countdown__interval-block">
        <h3 class="m-countdown__interval-digit">
          {{ seconds | two_digits }}
        </h3>
        <p class="m-countdown__text">
          Seconds
        </p>
      </div>
    </div>
  </div>
</template>

And this is my javascript part

export default {
  name: 'Countdown',
  props: {
    date: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      now: Math.trunc((new Date()).getTime() / 1000),
    }
  },
  computed: {
    dateInMilliseconds () {
      return Math.trunc(Date.parse(this.date) / 1000)
    },
    seconds () {
      return (this.dateInMilliseconds - this.now) % 60
    },
    minutes () {
      return Math.trunc((this.dateInMilliseconds - this.now) / 60) % 60
    },
    hours () {
      return Math.trunc((this.dateInMilliseconds - this.now) / 60 / 60) % 24
    },
    days () {
      return Math.trunc((this.dateInMilliseconds - this.now) / 60 / 60 / 24)
    }
  },
  mounted () {
    window.setInterval(() => {
      this.now = Math.trunc((new Date()).getTime() / 1000)
    }, 1000)
  }
}

Vue.filter('two_digits', (value) => {
  if (value < 0) {
    return '00'
  }
  if (value.toString().length <= 1) {
    return `0${value}`
  }
  return value
})

The prop "date" is a string received from BE ( 2019-10-25 08:15:00 ).

I need this specifically so my countdown to be more correct on different timezone

0 Answers
Related