onClick() display formatted time, Reactive, Vue.js and Firebase DB - firebase

Question

Long time browser, first time questioner.
So for an in and out board I need employees to click the "out button" and with a Vue.js v-on:click() next to it I want to to display "Out at 3:55pm".
Here is the button -
<button class="btn btn-smaller btn-out" v-show="user.in" v-on:click="updateOut(user)">out</button>
Which in turn updates the usersRef timeOut status in the Firebase DB like this -
updateOut: function (user) {usersRef.child(user['.key']).child('in').set(false)
usersRef.child(user['.key']).child('timeOut').set(Date())
},
Which updates this with the actual date stamp -
{{ user.timeOut }}
The problem I am getting is that I can not format this inside the updateOut function to simply show "out at 3:55pm". I can only get it to show "Wed Mar 29 2017 10:55:02 GMT-0600 (MDT)"
Srinivas - I can't get this to work. I tried this -
methods: {
addUser: function () {
if (this.newUserName) {
usersRef.push({
name: this.newUserName,
in: false,
returnTime: ''
})
this.newUserName = ''
},
},
getTime: function(user) {
const outTime = new Date(this.user.timeOut)
const hours = outTime.getHours()
let minutes = outTime.getMinutes()
if (minutes < 10) minutes = "0" + minutes // prepend 0
return (hours + ":" + minutes)
},
updateReturnTime: function (user, newText) {
usersRef.child(user['.key']).child('returnTime').set(newText)
},
updateIn: function (user) {
usersRef.child(user['.key']).child('in').set(true)
usersRef.child(user['.key']).child('timeOut').set('')
},
updateOut: function (user) {
usersRef.child(user['.key']).child('in').set(false)
usersRef.child(user['.key']).child('timeOut').set(Date.now())
},

Answer 1

You can create a method to convert date into required format.
methods: {
getTime() {
const outTime = new Date(this.user.timeOut)
const hours = outTime.getHours()
let minutes = outTime.getMinutes()
if (minutes < 10) minutes = "0" + minutes // prepend 0
return (hours + ":" + minutes)
}
}
If you are using this method in multiple places, you can create a filter.
Vue.filter('getTime', function(date) {
const outTime = new Date(date)
const hours = outTime.getHours()
let minutes = outTime.getMinutes()
if (minutes < 10) minutes = "0" + minutes // prepend 0
return (hours + ":" + minutes)
})
You can use it template like this.
{{ user.timeOut | getTime }}