本文介绍如何在Iview框架中使用DatePicker组件，通过配置options4中的disabledDate函数，实现禁用当前月份之前的历史日期，仅允许用户选择当前月份及未来的时间。
Iview DatePicker 实现禁用历史月份并允许选择下月
HTML 结构代码
<DatePicker type="month" :options="options4" :value="dialogForm.estimatedStartTimeWithCreate" @on-change="monthTime($event, 'loadDateStart')" placeholder="请选择时间" class="itemMonth" style="width: 210px"></DatePicker>JavaScript 逻辑代码
data() {
return {
dialogForm: {
estimatedStartTimeWithCreate: '', // 绑定的日期值
},
options4: {
disabledDate(date) {
const disabledDay = new Date()
return date && date.valueOf() < disabledDay.setMonth(disabledDay.getMonth() - 1)
}
}
}
},
methods: {
monthTime(val) {
console.log('monthTime:', val)
this.dialogForm.estimatedStartTimeWithCreate = val
}
}至此关于 Iview DatePicker 限制仅可选当前月及未来月份的介绍结束，更多相关 Iview DatePicker 仅允许选择当前月份内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！