How To Get Current Date And Time In Vue Js

Websolutionstuff | Jan-14-2022 | Categories : VueJs

In this article, we will see how to get the current date and time in vue js. In vue js very simple to get the current date and time because we can get it using the Date() function. Date() will provide the full date and time with timezone. So, you can also make a better format like yyyy-mm-dd.

In vue js, we are using the new Date() a constructor creates a new date instance that contains the following methods to construct the full date. So, in this example, we will get a current timestamp, get current date, get a current month, get a current year, get a date and time.

So, let's see an example of the current date and time in vue js.

getDate() Function : It returns the day of the month (1-31).

getMonth() Function : It returns the month of a year, where 0 is January and 11 is December.

getFullYear() Function : It returns the year in four-digit format (YYYY).

Example 1

In this example, get the current date and time with the format.

<!DOCTYPE html>
<html>
<head>
    <title>How To Get Current Date And Time In Vue Js - Websolutionstuff</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
   
<div id="app">
    {{ message }}
</div>
  
</body>
  
<script type="text/javascript">
 new Vue({
    el: '#app',
    data: { 
          message:"Welcome, Please Wait...."
      },
      methods:{
        callFunction: function () {
   
            var currentDate = new Date();
            console.log(currentDate);
  
            var currentDateWithFormat = new Date().toJSON().slice(0,10).replace(/-/g,'/');
            console.log(currentDateWithFormat);
     
        }
    },
    mounted () {
      this.callFunction()
    }
 });
    
</script>
</html>

Read Also : Vue Js Sweetalert Modal Notification Tutorial

Example 2

In this example, get the current date in d-m-yyyy format.

<template>
  <div id="app">
    <h1>Get Current Date And Time</h1>
    <p>{{currentDate()}}</p>
  </div>
</template>

<script>
export default {
  methods: {
    currentDate() {
      const current = new Date();
      const date = `${current.getDate()}/${current.getMonth()+1}/${current.getFullYear()}`;
      return date;
    }
  }
};
</script>

Read Also : Vue Js Get Array Of Length Or Object Length

Example 3

In this example, display date using toLocaleString() function.

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

You might also like :