Reputation: 568
I am using moment.js
to format date/time on Vue. DateTime value on object is 2020-05-20 T 06:00:00.000 Z
format. Is there a way to reduce one hour from that time and display only time using moment.js
?
View
<div id="app">
<h2>How to deduct 1 hour and display only time rather than dateTime</h2>
<ol>
<li v-for="todo in todos">
{{todo.dateTime}} /** its suppose to reduce one hour and display only time **/
</li>
</ol>
</div>
SCRIPT
new Vue({
el: "#app",
data: {
todos: [
{ id:'1', dateTime: "2020-05-20T06:00:00.000Z"},
{ id:'2', dateTime: "2020-05-20T010:00:00.000Z"},
]
},
methods: {
}
})
Below is my code on jsfiddle:
https://jsfiddle.net/ujjumaki/e5mrz34k/7/
Upvotes: 1
Views: 3048
Reputation: 164766
You could always make some filters to do the time manipulation and formatting.
For example...
new Vue({
el: "#app",
data: {
todos: [
{ id:'1', dateTime: "2020-05-20T06:00:00.000Z"},
{ id:'2', dateTime: "2020-05-20T10:00:00.000Z"},
]
},
filters: {
dtSubtract (dt, duration, unit) {
return moment.utc(dt).subtract(duration, unit)
},
dtFormat (dt, format) {
return moment.utc(dt).format(format)
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js" integrity="sha256-5oApc/wMda1ntIEK4qoWJ4YItnV4fBHMwywunj8gPqc=" crossorigin="anonymous"></script>
<div id="app">
<h2>How to deduct 1 hour and display only time rather than dateTime</h2>
<ol>
<li v-for="todo in todos">
<em>
{{ todo.dateTime | dtFormat('HH:mm:ss') }}
</em>
becomes
<strong>
{{ todo.dateTime | dtSubtract(1, 'hour') | dtFormat('HH:mm:ss') }}
</strong>
</li>
</ol>
</div>
Upvotes: 1