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