记录vue---element中禁止选择过去时间

最新推荐文章于 2024-04-25 20:38:06 发布

WYG_王雅格

最新推荐文章于 2024-04-25 20:38:06 发布

阅读量257

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/YY_WYG/article/details/126162581

版权

Element UI 时间选择器禁用日期 picker-options Vue.js

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5PtRwmZC-1659603100377)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/86c0afbfd1d84b20b2311efc827cb185~tplv-k3u1fbpfcp-watermark.image?)]

需求就是这丫，8月4号之前的禁止选择

解决方式：

选择器组件中存在picker-options这个属性api,接收一个obj类型的参数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K2I5gjF2-1659603100378)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bb63c641073u1fbpfcp-watermark.image?)]
使用方式：

 <el-date-picker
              clearable
              size="small"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="form.dateRange"
              @input="dateRangeChange"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
</el-date-picker>

//data中写入
data(){
    return{
          pickerOptions: {
            disabledDate(time) {
              return time.getTime() < Date.now() - 8.64e7;
            },
      },
    }
}

时间选择器都适用

在这里插入图片描述