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>

 

 

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>

 

 

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 :

Recommended Post
Featured Post
How To Downgrade PHP 8 to 7.4 in Ubuntu
How To Downgrade PHP 8 to 7.4...

As a web developer, I understand the significance of embracing the latest technologies to stay ahead in the dynamic worl...

Read More

Aug-04-2023

Laravel 9 whereDate And whereMonth Query Example
Laravel 9 whereDate And whereM...

In this article, we will see laravel 9 wheredate() and wheremonth() query examples. The whereDate me...

Read More

Oct-19-2022

Laravel 10 AJAX Form Validation Example
Laravel 10 AJAX Form Validatio...

In this article, we will see how to validate the ajax form in laravel 10. Here we will learn about the laravel 10 a...

Read More

Mar-24-2023

How To Fix cURL Error 60 SSL Certificate Problem
How To Fix cURL Error 60 SSL C...

In this example we see how to fix cURL error 60 SSL certificate problem. cURL error 60: SSL certificate proble...

Read More

Dec-08-2021