ElementUI 选择结束时间不能大于开始时间(可以选择同一天的时间段)

让大家看看效果图,如下:

动态图如下:

template的模板下

<el-col :span="5">
						<el-form-item label="开始时间">
							<el-date-picker
									v-model="startTime"
									type="datetime"
									placeholder="选择开始日期"
									format="yyyy/MM/dd HH:mm:ss"
									value-format="timestamp"
									:picker-options="pickerOptionsStart"
									@change="changeStart">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item label="结束时间">
							<el-date-picker
									v-model="endTime"
									type="datetime"
									placeholder="选择结束日期"
									format="yyyy/MM/dd HH:mm:ss"
									value-format="timestamp"
									:picker-options="pickerOptionsEnd"
									@change="changeEnd">
							</el-date-picker>
						</el-form-item>
</el-col>

vue中的代码:

data中的数据
pickerOptionsStart: {},
pickerOptionsEnd: {},
startTime: '', // 开始日期
endTime: '', // 结束日期

重点就是这两个change事件

changeStart() { // 限制开始时间
	console.log(this.startTime);
	this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
			disabledDate: (time) => {
				if (this.startTime) {
					return time.getTime() < this.startTime
				}
			}
	})	
},

changeEnd() { // 限制结束时间
	console.log(this.endTime);
	this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
	disabledDate: (time) => {
			if (this.endTime) {
				//如果没有后面的-8.64e7就是不可以选择今天的
				//减去一天的时间代表可以选择同一天; 1*24*60*60*1000;
				return time.getTime() > this.endTime-8.64e7 //-8.64e7可以让开始时间和结束时间选同一天
				}
		   }
	})			
},

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
对于elementui选择一段时间,可以使用el-date-picker组件的type属性设置为"daterange",然后通过设置start-placeholder和end-placeholder属性来显示开始时间结束时间的占位符。同时,可以使用value属性绑定一个数组来获取选择时间段。在data中定义dateTimes数组来接收选择时间段。在methods中使用disabledDate方法来禁用不在指定时间范围内的日期。具体代码如下: ```html <template> <el-date-picker v-model="dateTimes" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :picker-options="pickerOptions" ></el-date-picker> </template> <script> export default { data() { return { dateTimes: [], // 时间段 pickerOptions: { disabledDate: this.disabledDate, // 禁用不在指定时间范围内的日期 }, }; }, methods: { disabledDate(time) { return ( time.getTime() > new Date(this.endTime).getTime() || time.getTime() < new Date(this.starTime).getTime() ); }, }, }; </script> ``` 其中,dateTimes是接收选择时间段的数组,pickerOptions中的disabledDate方法用于禁用不在指定时间范围内的日期。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* *2* [vue elementui el-date-picker 根据接口返回的时间设置可选择时间段](https://blog.csdn.net/qq_33164351/article/details/115664611)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值