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.