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
Recommended:-Vue Js If Else Condition Example
Recommended:-Vue Js For Loop (v-for) Example
Recommended:-Vue JS Ajax Form Submit Tutorial
Recommended:-Vue Js Add Class To Element On Click Tutorial
Recommended:-Laravel 8 Install Vue Tutorial Example
Recommended:-Laravel 8 Vue JS Axios Post Request Tutorial Example
Recommended:-How to Show Flash Message Using Vue JS in Laravel 8
Recommended:-How to Create Laravel 8 Vue JS Like Dislike System
Recommended:-Laravel 8 Vue JS Image/File Upload Tutorial Example