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!
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.
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>