Prevent future dates in HTML - vue

Question

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!

Answer 1

You can use the max attribute to achieve this:

<input type="date" v-model="date.day" max="2021-09-05" />

You can set that to be today using JavaScript:

<input type="date" v-model="date.day" id="datePicker" />
<script>

  function formatToday() {
      let today = new Date();
      let year = today.getFullYear();
      let month = ('0' + (today.getMonth() + 1)).slice(-2);
      let day = ('0' + today.getDate()).slice(-2); 
      return year + '-' + month + '-' + day;
  }
  
  document
    .getElementById("datePicker")
    .setAttribute("max", formatToday());

</script>

Users can bypass this, so make sure to verify it before using it.