element中时间日期组件，对于快捷选选项中的禁用日期

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

需求 在导出日报告时，填写的巡查日期需是在所属月份内的，所以需要判断当前选择的所属月份，然后将当前月份变为可选，别的月份都为不可选，这里主要是this的问题，因为在picker-options对象中拿不到当前的组件的this

下面是我用的方法，仅此参考

1.picker选项

            <el-date-picker
                v-model="dayTime"
                :editable='false'
                type="date"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                placeholder="请选择导出日期"
                :picker-options="pickerOptions"
                :default-value='belongMonth'
                >
            </el-date-picker>

format:显示在输入框中的格式

value-format:绑定值的格式。不指定则绑定值为 Date 对象,所以我的格式就是2022-7-28这样

default-value：选择器打开时默认显示的时间，我后面会用到

Picker Options 选项见下方官方文档，我只用到了其中的disabledDate，返回一个boolean值

2.在data中配置picker-options选项对象

pickerOptions: this.disabledDate(), // 禁用时间

3.在methods写disbaledDate函数

 // 禁用时间
    disabledDate(){
      // console.log(this)
      let that = this
      return {
        disabledDate(date){
          let currentTimeMonth = new Date(that.belongMonth).getMonth() //传入的月份选择
          let winTimeMonth = new Date(date).getMonth() // 系统的月份
          // console.log('currentTimeMonth',currentTimeMonth,'winTimeMonth',winTimeMonth )
          return currentTimeMonth !== winTimeMonth  // 系统当前月份时间不等于传入的选择月份，false为未禁用，true为禁用
          // console.log(that.belongMonth) 
      }
      }
    },

将函数里面的this赋值给that,这样就可以拿到data里面你要传的时间参数

在方法中拿到的this

直接在pickerOptions中拿到的this为undefined

pickerOptions:{
        disabledDate(data){
          // console.log(data)
          console.log(this)
        },
      },

所以在方法中定义拿到this，可以取到data里面要传入的时间参数，这样在disabledDate中判断，当前时间跟传入时间不对的就不被禁用，例如我选择的是“2022-3”月，这样别的都被禁用啦

因为这个组件默认选择的是当前系统时间，所以当你现在时间是7月份，但你传入的是3月份，可是你把除了3月的时间都禁用啦，所以一进去就是禁用，体验不好，给一个默认时间，default-value，这个默认时间就是你传入可选的时间