How to Get Current Date Time In Vue.js

In this tutorial, we will learn how to get the current date and time in Vue.js using the Date() function. This tutorial will also show you how to format the date and time in different ways.

Date() function/method will provide us full date and time with timezone. And this tutorial also guide on how you can format date and time like yyyy-mm-dd in vue js.

This tutorial will show you 2 examples of how to get current date and time in vue js:

Example 1

This example uses the standard date() method to get the current date-time in vue js:

<!DOCTYPE html>
<html>
<head>
    <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:"Wait......"
      },
      methods:{
        current_dateTime: function () {
   
            var currentDate = new Date();
            console.log(currentDate);
  
            var formatted_date = new Date().toJSON().slice(0,10).replace(/-/g,'/');
            console.log(formatted_date);
     
        }
    },
    mounted () {
      this.current_dateTime()
    }
 });
    
</script>
</html>

The following code will get the current date-time in vue js:

<script type="text/javascript">
 new Vue({
    el: '#app',
    data: { 
          message:"Wait......"
      },
      methods:{
        current_dateTime: function () {
   
            var currentDate = new Date();
            console.log(currentDate);
  
            var formatted_date = new Date().toJSON().slice(0,10).replace(/-/g,'/');
            console.log(formatted_date);
     
        }
    },
    mounted () {
      this.current_dateTime()
    }
 });
    
</script>

Example 2

This example uses the some standard methods to get the current date-time in vue js:

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

The following code will get the current date-time in vue js:

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

In this tutorial, you will learn with easy code that how to get the current date-time in vue js.

#vue #vuejs