场景:使用iview的日期选择器DatePicker情况下还需要限制时分秒,例如2020.01.14 09:39前的天时分不可选。
在此功能上我查看了iview官方文档,并未有该类限制属性,但实际上通过源码是有这个属性的。
核心属性options
和timePickerOptions
核心实现:timePickerOptions
下disabledHours
和disabledMinutes
显示时分
<template>
<div>
<DatePicker
type="datetime"
:options="sendTimeLimit"
:timePickerOptions="timePickerOptions"
clearable
@on-change="handleSendTime"
/>
</div>
</template>
<script>
export default {
data () {
return {
sendTimeLimit:0,
timePickerOptions: { steps: [1, 1, 60] },
}
},
methods: {
handleSendTime(val) {
//重置时分秒的时间限制
if()//判断选中是否当前当天,否则有之后天数的时分选择都会有bug
const hours = moment()
.startOf('hour')
.valueOf();
const days = moment()
.startOf('day')
.valueOf();
let hourNum = (hours - days) / 3600000;
//这里获取小时数可以用此类方法
//const hourNum = Number(moment().format('H'))
let hourArr = [];
let hourMax = 0;
for (let hour = 0; hour < hourNum; hour++) {
hourArr.push(hour);
hourMax = hour;
}
//此处循环出数组可以用这个方法let
//len = 15;
//let arr = new Array(len).fill(0).map((e, i) => i);
//console.log(arr);
this.timePickerOptions.disabledHours = hourArr;
this.handleSendTimeMin(val, hourMax);
},
handleSendTimeMin(val, hourMax) {
let checkHour = new Date(val).getHours();
if (checkHour <= hourMax + 1) {
const hours = moment()
.startOf('hour')
.valueOf();
const mins = moment()
.startOf('minute')
.valueOf();
let minsNum = (mins - hours) / 60000;
let minArr = [];
for (let min = 0; min < minsNum; min++) {
minArr.push(min);
}
this.timePickerOptions.disabledMinutes = minArr;
this.timePickerOptions = JSON.parse(
JSON.stringify(this.timePickerOptions)
);
} else {
this.timePickerOptions.disabledMinutes = [];
}
},
},
mounted () {
this.sendTimeLimit = {
disabledDate(date) {
const disabledDay = date.getTime();
const start = moment()
.startOf('day')
.valueOf();
return disabledDay < start;
},
};
}
}
</script>