Get Current Date and Time in Vue.js

Published on September 5, 2020 38 sec read

In this article, I’m going to share how to get current date and time in Vue.js application.

Table of Contents

  1. Date() Constructor
  2. Example

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. 🙂

Author

Hey, I'm Md Obydullah. I build open-source projects and write on Laravel, Linux server, modern JavaScript and more on web development.

Follow

Leave a Reply

Your email address will not be published. Required fields are marked *