在HTML - value中防止将来的日期

Question

我需要在HTML模板中防止将来的日期。将选取的日期值转发给Vue进行进一步分析。代码如下:

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

我需要找到一个解决方案，可能使用vue.js或Javascript。非常感谢你的帮助!

Answer 1

您可以使用max属性来实现这一点:

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

您可以使用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>

用户可以绕过这个，所以在使用它之前一定要验证它。

Answer 2

您可以定义变量来保存数据对象中的当前日期，然后将其设置为最大值:

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>