ElementUI日期组件el-date-picker设置不能跨年/跨月/跨周

大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。

作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。

---

直接上代码

 <el-date-picker
    v-model="groupSearchTime"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    value-format="yyyy-MM-dd"
    style="width: 482px;line-height: 24px"
    :picker-options="pickerOptions"
    @change="getSearchTime">
</el-date-picker>

data中的代码：通过pickerOptions字段来控制时间选择器组件的禁用与否，因此关键点就在于得到合法时间的前后时间

data() {
    return {
      groupSearchTime: [],
      choiceDate: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.choiceDate = minDate.getTime()
          if (maxDate) {
            this.choiceDate = ''
          }
        },
        disabledDate: (time) => {
          const self = this
          if (self.choiceDate) {
            const selectDate = new Date(self.choiceDate)
            const nowYear = selectDate.getFullYear() // 当前年
            const nowMonth = selectDate.getMonth() // 当前月
            const nowDate = selectDate.getDate() // 当前几号
            const nowDay = selectDate.getDay() // 当前星期几
            // 本月的开始时间
            const monthStartDate = new Date(nowYear, nowMonth, 1).getTime()
            // 本月的结束时间
            const monthEndDate = new Date(nowYear, nowMonth + 1, 0).getTime()
            // 本年的开始时间
            const yearStartDate = new Date(nowYear, 0, 1).getTime()
            // 本年的结束时间
            const yearEndDate = new Date(nowYear, 12, 0).getTime()
            // 本周的开始时间，本周的结束时间
            const weekStartDate = new Date(nowYear, nowMonth, nowDate - nowDay + 1)
            const weekEndDate = new Date(nowYear, nowMonth, nowDate + (7 - nowDay))
            // 前后三天
            const tStartDate = new Date(nowYear, nowMonth, nowDate - 2)
            const tEndDate = new Date(nowYear, nowMonth, nowDate + 2)
            // 此处以不能跨月做示范
            return time.getTime() < monthStartDate || time.getTime() > monthEndDate
          }
        }
      }
    }
}

---

❤️欢迎素质三连[点赞 + 收藏 + 评论]

我是小梅，有兴趣的话可以在微信搜一搜「小梅的前端之路」第一时间接收文章更新通知，一起沟通、学习成长呀。