Vue Js Get Current Date and Time

Get current date and time in vue js; Through this tutorial, you will learn how to get the current date-time in vue js.

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.

How to Get Current Date Time In vue js

  • Example 1 – Get Current Date Time In vue js
  • Example 2 – Get Current Date Time In vue js

Example 1 – Get Current Date Time In vue js

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

<!DOCTYPE html>
<html>
<head>
    <title>How to get current date time in vue js? - laratutorials.com</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:"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- Get Current Date Time In vue js

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>

Conclusion

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

Recommended VUE JS Tutorials

Leave a Comment