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
Carbon Add Years To Date In Laravel 9
Carbon Add Years To Date In La...

In this article, we will see carbon add years to date in laravel 9. Carbon provides addYear() and addYears() functi...

Read More

Nov-21-2022

Laravel 8 cURL HTTP Request Example
Laravel 8 cURL HTTP Request Ex...

Hello Friends, Today we will see how to make cURL HTTPs request in your laravel 8 application. This tu...

Read More

Apr-28-2021

How To Get Current Date And Time In Node.js
How To Get Current Date And Ti...

In this example we will see how to get current date and time in Node.js application. In Node.js date and time are handle...

Read More

Sep-01-2021

Angular 13 Crop Image Before Upload With Preview
Angular 13 Crop Image Before U...

In this article, we will see the angular 13 crop image before uploading with a preview. we will give you a sim...

Read More

May-10-2022