element 时间日期选择器 禁用当前时间之前的 时间与日期

有些需求场景 ,我们不仅要禁用今天之前的日期,同时还要禁用现在之前的时间,比如现在是2022.06.18 下午两点。 那么我要禁用2022.06.18之前的日期,以及今天14点之前的时间(此时应该只能选 当前时间 - 23:59:59),但是当你选择2022.06.17以及之后的日期的时候 此时时间就可以随便选了 从 00:00:00 - 23:59:59 都可以

<el-date-picker
    v-model="dataForm.time"
    type="datetime"
    placeholder="选择日期时间"
    value-format="yyyy-MM-dd HH:mm:ss"
    :picker-options="pickerOptions"
    :default-time="'23:59:59'"
/>

// 这个需要npm install moment
import moment from 'moment';

export default {
	data() {
	    let disabledDate = date => {
	        return date.getTime() < new Date().getTime() - 24 * 60 * 60 * 1000;
	    };
	    return {
	        pickerOptions: {
	            disabledDate,
	            // selectableRange 用来限制时分秒的选择,这里要求只能选择当前时间之后到0点的时间点 但应该只限今天
	            selectableRange: '00:00:00 - 23:59:59',
	        },
	        dataForm: {
	            time: ''
	        }
	    };
	},
	watch: {
	    'dataForm.time'() {
	        this.selectable();
	    }
	},
	methods: {
		// 可选的时间范围
	    selectable() {
	        const date = moment(this.dataForm.time).startOf('day').format('x');
	        const nowDate = moment().startOf('day').format('x');
	        // 如果选择的是今天 则需要禁用已经过去的时间节点
	        if (date <= nowDate) {
	            // 默认选择的最新时间 是当前时间的两分钟后 (留出2分钟的富裕时间)
	            this.pickerOptions.selectableRange = (
	                `${moment().add(2, 'minutes').format('HH:mm:ss')} - 23:59:59`
	            );
	        }
	        // 如果是以后的日期,则不需要禁用时间节点
	        else {
	            this.pickerOptions.selectableRange = '00:00:00 - 23:59:59';
	        }
	    }
	}
}

 来源于:element 时间日期选择器 禁用当前时间之前的 时间与日期 - 知乎

  • 5
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您好!对于ele日期选择器禁用开始时间比结束时间大的小时,您可以使用以下方法来实现: 1. 首先,您需要获取开始时间和结束时间的小时数。 2. 然后,比较开始时间和结束时间的小时数,如果开始时间大于结束时间,即开始时间的小时数大于结束时间的小时数,那么您可以禁用这些小时。 3. 在ele日期选择器的配置中,使用 "disabled-hours" 属性来禁用指定的小时。您可以将开始时间大于结束时间的小时数传递给该属性。 以下是一个示例代码片段,演示如何在ele日期选择器禁用开始时间比结束时间大的小时: ```javascript <template> <el-date-picker v-model="date" type="datetime" :picker-options="pickerOptions" ></el-date-picker> </template> <script> export default { data() { return { date: null, pickerOptions: { disabledHours: this.getDisabledHours } }; }, methods: { getDisabledHours() { if (!this.date) { return []; } const startHour = this.date.getHours(); const endHour = this.dateEnd.getHours(); if (startHour > endHour) { // 禁用开始时间比结束时间大的小时 return Array.from({ length: 24 }, (v, i) => i).slice(endHour + 1, startHour); } return []; } } }; </script> ``` 在上述示例中,我们使用了一个计算属性 `pickerOptions` 来配置ele日期选择器的选项。其中,`disabledHours` 函数用于返回要禁用的小时数数组。我们通过比较开始时间和结束时间的小时数,来确定要禁用的小时范围。如果开始时间大于结束时间,我们通过 `slice` 方法从结束时间的下一个小时到开始时间的前一个小时来获取要禁用的小时数数组。 请注意,示例代码中的 `el-date-picker` 是基于Element UI库的一个组件。您可以根据自己的需求进行相应的调整和修改。 希望这能帮助到您!如有任何疑问,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值