Yahoo
Yahoo

Reputation: 568

Vue display date only from dateTime

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

Answers (1)

Phil
Phil

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

Related Questions