根据动态月份限制日期只能选择选中月的日期,其他月日期禁用


参考文档链接:https://zhuanlan.zhihu.com/p/391487267

1.目前是设置只能选择当前月日期,当月之前和当月之后禁用
<el-date-picker v-model="form.enableStartTime" :picker-options="setMonthDisabled"
                type="date" placeholder="选择日期" value-format="yyyy-MM-dd" :clearable="false">
el-date-picker>


    return {
      form:{
        month:'',// 月份,格式yyyyMM
        enableStartTime:'',// 有效期-开始
      },
setMonthDisabled:{
  disabledDate(time){
    // 获取当前的月份信息
    const date=new Date() // 获取当前的时间基本信息,值是这样的: Tue Jul 20 2021 14:59:43 GMT+0800 (中国标准时间)
    const year=date.getFullYear() // 获取当前年份,值是这样的: 2021
    let month=date.getMonth()+1 // 获取当前月份,值是这样的: 6   getMonth()方法返回值是0-11,也就是1月份到12月份,所以要加上1,才是当前月份
    if(month>=1 && month<=9){
      // 如果是1月到9月就要在前面补上一个0   比如:02、07    月份这样表示
      month='0'+month
    }
    const nowDate=year.toString()+month.toString() // 转换成字符串拼接,最终得到年和月,比如此时的时间是2021年7月20号,所以nowDate的值是:202107
    // 获取时间选择器的月份信息
    const timeyear=time.getFullYear() // 获取时间选择器的年份(有很多)
    let timemonth=time.getMonth()+1 // 与上面同理
    if(timemonth>=1 && timemonth<=9){
      timemonth='0'+timemonth
    }
    const elTimeData=timeyear.toString()+timemonth.toString()
    // 返回,时间选择器的日期月份大于当前日期的月份,又因为disabledDate函数是控制月份禁用不可选
    // 所以,最终就是:时间选择器的月份大于当前的月份,就都禁用掉,所以就实现了最终效果:
    // 大于等于当前月份都不可选
    return elTimeData>nowDate// 这里虽然是字符串,但是弱类型语言js会做一个转换,是可以比较大小的如: '202107' > '202008'
  }
},
}

效果:

2.接下来改为根据月份动态控制日期的选中和禁用

    <el-form-item label="月份" prop="month">
          <el-date-picker
            v-model="form.month" type="month" placeholder="选择月" value-format="yyyy-MM" :clearable="false">
          el-date-picker>
        el-form-item>
<el-form-item label="开始日期" prop="enableStartTime" v-show="this.operationType!=='update'">
            <el-date-picker v-model="form.enableStartTime" :picker-options="setMonthDisabled"
                            type="date" placeholder="选择日期" value-format="yyyy-MM-dd" :clearable="false">
            el-date-picker>
          el-form-item>
 setMonthDisabled:{
        disabledDate:this.disabledDate
      },
  methods:{
    disabledDate(time){
      const nowDate=this.form.month.substring(0,4)+this.form.month.substring(5,7).toString() // 转换成字符串拼接,最终得到年和月,比如此时的时间是2021年7月20号,所以nowDate的值是:202107
      // 获取时间选择器的月份信息
      const timeyear=time.getFullYear() // 获取时间选择器的年份(有很多)
      let timemonth=time.getMonth()+1 // 与上面同理
      if(timemonth>=1 && timemonth<=9){
        timemonth='0'+timemonth
      }
      const elTimeData=timeyear.toString()+timemonth.toString()
      // 返回,时间选择器的日期月份大于当前日期的月份,又因为disabledDate函数是控制月份禁用不可选
      // 所以,最终就是:时间选择器的月份大于当前的月份,就都禁用掉,所以就实现了最终效果:
      // 大于等于当前月份都不可选
      return elTimeData>nowDate// 这里虽然是字符串,但是弱类型语言js会做一个转换,是可以比较大小的如: '202107' > '202008'
    },
}

因为我的月份格式yyy-MM,在这里使用的时候要转程yyyyMM

相关