vue2和vue3在使用element-ui日期选择框中禁用日期的实现

最新推荐文章于 2024-06-05 16:56:44 发布

hello big_bear

最新推荐文章于 2024-06-05 16:56:44 发布

阅读量3.4k

点赞数 6

分类专栏： vue 文章标签： vue elementui

本文链接：https://blog.csdn.net/big_beer/article/details/119775381

版权

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了在Vue2和Vue3中使用饿了么UI库的日期选择器组件时如何禁用特定日期。在Vue2中，禁用日期的`disabledDate`属性需要放在`picker-options`内，而在Vue3中，该属性可以直接使用，无需包裹在`picker-options`中。示例代码展示了两种情况下禁用今天之前日期的方法，实现效果相同。

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

vue2中饿了么的日期禁用

上了先上个官方文档，可以看见vue2的disabledDate是在picker-options里面的。
请添加图片描述
因为vue2的写法应该把disabledDate写在:picker-options里面，可以使用这种写法。

 <el-form-item label="预计收货时间" prop="estimatedDate" required>
                <el-date-picker
                  v-model="formData.estimatedDate"
                  type="datetime"
                  :picker-options="{disabledDate}"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期时间"
                />
</el-form-item>

把方法写在methods里面

<script>
methods: {
    disabledDate(time) { // 禁用今天之前的时间
      return time.getTime() < new Date() - 8.64e7
    }
}
</script>

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

vue3中饿了么的日期禁用

vue3的文档有点变化，这个disabledDate被提到外面来了。
在这里插入图片描述
例子：

 <el-form-item label="质押期限" prop="startDate" required>
                <el-date-picker
                  type = 'daterange' 
                  v-model:start="params.startDate" 
                  v-model:end="params.endDate"
                  :disabledDate="disabledDate"
                />
</el-form-item>

把方法写在methods里面

<script>
methods: {
    disabledDate(time) { // 禁用今天之前的时间
      return time.getTime() < new Date() - 8.64e7
    }
}
</script>

其实跟vue2上面差不多，就是:disabledDate可以直接用了。不需要再写到:picker-options里面。效果是一样的。
在这里插入图片描述