場景:使用iview的日期選擇器DatePicker情況下還需要限制時分秒传睹,例如2020.01.14 09:39前的天時分不可選沧侥。
在此功能上我查看了iview官方文檔洒敏,并未有該類限制屬性矗蕊,但實際上通過源碼是有這個屬性的拿愧。
核心屬性options
和timePickerOptions
核心實現(xiàn):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()//判斷選中是否當(dāng)前當(dāng)天杠河,否則有之后天數(shù)的時分選擇都會有bug
const hours = moment()
.startOf('hour')
.valueOf();
const days = moment()
.startOf('day')
.valueOf();
let hourNum = (hours - days) / 3600000;
//這里獲取小時數(shù)可以用此類方法
//const hourNum = Number(moment().format('H'))
let hourArr = [];
let hourMax = 0;
for (let hour = 0; hour < hourNum; hour++) {
hourArr.push(hour);
hourMax = hour;
}
//此處循環(huán)出數(shù)組可以用這個方法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>