祝大家过节不加班哦 ~
直接展示我根据官网的picker-options的用法写的一年内日期可用,其他禁用的代码
因为是封装,pickerOptions不能写在return里,所以我是在data里定义的,html部分就不展示了,其实和官网el-date-picker的组件大致相同,:picker-options="pickerOptions" 以及 :default-time="['00:00:00', '23:59:59']" 都是在封装里写的
data() {
var pickerOptions = {
disabledDate(time) {
const startDate = new Date()
const endDate = new Date()
startDate.setFullYear(endDate.getFullYear() - 1)
return time.getTime() < startDate || time.getTime() > endDate
}
}
}
写好后发现,其他都正常,但是选择当天的时候,虽然不是禁用状态,但点击无效
在网络大佬那里得到了原因,pickerOptions里,我定义的endDate最大值是此刻,也就是点击时的时分秒,但同时,当点击当日时,default-time默认结束时间是当日的'23:59:59',导致选择的结束时间大于endDate规定的时间(虽然前端没有展示禁用状态,但相当于点击了一个在禁用状态的时间),因此点击无效。(idea from https://blog.csdn.net/qq_42342276/article/details/120994927)
本来感觉大佬写的很全,我没必要再写一遍,但后来发现,大佬给的修改方法属实有点复杂了,就把自己的方法贴出来做个记录(知道原因后为了保险startDate也处理了一下,不处理前选开始时间貌似也没出现啥问题)
var pickerOptions = {
disabledDate(time) {
const startDate = new Date()
const endDate = new Date()
startDate.setHours(0, 0, 0, 0)// 开始时间:当日00:00:00:00
startDate.setFullYear(endDate.getFullYear() - 1)// 开始时间:去年当日00:00:00:00
endDate.setHours(23, 59, 59, 59) // 结束时间:当日23:59:59:59
return time.getTime() < startDate || time.getTime() > endDate
}
}
}