[Vuejs]-VueJS change date format

by

1👍

✅

One way to do this is to create a component method that converts the string into a Date object, uses Date.prototype.toTimeString(), and takes only the first 5 characters, which contains only the hh:mm portion. Another simpler way is to just extract the substring with String.prototype.substr(), assuming the format never changes.

export default {
  methods: {
    toTime(date) {
      // Option 1
      return new Date(date).toTimeString().substr(0,5)

      // Option 2
      return date.substr(11,5)
    }
  }
}

Then use the method in your template:

{{ toTime(game.date) }}

new Vue({
  el: '#app',
  data: () => ({
    game: {
      date: '2021-02-24 00:12:42'
    }
  }),
  methods: {
    toTime(date) {
      return new Date(date).toTimeString().substr(0,5)
      // OR
      // return date.substr(11,5)
    }
  }
})
<script src="https://unpkg.com/vue@2.6.12"></script>

<div id="app">
  <p>{{ toTime(game.date) }}</p>
</div>

Leave a comment