日期控件datepicker 只能选指定段日期案例
需求:日期控件只可选择本月日期,其它月份日期为灰色不可选。
页面:
"languages[$i18n.locale]" :placeholder="$t('PleaseSelect') + $t('PostingDate')" format="yyyy-MM-dd" name="postingDate" v-validate="'required'" :clear-button="false" v-model="postingDate" :disabledDates="disabledDates" class="w-full"/>
声明(data):
disabledDates:{ customPredictor(date) { //判断如果当前月份为12月则年份+1 月份变1月 var endYear = new Date().getFullYear(); var endMonth = new Date().getMonth()+2; var startTimeMonth = new Date().getMonth()+1; if(startTimeMonth==12) { endYear++; endMonth='01'; } var startTime=new Date(new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-01').getTime(); var endTime=new Date(endYear+'-'+endMonth+'-01').getTime(); if (date.getTime() < startTime||date.getTime() > endTime) { return true; } } // 不可选今天以后的日期 // customPredictor(date) { // if (date.getTime() > (new Date()).getTime()) { // return true; // } // } },
相关截图:
声明(data):
效果展示:
备注:
vue 中 new Date().getMonth() 得到的月份比当前月份少一个月参考网址:
https://blog.csdn.net/xhwy_zh/article/details/90901326
https://blog.csdn.net/cuk5239/article/details/107698291
"state.highlighted">