elementui el-date-picker 日期选择器动态禁用部分日期

最新推荐文章于 2025-05-29 10:19:15 发布

95岁IT民工

最新推荐文章于 2025-05-29 10:19:15 发布

阅读量1.7k

点赞数 10

CC 4.0 BY-SA版权

文章标签： elementui vue.js 前端

本文链接：https://blog.youkuaiyun.com/m0_68964998/article/details/136402405

本文介绍了如何在前端使用Vue的ElementUI组件实现日期选择器，根据后台返回的数据动态禁用部分日期，并监听月份切换以触发后端接口获取可查询日期。

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

有个需求需要根据后台返回的数据动态禁用日期选择器中的部分日期，动态数据需要在切换月份或年的时候调后端接口根据所选月份获取，所以还需要监听月份、年份的点击事件。上代码。

1.html

首先需要給选择器绑定 :picker-options="pickerOptionsStart"

<div class="datePicker">  <!-- 日期选择 -->
                <el-date-picker
                  v-model="queryDate"
                  type="date"
                  :picker-options="pickerOptionsStart"
                  @focus="isShow($event)"
                  @change="getInfoList()"
                  value-format="yyyyMMdd"
                  placeholder="选择日期">
                </el-date-picker>
 </div>

 data() {
    return {
      queryDate:'',
      queryMonth:'', //查询日期的月份
      pickerOptionsStart:{
        disabledDate:this.disabledDate
      },
      queryDateList:[],//可查询日期
    };
  },

2.js

 //监听时间选择器月份及年切换
  async isShow(){
      await this.$nextTick()
      this.monthChange()
      document.querySelectorAll("[aria-label='下个月'],[aria-label='上个月'],[aria- 
        label='后一年'],[aria-label='前一年']")
        .forEach(item => item.addEventListener('click', () => {
          this.monthChange()
        }))
    },
     async monthChange () {
      let year, month
      // 获取年月
      year = document.querySelectorAll('.el-date-picker__header-label') 
          [0].innerHTML.slice(0, 4)
      month = document.querySelectorAll('.el-date-picker__header-label') 
          [1].innerHTML.slice(0, -1)
      if (Number(month) < 10) {
        // 10月之前都需要补0
        month = '0' + month;
      }
      if (this.queryMonth != year+month) {  //判断前后月份，防止重复触发
         this.queryMonth = year+month
         this.getQueryDate()
      }
    },
    //设置时间选择器禁用方法
     disabledDate(time){
        let date = JSON.parse(JSON.stringify(this.queryDateList))
        date.forEach(e => {
          let str = JSON.stringify(e.day)
          e.day = str.substring(0,4) + '-' + str.substring(4,6) + '-' + 
           str.substring(6,8)
        }) //后端返回的日期格式是 20240301, 这里需要手动修改为 2024-03-01 格式

        let condition = ''
        let conditionArr = []
        let oneDay = 24 * 60 * 60 * 1000
        date.map((item, index) => {
            condition = `time.getTime() >= ${new Date(item.day).getTime() - oneDay} && 
              time.getTime() <= ${new Date(item.day).getTime()}`
            conditionArr.push(condition)
        })
        let resultCondition = conditionArr.join(' ' + '||' + ' ')
        return !eval(resultCondition)  //这里后端返回的时间数据是可选择的时间，所以用了！
     },
    //获取可查询日期
    getQueryDate(){
      let data = {}
      data.month = this.queryMonth
      serviceModelHttp.getQueryDate(data).then(res => {
        //  console.log('日期',res);
         this.queryDateList = res.data.data
      })
    },