element的el-date-picker组件限制只能选择当前时间之后的时间(包括时分秒的限制)

最新推荐文章于 2025-04-09 17:17:59 发布

黑面狐 sa~

最新推荐文章于 2025-04-09 17:17:59 发布

阅读量2.5w

点赞数 16

分类专栏： element 文章标签： vue.js

原文链接：https://blog.csdn.net/qq_41646249/article/details/109202048

版权

element 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了Element UI中El-DatePicker插件的两种实现方式：option与handle。option方式仅允许用户选择当前时间及以后的时间，而handle方式虽然能选择具体的时分秒，但若所选时间小于当前时间，则自动调整为当前时间。文章通过具体代码示例展示了如何实现这些功能。

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

实现的方式：
option实现插件只能选取当前时间之后的时候(包括年月日)
handle实现插件能选取当前时间的时、分、秒，但是选择完毕之后，只要选择的时、分、秒小于当前时间，会自动填充为当前的时、分、秒

如图当前是2020-05-13 17:00;
年月日不能选取小于当前时间的，但是时分能选，但是点了ok之后，如果时间小于当前时间，会自动替换成当前时间
在这里插入图片描述

<el-date-picker
       v-model="date"
        type="datetime"
        format="yyyy-MM-dd HH:mm"
        start=""
        :picker-options="option"
        @change="handle"
        placeholder="">
</el-date-picker>

data：{
	option{
		disabledDate:(time)=> {
	        return time.getTime() < Date.now()-1 * 24 * 3600 * 1000
	    }
	}
}，
methods:{
	handle: function() {
       var startAt = new Date(this.date) * 1000 /1000;
        if(startAt < Date.now()) {
            this.date = new Date();
        }
    },
}