el-date-picker设置今天之前的日期不可选

最新推荐文章于 2023-12-22 14:22:06 发布

林多多@

最新推荐文章于 2023-12-22 14:22:06 发布

阅读量4.3k

点赞数 3

分类专栏： vue 初学者学习前端文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/weixin_59816940/article/details/131288224

版权

初学者学习前端同时被 2 个专栏收录

22 篇文章 2 订阅

订阅专栏

vue

17 篇文章 1 订阅

订阅专栏

                      <el-date-picker
                        v-model="editForm.offlineTime"
                        type="date"
                        placeholder="选择日期"
                        style="width: 150px"
                        :picker-options="{
                          disabledDate: (time) =>
                            time.getTime() <
                            new Date(new Date().setHours(0, 0, 0, 0))
                        }"
                      >
                      </el-date-picker>

效果

使用了 new Date(new Date().setHours(0, 0, 0, 0)) 获取了当天的开始时间，然后将选择的时间与之比较，如果小于当天的开始时间，则禁用该日期。

如果是今天也不可以选的话，可以按照下面这么写

<el-form-item label="下线时间">
  <el-date-picker
    v-model="editForm.offlineTime"
    type="date"
    placeholder="选择日期"
    style="width: 150px"
    :picker-options="{ disabledDate: time => time.getTime() < Date.now() }"
  >
  </el-date-picker>
</el-form-item>