VueJS change date format - vue.js

Question

Now VueJS display me date in format 2021-02-24 00:12:42, but how i can change display only 00:12? Without year, month, date and seconds?
In vue i use:
<div class="jhistory" v-for="game in histories" :key="game.game_id">
{{ game.date }}
</div>
<script>
export default {
data() {
return {
histories: {},
}
},
mounted() {
this.$root.isLoading = true
this.getHistory();
},
methods: {
getHistory() {
this.$root.axios.post('/jackpot/history').then(res => {
this.histories = res.data;
this.$root.isLoading = false;
});
}
}
}
</script>

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