antd a-date-picker 限制结束时间大于开始时间

// antd a-date-picker 限制结束时间大于开始时间

     <a-form-model-item label="开放起始时间:" >
         <a-date-picker
           v-model="form.startTime"
           show-time
           format='YYYY-MM-DD HH:mm:ss'
           valueFormat='YYYY-MM-DD HH:mm:ss'
           :disabled-date="disabledDate"
           placeholder="请选择时间,默认限制大于当前时间10分钟"
           style="width: 100%;" 
         >
           <template #suffixIcon>
             <a-icon type="clock-circle" />
           </template>
         </a-date-picker>
       </a-form-model-item>

       <a-form-model-item label="开放结束时间:" >
         <a-date-picker
           v-model="form.endTime"
           show-time
           format='YYYY-MM-DD HH:mm:ss'
           valueFormat='YYYY-MM-DD HH:mm:ss'
           :disabled-time="disabledEnd"
		   :disabled-date="disabledEndDate"
           placeholder="请选择时间"
           style="width: 100%;" 
         >
           <template #suffixIcon>
             <a-icon type="clock-circle" />
           </template>
         </a-date-picker>
       </a-form-model-item>

//  方法
		// 开始时间
		disabledDate(current) {
  			return current < moment().add(10, "m").subtract (1,"days") ;//当前以前
		},
		// 结束时间
		disabledEndDate(current) {
			return current && current < moment(this.form.startTime).subtract(1, 'days').endOf('day')
		},
		 // 计算范围
		 range (start, end) {
			const result = [];
			for (let i = start; i < end; i++) {
				result.push(i);
			}
			return result;
		},
		// 禁用时间
		disabledEnd (current) {
			const hours = moment(this.form.startTime).hours();
			const minutes = moment(this.form.startTime).minutes();
			const seconds = moment(this.form.startTime).seconds();
			if (current && moment(this.form.startTime).date() == current.date()) {
				return {
					disabledHours: () => this.range(0, hours),
					disabledMinutes: (selectedHour) =>   selectedHour <= hours ? this.range(0, minutes) : [],
					disabledSeconds: (selectedHour, selectedMinute) =>  selectedHour <= hours && selectedMinute <= minutes ? this.range(0, seconds) : []
				};
			}
			return {
				disabledHours: () => [],
				disabledMinutes: () => [],
				disabledSeconds: () => [],
			};
		},

// 效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/8b722844e8da48ecbec17e20d6c22626.png)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值