In this article, I’m going to share how to get current date and time in Vue.js application.
Table of Contents
Date() Constructor
The Date()
constructor returns a new Date
object that represents the current date and time. Let’s have a look at some methods of the Date object:
Method | Description |
---|---|
getFullYear() | Year as a four digit number (yyyy) |
getMonth() | Month as a number (0-11) |
getDate() | Day as a number (1-31) |
getHours() | Hour (0-23) |
getMinutes() | Minute (0-59) |
getSeconds() | Second (0-59) |
getMilliseconds() | Millisecond (0-999) |
getTime() | The time (milliseconds since January 1, 1970) |
getDay() | Weekday as a number (0-6) |
Example
Have a look at an example:
<template>
<div id="app">
<p>Current Date & Time: {{currentDateTime()}}</p>
</div>
</template>
<script>
export default {
methods: {
currentDateTime() {
const current = new Date();
const date = current.getFullYear()+'-'+(current.getMonth()+1)+'-'+current.getDate();
const time = current.getHours() + ":" + current.getMinutes() + ":" + current.getSeconds();
const dateTime = date +' '+ time;
return dateTime;
}
}
};
</script>
That’s it. Thanks for reading. 🙂