element 日期选择器el-date-picker 月份/日期范围控制

element 日期选择器el-date-picker 月份范围控制

<template>
	<el-date-picker
		type="month"
		v-model="yearMonth"
		format="yyyy-MM"
	    value-format="yyyy-MM"
		:picker-options="pickerOptions"
	>
</template>
<script>
	export default {
	  data () {
	    return {
	      pickerOptions: {
	      // 限制时分秒
	      	selectableRange: ['12:00:00 - 23:59:59'],
	      // 限制年月日
	        disabledDate:(time)=>{  // time为el-date-picker选择器的时间
	          const date = new Date()  // 获取当前时间
	          const year = date.getFullYear() // 转化当前年度    
	          let month = date.getMonth() + 1  // 转化当前月份 需+1 
	          if (month >= 1 && month <= 9) {   // 为1-9月前加上0  比如: 03
	            month = '0' + month
	          }
	          const currentDate = year.toString() + month.toString() //  将年份和月份拼接 202110
	          const timeYear = time.getFullYear()  //  将el-date-picker选择器转化为年份
	          let timeMonth = time.getMonth() + 1    //  将el-date-picker选择器时间转化为月份
	          if (timeMonth >= 1 && timeMonth <= 9) {  // 为1-9月前加上0  比如: 03
	             timeMonth = '0' + timeMonth
	           }
	          const timeDate = timeYear.toString() + timeMonth.toString()  // 将年份和月份拼接 会自动进行循环  自动拼接el-date-picker选择器的时间 例:202101
	          /**
	          * 可以取区间值
	          * 也可以某年某月之前或者之后
	          * timeDate 选择器时间
	          * currentDate 当前年月份  202110
	          */
	          return currentDate < timeDate || currentDate > timeDate  //  将2021年10之前和2021年10月之后禁用  只可选取2021年10月  
	        }
	      },
      	}
      }
    }
</script>

限制日期

<template>
	<table>
		<tr>
          <td class="lable">
            <span class="tdred">*</span>项目开始日期：
          </td>
          <td class="value">
            <el-date-picker
              v-model="dataForm.budgetbegindate"
              type="datetime"
              :editable="false"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptionsStart">
            </el-date-picker>
          </td>
          <td class="lable">
            <span class="tdred">*</span>项目结束日期：
          </td>
          <td class="value">
            <el-date-picker
              v-model="dataForm.budgetenddate"
              type="datetime"
              :editable="false"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptionsEnd">
            </el-date-picker>
          </td>
        </tr>
	</table>
</template>
<script>
	export default {
		data () {
			return {
				pickerOptionsStart: {
			        // selectableRange: ['00:00:00 - 23:59:59'],
			        /***
			        * 开始时间不能超过结束时间
			        * 结束时间不能小于开始时间
			        **/
			        // 项目开始时间
			        disabledDate: time => {
			          if (this.dataForm.budgetenddate) {
			            return time.getTime() > new Date(this.dataForm.budgetenddate.substring(0,10)).getTime() - 86400000
			          }
			        }
			      },
			      pickerOptionsEnd: {
			        // 项目结束时间
			        disabledDate: time => {
			          if (this.dataForm.budgetbegindate) {
			              return time.getTime() < new Date(this.dataForm.budgetbegindate.substring(0,10)).getTime() - 86400000
			          }
			        }
			      },
			}
		}
	}
</script>