Ant Design Vue DatePicker 日期选择框 限制可选时间

背景

发送时间需要限制在当前时间分钟之后,比如:当前时间是2022年6月7日12:00,那么时间选择器可选的时间是:在2022年6月7日12:00 之后的。

实现

<a-date-picker
	show-time="{ format: 'HH:mm' }"
	format="YYYY-MM-DD HH:mm"
	:show-today="false"
	:disabled-date="disabledDate"
	:disabled-time="disabledTime"
/>


disabledDate(current) {
	return current && current < moment().startOf('day');
},
disabledHours() {
	const hours = [];
	for (let i = 0; i < moment().hour(); i++) {
		hours.push(i);
	}
	return hours;
},
disabledMinutes(currentDate) {
	const currentMinute = moment().minute();
	const currentHour = moment(currentDate).hour();
	const minutes = [];
	if (currentHour === moment().hour()) {
		for (let i = 0; i < currentMinute; i++) {
			minutes.push(i);
		}
	}
	return minutes;
},
disabledTime(dateTime) {
	if (moment(dateTime).isBefore(moment(), 'day')) {
	return {
		disabledHours: () => [],
        disabledMinutes: () => [],
      };
    }
	if (moment(dateTime).isSame(moment(), 'day')) {
		return {
			disabledHours: () => this.disabledHours(dateTime),
			disabledMinutes: () => this.disabledMinutes(dateTime),
		};
	}
	return null;
},

被大当家教育后:

//disabledHours() {
//	const hours = [];
//	for (let i = 0; i < moment().hour(); i++) {
//		hours.push(i);
//	}
//	return hours;
//},
//disabledMinutes(currentDate) {
//	const currentMinute = moment().minute();
//	const currentHour = moment(currentDate).hour();
//	const minutes = [];
//	if (currentHour === moment().hour()) {
//		for (let i = 0; i < currentMinute; i++) {
//			minutes.push(i);
//		}
//	}
//	return minutes;
//},
disabledDate(current) {
	return current && current < moment().startOf('day');
},
disabledTime(dateTime) {
	return {
		disabledHours: () => {
        	if (moment().isSame(dateTime, 'days')) {
          	return _.times(moment().hour());
        }
       		return [];
        },
        disabledMinutes: () => {
        	if (moment().isSame(dateTime, 'hours')) {
            	return _.times(moment().minute());
       		}
          	return [];
        },
      };
},

样式展示:(2022-6-19 15:46)
Ant Design Vue DatePicker 日期选择框 限制可选时间_第1张图片

Ant Design Vue DatePicker 日期选择框 限制可选时间_第2张图片

moment.js
lodash.js

你可能感兴趣的:(vue,javascript,前端)