How to add current date to input type date in Vue.js

In this tutorial, you’ll learn how to add today’s date to HTML <input type="date"> in Vue.js and JavaScript.

As you know HTML has different <input> types:

button
checkbox
color
date
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week

By default, browsers show dd/mm/yyyy as a placeholder. If you want to change the default value to the current date and show the current date as a placeholder you can do it this way.

Vue.js/HTML example

<div id="app">
  <input type="date" v-model="date">
</div>

new Vue({
  el: "#app",
  data: {
    date: new Date().toISOString().substr(0, 10) // 05/09/2019
  }
})

Now we’re using the current date as a default value for input type date.

JavaScript/HTML example

You can do the same in JavaScript/HTML

<input type="date" class="today">

<script>
let today = new Date().toISOString().substr(0, 10);
document.querySelector(".today").value = today;
</script>

If you find this post useful, please let me know in the comments below and subscribe to my newsletter. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/vue-js-input-date

PS: Make sure you check other Vue.js tutorials, e.g. how to password protect your website in Vue.js, how to watch props in Vue.js, how to deploy Vue.js app to Firebase hosting.

Incoming search terms: