根据动态月份限制日期只能选择选中月的日期,其他月日期禁用
参考文档链接: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