Vue Js – Get Current Date and Time Example

Vue Js – Get Current Date and Time Example

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.

Note that, In every vue app get current date and time in vuejs is a common matter. It is a very easy to get the current date time in vue js cause, this tutorial will help you to get current date and time in vue js app using Date() function.

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

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>
    <title>How to get current date time in vue js? - Tutsmake.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

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

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Vue JS, Angular JS, React Js, WordPress, and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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