elementUI 日期选择器 当前月跟上个月之外的时间只能选择整月
<el-date-picker type="daterange" :picker-options="pickerOptions"v-model="formData.dateTime" format="yyyy-MM-dd"value-format="yyyy-MM-dd" :style="{}" start-placeholder="开始日期" end-placeholder="结束日期"range-separator="至" clearable></el-date-picker>// 配置项：// 日期限制pickerOptions: {disabledDate(time) {// 上上月（只可以选择整月）// 1 ~ 12月 let curFullYear = new Date().getFullYear(), // 当前年份curMonth = new Date().getMonth() + 1, // 当前月份beforeMonth; // 上上月份if(curMonth >= 3 && curMonth <= 12) {// 上上月份beforeMonth = curMonth - 2;}else if(curMonth === 1) {beforeMonth = 11;}else if( curMonth === 2) {beforeMonth = 12;}return ( // 当前时间以后的时间不可选time.getTime() > Date.now() ||// 选择的年小于当前年&&只能选择每个月的第一天(time.getFullYear() < curFullYear && time.getDate() !== 1) || // 选择的年等于当前年&&只能选择每个月都第一天&&当前月跟上一个月可以选择任意时间段(time.getFullYear() === curFullYear && time.getDate() !== 1 && time.getMonth() + 1 <= beforeMonth) )},onPick({maxDate, minDate }) {}},
当前月跟上个月之外的时间只能选择整月-升级版
// 日期限制pickerOptions: {disabledDate(time) {/*** 除了当前月跟上个月，只可以选择整月，并且不可以跨月*/ // 1 ~ 12月 let curFullYear = new Date().getFullYear(), // 当前年份curMonth = new Date().getMonth() + 1, // 当前月份beforeMonth; // 上上月份if(curMonth >= 3 && curMonth <= 12) {// 上上月份beforeMonth = curMonth - 2;}else if(curMonth === 1) {beforeMonth = 11;}else if( curMonth === 2) {beforeMonth = 12;}let res = getEndTime(time);// 获取当前月份的最后一天function getEndTime(time) {let year = time.getFullYear(),month = time.getMonth() + 1,monthZ = month < 10 ? ('0' + month) : month,curMonthLastData = new Date(year, monthZ, 0),curMonthLastDay = curMonthLastData.getDate(); // 当前月的最后一天return curMonthLastDay;}return ( // 当前时间以后的时间不可选time.getTime() > Date.now() ||// 选择的年小于当前年&&只能选择每个月的第一天跟最后一天(time.getFullYear() < curFullYear && time.getDate() !== 1 && time.getDate() !== res) || // 选择的年等于当前年&&只能选择每个月的第一天跟最后一天&&当前月跟上一个月可以选择任意时间段(time.getFullYear() === curFullYear && time.getDate() !== 1 && time.getDate() !== res && time.getMonth() + 1 <= beforeMonth) )},onPick({maxDate, minDate }) {}},// 清空日期changePicker(e) {if(!e) {return;}let maxDate = e && e[1],minDate = e && e[0],maxSplit = maxDate.split('-'),minSplit = minDate.split('-');let maxDateObj = {year: maxSplit[0],month: maxSplit[1] < 10 ? maxSplit[1][1] * 1 - 1 : maxSplit[1] * 1 - 1,day: maxSplit[2],};let minDateObj = {year: minSplit[0],month: minSplit[1] < 10 ? minSplit[1][1] * 1 - 1 : minSplit[1] * 1 - 1,day: minSplit[2],};// console.log(e);// console.log(maxDateObj, minDateObj);let firYear = minDateObj.year;let lasYear = maxDateObj.year;maxDate = new Date(maxDateObj.year, maxDateObj.month, maxDateObj.day);minDate = new Date(minDateObj.year, minDateObj.month, minDateObj.day);let firDay = minDateObj.day; // 开始天数let lasDay = maxDateObj.day; // 结束天数// console.log('firDay', firDay);// console.log('lasDay', lasDay);// console.log('maxDate', maxDate.getMonth());// console.log('minDate', minDate.getMonth());// 1 ~ 12月 let curFullYear = new Date().getFullYear(), // 当前年份curMonth = new Date().getMonth() + 1, // 当前月份beforeMonth // 上上月份if(curMonth >= 3 && curMonth <= 12) {// 上上月份beforeMonth = curMonth - 2;}else if(curMonth === 1) {beforeMonth = 11;}else if( curMonth === 2) {beforeMonth = 12;}if(maxDate !== null && minDate !== null) {let maxMonth = maxDate.getMonth(),minMonth = minDate.getMonth()// 当前月跟上个月以外：不可跨月选择 // 当前月：6 （5、6任意选）（其余月份整月）if(curFullYear == firYear && // 同一年curFullYear == lasYear && // 同一年beforeMonth < maxMonth + 1 && beforeMonth < minMonth + 1) {// 当前月、上月 任意选// 任意选}else if(lasDay == '01') {// 结束日期必须为每个月的最后一天this.formData.dateTime = null;this.beginTime = null;this.endTime = null;return this.$modal.msg('请选择整月');}else if(firDay != '01') {// 起始日期必须为每个月的第一天this.formData.dateTime = null;this.beginTime = null;this.endTime = null;return this.$modal.msg('起始日期必须为1号');}}},
获取每个月份的最后一天
let res = getEndTime(time);// 获取当前月份的最后一天function getEndTime(time) {let year = time.getFullYear(),month = time.getMonth() + 1,monthZ = month < 10 ? ('0' + month) : month,curMonthLastData = new Date(year, monthZ, 0),curMonthLastDay = curMonthLastData.getDate(); // 当前月的最后一天return curMonthLastDay;}
【vue elementUI DatePicker 日期选择器自定义禁用状态】当前月跟上个月之外的时间只能选择整月 获取每个月份的最后一天
