elemetui中el-date-picker限制开始结束日期只能选择当月

鹏仔工作室2025-11-12 18:27

项目中有个查询条件，功能要求的是选择开始和结束日期，开始结束日期只能选择当前月份。

项目用的elementui，实现方式如下所示

html 复制代码

<el-date-picker v-model="gateAccessQueryData.startTime" size="small" type="date" placeholder="开始时间" :picker-options="pickerOptionsStart" value-format="yyyy-MM-dd"></el-date-picker>
<el-date-picker v-model="gateAccessQueryData.endTime" size="small" type="date" placeholder="结束时间" :picker-options="pickerOptionsEnd" value-format="yyyy-MM-dd"></el-date-picker>

javascript 复制代码

data() {
  return {
    gateAccessQueryData: {
      startTime: '',
      endTime: ''
    },
    // 开始日期限制
    pickerOptionsStart: {
      disabledDate: (time) => {
        const current = new Date()
        const firstDay = new Date(current.getFullYear(), current.getMonth(), 1)
        const lastDay = new Date(current.getFullYear(), current.getMonth() + 1, 0)
        // 默认限制：不在当月范围内
        let isNotInCurrentMonth = time.getTime() < firstDay.getTime() || time.getTime() > lastDay.getTime()
        // 额外限制：如果已选结束时间，不能选择结束时间之后的日期
        if (this.gateAccessQueryData.endTime) {
          return isNotInCurrentMonth || time.getTime() > new Date(this.gateAccessQueryData.endTime).getTime()
        }
        return isNotInCurrentMonth
      }
    },
    // 结束日期限制
    pickerOptionsEnd: {
      disabledDate: (time) => {
        const current = new Date()
        const firstDay = new Date(current.getFullYear(), current.getMonth(), 1)
        const lastDay = new Date(current.getFullYear(), current.getMonth() + 1, 0)
        // 默认限制：不在当月范围内
        let isNotInCurrentMonth = time.getTime() < firstDay.getTime() || time.getTime() > lastDay.getTime()
        // 额外限制：如果已选开始时间，不能选择开始时间之前的日期
        if (this.gateAccessQueryData.startTime) {
          return isNotInCurrentMonth || time.getTime() <= new Date(this.gateAccessQueryData.startTime).getTime() - 86400000
        }
        return isNotInCurrentMonth
      }
    }
  }
}

原文围观地址 https://www.sharedbk.com/post/286.htmlhttps://www.sharedbk.com/post/286.html