elementUI里面的dataPick 设置当前日期之前的时间禁止选择

最新推荐文章于 2025-09-18 09:39:50 发布

原创最新推荐文章于 2025-09-18 09:39:50 发布 · 1w 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#elementUI里面的dataPick 设置当前日期之前的时间不能选

js 专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何使用Element UI的日期选择器组件，并通过JavaScript代码实现禁选过去日期及特定的不可选日期。通过设置pickerOptions属性，可以有效地控制用户在界面中可选择的日期范围，提升用户体验。

html代码

  <el-date-picker
                            v-model="value1"
                            type="date"
                            :picker-options="pickerOptions1"
                            placeholder="选择日期">
                    </el-date-picker>

js代码

data:{
 value1: '',
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                },
            }
      }

效果图
在这里插入图片描述

 pickerOptions1: {
                disabledDate(time) {
                    let dd = moment(time).format('YYYY-MM-DD')

                    var _date = [
                        '2019-09-09',
                        '2019-09-11',
                        '2019-09-20',
                    ];
                    if (_date.indexOf(dd) >=0) {
                        return false;
                    }
                    return true;

                },
            },

效果图：
在这里插入图片描述