elementui时间选择器限制选择日期范围

最新推荐文章于 2024-12-04 14:40:14 发布

webCandy

最新推荐文章于 2024-12-04 14:40:14 发布

阅读量316

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/webCandy/article/details/123221696

elementui 专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了如何使用ElementUI的时间选择器组件来限制用户只能选择当前日期及之前的15天内的日期。通过设置`pickerOptions`属性，利用`disabledDate`回调函数进行时间过滤，确保用户无法选择今天之后的日期。示例代码展示了两种不同的实现方式，一种阻止选择今天之后的任何日期，另一种允许选择当天及之前的15天。这有助于在前端表单中实现合规的日期输入控制。

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

elementui时间选择器限制选择日期范围

elementui时间选择器

<el-date-picker
  v-model="reimbDate"
  size="small"
  type="daterange"
  :picker-options="pickerOptions"
  value-format="yyyy-MM-dd"
  range-separator="-"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  placeholder="选择报销时间"
  @change="reimbDateChange(reimbDate)"
>
</el-date-picker>

不能选择今天之后的日期

 pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
  },

只能选择当天及前面的十五天

pickerOptions1: {
    disabledDate(time) {
        const times = new Date(new Date().toLocaleDateString()).getTime() - 15 * 8.64e7 + 1;
        return time.getTime() > Date.now() || time.getTime() < times; 
    },
},