记录工作中踩的坑 如果有帮助记得点赞
iview框架 time-picker-options有几个参数分别是disabledHours、disabledMinutes、disabledSeconds
现在有一个需求 不能超过当前的时间 但是设置当天的时候，选择时和秒的时候 切换的时候会限制错误
结合自己的业务写了下面的解决方案
代码
<DatePicker :value="data.time" type="datetime" format="yyyy-MM-dd HH:mm" :options="changeOptions" :timePickerOptions="timePickerOptions" placeholder="请选择时间" @on-change="handleDisHours">
data() {
return {
changeOptions: {
disabledDate(date) {
return date && date.valueOf() > Date.now();
,
},
timePickerOptions: { disabledHours: [], disabledMinutes: [], steps: [1, 1, 60] },
}
methods: {
handleDisHours(val) {
// 获得当前的小时 从当前的小时开始禁用后面
const hourNum = Number(new Date().getHours());
// 得到当天
const curDate = getFormatTime();
//判断选中是否当前当天，只有当天才进行操作限制
if (val && curDate != val.substr(0, 10)) {
this.timePickerOptions.disabledHours = [];
this.timePickerOptions.disabledMinutes = [];
return;
}
// 此处循环出数组可以用这个方法let
// 生成从下标为多少开始的 0-23的时的数组 生成不能选的小时
const hourArrNum = 23 - hourNum;
let hourArr = new Array(hourArrNum).fill(hourArrNum).map((e, i) => i + hourNum + 1);
this.timePickerOptions.disabledHours = hourArr;
this.handleDisMinutes(val, hourNum);
},
handleDisMinutes(val, hourMax) {
let checkHour = new Date(val).getHours();
// 判断是否选中的是当前时间的小时 如果是 就要进行分的判断 不是就重置
if (checkHour == hourMax) {
const minsNum = Number(new Date().getMinutes());
// 从多少生成多少位数组
const minArrNum = 59 - minsNum;
// 生成从下标为多少开始的 0-59的时的数组 生成
let minArr = new Array(minArrNum).fill(minArrNum).map((e, i) => i + minsNum + 1);
this.timePickerOptions.disabledMinutes = minArr;
this.timePickerOptions = JSON.parse(JSON.stringify(this.timePickerOptions));
} else {
this.timePickerOptions.disabledMinutes = [];
}
},
}
