Prevent future dates in HTML - vue

user_11233731 0
Viewed 171

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!

vuejs2 vue.js html javascript
2 Answers

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.

user_165847780

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>

user_119891890
Related