el-date-picker 开始时间选定后,结束时间不可选择开始时间之前的日期

<el-date-picker
            v-model="startTime"
            name="startTime"
            value-format="yyyy-MM-dd"
            type="date"
            @change="activityStartTime"
            placeholder="请选择开始日期"
            :picker-options="pickerOptions"
          />
<el-date-picker
            v-model="endTime"
            name="endTime"
            value-format="yyyy-MM-dd"
            type="date"
            @change="activityEndTime"
            placeholder="请选择结束日期"
            :picker-options="pickerOptions1"
          />

data(){
	return{
		startTime:new Date(new Date - 1000*60*60*24*31),toLocaleDateString().split('/').map(item=>{if(item<10){return '0'+item}else{return item}}).join('-'),
		endTime:new Date().toLocaleDateString().split('/').map(item=>{if(item<10){return '0'+item}else{return item}}).join('-'),
		pickerOptions:{},
		pickerOptions1:{}
	}
}

activityStartTime(val){
	this.pickerOptions1 = Object.assign({}, this.pickerOptions,{
		disabledDate: time => {
			return (
				new Date(time).getTime() <= new Date(this.startTime)
			)
		}
	})
}

activityEndTime(val){
	if(!value){
		this.pickerOptions = Object.assign({}, this.pickerOptions1,{
			disabledDate: time => {
				return time.getTime() >= new Date("2999-12-30 23:59:59").getTime();
			}
		})
		return
	}

	this.pickerOptions = Object.assign({}, this.pickerOptions1,{
		disabledDate: time => {
			return (
				time.getTime() >
				new Date(this.endTime).getTime() - 24*3600*1000
			)
		}
	})
}


参考:
1、el-date-picker中日期选择器时间限制,限制选择30天时间范围且不大于当前时间 ; 时间范围只能选择1天;时间范围在某一段时间内
2、el-date-picker日期的限制

`el-date-picker` 是 Element UI(一个基于 Vue.js 的桌面端组件库)中的一个日期选择器组件,用于让用户可以选择日期时间。如果你需要设置`el-date-picker`只允许选择当前日期之后的时间,并且精确到分钟,你需要对组件进行相应的配置。 以下是一个配置示例,展示如何在`el-date-picker`中设置仅允许选择当前日期之后的时间,并精确到分钟: ```html <template> <el-date-picker v-model="value" type="datetime" :disabled-dates="disabledDates" value-format="yyyy-MM-dd HH:mm" ></el-date-picker> </template> <script> export default { data() { return { value: '', }; }, methods: { disabledDates(time) { // time为选定日期,我们要返回一个布尔值来决定是否禁用这个日期 const now = new Date(); // 将选定日期字符串转换为Date对象 const date = new Date(time); // 如果选定日期小于当前日期,则禁用 if (date < now) { return true; } // 如果选定日期大于当前日期,不限制分钟 if (date > now) { return false; } // 如果选定日期是当前日期,只允许选择当前分钟之后的时间 return now.getTime() - date.getTime() > 0 || date.getMinutes() < now.getMinutes(); } } }; </script> ``` 在这个示例中,我们使用`type="datetime"`来表示这是一个日期时间选择器。`value-format="yyyy-MM-dd HH:mm"`属性定义了值的格式,其中`HH`代表24小时制的小时,`mm`代表分钟,这样可以精确到分钟。 `disabledDates`方法用来定义哪些日期不可选的。在这个方法中,我们通过比较当前时间选定时间来决定是否禁用该日期。如果选定日期小于当前日期,则该日期不可选。如果选定日期与当前日期相同,则进一步比较分钟数,只有当前分钟数之后的时间才能被选择
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值