element-ui日期选择器设置禁止选择时间（禁止选择今天之前或包含今天）

王阿储

已于 2023-07-06 11:18:38 修改

阅读量1.7w

点赞数 10

CC 4.0 BY-SA版权

分类专栏： vue的埋坑记录文章标签： vue.js html javascript

于 2020-04-27 15:20:31 首次发布

本文链接：https://blog.youkuaiyun.com/ywy_wc/article/details/105790888

vue的埋坑记录专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用Vue的Element UI库中日期选择器组件的picker-options属性，通过设置disabledDate方法来禁用用户选择当前日期及之前的所有日期。提供了一段具体的代码示例，展示了如何实现这一功能。

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

需求背景：禁止用户在输入内容的时候选择今天以前的日期或者包含今日的日期

设置禁用时间主要为设置组件的此属性=> :picker-options=“pickerOptions”

	<el-date-picker
	    value-format="yyyy-MM-dd"
	    v-model="form.strategy.date"
	    type="daterange"
	    range-separator="至" start-placeholder="开始日期"
	    end-placeholder="结束日期"
	    :picker-options="pickerOptions">
	</el-date-picker>

		export default {
			data() {
				return {
					pickerOptions: {
						disabledDate(time) {
							//此条为设置禁止用户选择今天之前的日期，包含今天。
							// return time.getTime() <= (Date.now());
							//此条为设置禁止用户选择今天之前的日期，不包含今天。
							return time.getTime() < (Date.now()-(24 * 60 * 60 * 1000));
						},
						//如果不生效，把方法格式改为
						//disabledDate:function disabledDate(time) {
							//return time.getTime() < (Date.now()-(24 * 60 * 60 * 1000));
						//}
					}
				}
			}
		}