vue关联两个date-picker使其实现range-picker功能

最新推荐文章于 2025-03-31 11:32:35 发布

前端李大力

最新推荐文章于 2025-03-31 11:32:35 发布

阅读量986

点赞数

分类专栏： vue框架文章标签：前端 vue javascript

本文链接：https://blog.youkuaiyun.com/weixin_55763825/article/details/125623798

版权

vue框架专栏收录该内容

1 篇文章

订阅专栏

通过Vue解决date-picker联动问题，确保结束日期不早于开始日期，实现日期范围的有效选择。

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

有时候想要下面这种效果，同时也想实现开始日期前的范围内结束日期禁选（即日期禁选以避免结束时间早于开始时间的逻辑冲突）但是不知道怎么操作？下面就来瞧一瞧看一看。

<div class="form_date_class"> 
  <el-date-picker 
    v-model="queryPamars.beginDate" type="date" 
    placeholder="选择日期" style="width: 130px" 
    format="yyyy-MM-dd" value-format="yyyy-MM-dd" 
    :picker-options="beginDatePickerOptions"
  />  
  <div>-</div>  
  <el-date-picker 
    v-model="queryPamars.endDate" 
    type="date" placeholder="选择日期" 
    style="width: 130px" format="yyyy-MM-dd" 
    value-format="yyyy-MM-dd" 
    :picker-options="endDatePickerOptions"
  /> 
</div>

data() {
  return {
    queryPamars: {
          beginDate: undefined,
          endDate: undefined,
        },
    rules: {
          beginDate: [
            {required: true, message: '请输选择开始时间', trigger: 'blur'},
          ],
          endDate: [
            {required: true, message: '请输选择结束时间', trigger: 'blur'},
          ],
        },
    beginDatePickerOptions: {
          disabledDate: time => {
            const endDateVal = this.queryPamars.endDate;
            if (endDateVal) {
              return time.getTime() > new Date(endDateVal).getTime();
            }
          }
        },
        endDatePickerOptions: {
          disabledDate: time => {
            const beginDateVal = this.queryPamars.beginDate;
            if (beginDateVal) {
              return time.getTime() < new Date(beginDateVal).getTime();
            }
          }
        },
  }
}

那么，两个date-picker联动成功了，可以看到，日期禁选已经成功！！！