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)
在这里插入图片描述

在这里插入图片描述

moment.js
lodash.js

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值