DateTimePicker 日期时间选择器时间禁用的设置，不能大于当前日期和时间

最新推荐文章于 2025-06-30 11:11:29 发布

@呵呵

最新推荐文章于 2025-06-30 11:11:29 发布

阅读量5.1k

点赞数

CC 4.0 BY-SA版权

文章标签： web app 日期 css

本文链接：https://blog.youkuaiyun.com/weixin_41639609/article/details/121655663

本文介绍了一个使用Element UI的日期选择器组件，如何设置时间范围限制，确保用户选择的时间不超过当前时间，并详细展示了pickerOptions配置中的disabledDate和selectableRange功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

··· 在这里插入图片描述

<el-date-picker v-model="ruleForm.monitorTime " format="yyyy-MM-dd HH:mm" style="width:100%"
value-format="yyyy-MM-dd HH:mm:ss" type="datetime" :picker-options="pickerOptions"
placeholder="选择日期">
</el-date-picker>

pickerOptions: {
					// 时间不能大于当前时间
					disabledDate: (time) => {
						let str = "";
						str = this.$moment(new Date()).format("HH:mm:ss");
						console.log(str)
						 return new Date() < time.getTime()
					},
					selectableRange:'00:00:00 - '+this.$moment(new Date()).format("HH:mm:ss")
					
				}