DEV Community

Techsolutionstuff
Techsolutionstuff

Posted on • Originally published at techsolutionstuff.com

Vue JS Get Current Date And Time

In this article, we will see Vue js get the current date and time. 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 the 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 the current date, get the current month, get the current year, and get a date and time.

So, let's see an example of the Vue js get current timestamp.

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 get the current time with the format.

<!DOCTYPE html>
<html>
<head>
    <title>Vue JS Get Current Date And Time - Techsolutionstuff</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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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()
  }
})
Enter fullscreen mode Exit fullscreen mode

Top comments (0)