Vue学习-处理开始日期不能大于结束日期,结束日期不能小于开始日期
Form-item label="开始年-月" prop="startDate"><DatePickertype="month"format="yyyy-MM"v-model="searchForm.startDate"style="width: 200px":options="startOptions"></DatePicker></Form-item>
·
Form-item label="开始年-月" prop="startDate">
<DatePicker
type="month"
format="yyyy-MM"
v-model="searchForm.startDate"
style="width: 200px"
:options="startOptions"
></DatePicker>
</Form-item>
<Form-item label="结束年-月" prop="endDate">
<DatePicker
type="month"
format="yyyy-MM"
v-model="searchForm.endDate"
style="width: 200px"
:options="endOptions"
></DatePicker>
</Form-item>
data() {
return {
tableHeaders:[],
searchForm:{
startDate: "",
endDate: ""
},
startOptions:{
// 指定终止日期 这里指定开始年月不能大于当前年月,可根据需求修改
disabledDate: (date) => {
let data = this.searchForm.endDate == '' ? Date.now() : this.searchForm.endDate
// 不能选择大于当前年月或大于结束年月
return date > data
}
},
endOptions: {
// 指定终止日期
disabledDate: (date) => {
let data = this.searchForm.startDate == '' ? '' : this.searchForm.startDate
// 不能选择小于开始年月日期,若开始年月为空则没有限制
return date<data
}
},
}
},
更多推荐
已为社区贡献4条内容
所有评论(0)