本文共 4858 字，大约阅读时间需要 16 分钟。
开始时间不能大于结束时间 结束时间不能小于开始时间
template中 时间：<DatePicker type="date" placement="bottom-end" placeholder="时间筛选" style="width: 100px" v-model="startTime" :options="startOption" ></DatePicker> 至 <DatePicker type="date" placement="bottom-end" placeholder="时间筛选" style="width: 100px" :options="endOption" v-model="endTime" ></DatePicker> script中 export default{ data(){ return{ startOption: { },//开始时间绑定配置 endOption: { },//结束时间绑定配置 startTime:'',//开始时间 endTime:'',//结束时间 } }, watch: { startTime() { let self = this; this.endOption = { disabledDate(date) { if (self.startTime) { return date && date.valueOf() < self.startTime; } }, }; }, endTime() { let self = this; this.startOption = { disabledDate(date) { if (self.endTime) { return date && date.valueOf() > self.endTime; } }, }; }, }, }.固定时间之前的日期不能选（以及限制开始时间与结束时间）
data(){ return{ endOption: { disabledDate(date) { return date && date.valueOf() < new Date("2020-12-09"); }, }, startOption: { disabledDate(date) { return date && date.valueOf() < new Date("2020-12-09"); }, }, }},watch: { "startTime"() { let self = this; this.endOption = { disabledDate(date) { if (self.startTime) { return date && date.valueOf() < self.startTime; } } }; }, "endTime"() { let self = this; this.startOption = { disabledDate(date) { if (self.endTime) { return date && (self.endTime < date || new Date("2020-12-09") > date) ; } } }; } },这里限制的2020-12-09之前的日期不能选择，并且在选择开始时间与结束时间也需要相互限制。当选择结束时间之后 开始时间可选就为区间。选开始日期与结束日期之间选择时间
template 时间：<DatePicker type="date" placement="bottom-end" placeholder="时间筛选" style="width: 100px" v-model="startTime" :options="startOption" ></DatePicker> 至 <DatePicker type="date" placement="bottom-end" placeholder="时间筛选" style="width: 100px" :options="endOption" v-model="endTime" ></DatePicker> <DatePicker type="datetime" placement="bottom-end" placeholder="时间筛选" style="width: 100px" :options="datetimeOption" v-model="datetime1" ></DatePicker> script中 export default{ data(){ return{ startOption: { },//开始时间绑定配置 endOption: { },//结束时间绑定配置 startTime:'',//开始时间 endTime:'',//结束时间 } }, watch: { startTime() { let self = this; this.endOption = { disabledDate(date) { if (self.startTime) { return date && date.valueOf() < self.startTime; } }, }; this.datetimeOption = { disabledDate(date) { if (self.endTime && self.startTime) { return ( date && (date.valueOf() > self.endTime || date.valueOf() < self.startTime) ); } }, }; }, endTime() { let self = this; this.startOption = { disabledDate(date) { if (self.endTime) { return date && date.valueOf() > self.endTime; } }, }; this.datetimeOption = { disabledDate(date) { if (self.endTime && self.startTime) { return ( date && (date.valueOf() > self.endTime || date.valueOf() < self.startTime) ); } }, }; }, }, }转载地址：http://wfij.baihongyu.com/