Get current date and time in vue js example. In this tutorial, you will learn with easy code 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.
In vue js, Date() function will provide full date and time with timezone. And this tutorial guide is on how to get format date and time like yyyy-mm-dd HH:mm:ss 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 – 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? - 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 – Get Current Date Time In vue js
This example uses 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.
