Prevent future dates in HTML - vue

Issue

I need to prevent future dates in an HTML template. The date picked date value is forwarded to Vue to be further analyzed. Here is the code.

   <div class="container text-center justify-content-center container-user">
        <h1 class="text-center">Ciao <span v-model="user_name">{{username}}</span></h1>
        <br>
        <h2 >
            Seleziona la data: [[date.day]] 
        </h2>
        <br>
        <form @submit.prevent="getUpdates">
            <input type="date" v-model="date.day" class="disableFuturedate"/>

            <button class="btn btn-primary" type="submit">Seleziona</button>
        </form>
    </div>

I need to find a solution using possibly vue.js or Javascript. Thank you really much for your help!

Solution

You can define variable to hold current date in data object, then set it as max value:

new Vue({
  el: "#app",
  data() {
    return {
      username: 'Amico',
      date: {day: ''},
      maxDate: new Date().toISOString().split('T')[0]
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="container text-center justify-content-center container-user">
    <h1 class="text-center">Ciao <span>{{username}}</span></h1>
    <h2 >
        Seleziona la data: {{date.day}} 
    </h2>
    <form @submit.prevent="getUpdates">
      <input type="date" v-model="date.day" :max="maxDate" class="disableFuturedate"/>
      <button class="btn btn-primary" type="submit">Seleziona</button>
    </form>
  </div>
</div>

Answered By - Nikola Pavicevic