Get Current Date and Time in Vue.js
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.
Md Obydullah
Software Engineer | Ethical Hacker & Cybersecurity...
Md Obydullah is a software engineer and full stack developer specialist at Laravel, Django, Vue.js, Node.js, Android, Linux Server, and Ethichal Hacking.