el-picker日期选择组件根据条件动态限制选择日期范围

el-picker日期选择组件根据条件动态限制选择日期范围，最近刚好有项目需求要做动态限制日期选择范围，话不多说直接看效果和代码吧！又一个地方需要注意一下：选择日期区间时需要限制到最小时间的前一天去才行，不然最小时间那一天选择不了，最开始这里我设置的是当年的一月一号，这样写的话页面上一月没有被禁用但是选择不会生效。我这里的需求是根据选择年去控制选择单月和月区间的范围。

        <template>
    <div class="content">
        <div>
              <el-form 
                    ref="scaechDom" 
                    :rules="rules" 
                    :model="scaechDom" 
                    label-suffix=":" 
                    label-width="110px"
                    class="bgd query-form_content"
              >
                   <el-row>
                           <el-col :span="12">
                                  <el-form-item prop="querytype" label="选择类型">
                                        <el-select v-model="scaechDom.querytype" clearable placeholder="请选择类型..." @change="queryTypeChange">
                                               <el-option
                                                    v-for="item in queryTypeList"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value"
                                               >
                                               </el-option>
                                        </el-select>
                                  </el-form-item>
                           </el-col>
                   </el-row>
                   <el-row>
                           <el-col :span="10">
                                  <el-form-item prop="yearData" label="选择年">
                                        <el-date-picker
                                           v-model="scaechDom.yearData"
                                           format="yyyy"
                                           value-format="yyyy"
                                           type="year"
                                           placeholder="选择年..."
                                           :picker-options="startYear"
                                           @change="yearChange"
                                        >
                                        </el-date-picker>
                                  </el-form-item>
                           </el-col>
                   </el-row>
                   <el-row>
                           <el-col :span="10">
                                  <el-form-item prop="monthsData" label="选择月区间">
                                        <el-date-picker
                                           v-model="scaechDom.monthsData"
                                           format="yyyy-MM"
                                           value-format="yyyy-MM"
                                           type="monthrange"
                                           range-separator="至"
                                           start-placeholde="开始月份"
                                           end-placeholde="结束月份"
                                           :picker-options="pickerMonth"
                                        >
                                        </el-date-picker>
                                  </el-form-item>
                           </el-col>
                   </el-row>
                   <el-row>
                           <el-col :span="10">
                                  <el-form-item prop="monthData" label="选择单月">
                                        <el-date-picker
                                           v-model="scaechDom.monthData"
                                           format="yyyy-MM"
                                           value-format="yyyy-MM"
                                           type="month"
                                           placeholder="选择月..."
                                           :picker-options="startmonth"
                                        >
                                        </el-date-picker>
                                  </el-form-item>
                           </el-col>
                   </el-row>
              </el-form>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            queryTypeList:[
                {label:'科目余额',value:'subjectRemain'},
                {label:'债权债务',value:'claimOwing'}
            ],
            rules:{
                querytype:[
                    {required:true,message:'请选择类型',trigger:'blur'}
                ],
                yearData:[
                    {required:true,message:'请选择年时间',trigger:'blur'}
                ],
                monthData:[
                    {required:true,message:'请选择单月时间',trigger:'blur'}
                ]
            },
            scaechDom:{
                    querytype:'',
                    monthData:'',
                    monthsData:'',
                    yearData:''
            },
            startmonth:{
                disabledDate:time=>{
                     let year=new Date().getFullYear()
                     let nowDate=''
                     let myDate=new Date()
                     let myYear=myDate.getFullYear()
                     let myMonth= new Date().getMonth()+1
                     let myToday=myDate.getDate()
                     myMonth=myMonth>9?myMonth:'0'+myMonth
                     myToday=myToday>9?myToday:'0'+myToday
                     nowDate=myYear+'-'+myMonth+'-'+myToday
                     let start=year+'-'+'01'+'-'+'01'
                     let end=nowDate
                     return time.getTime()<new Date(start).getTime()||time.getTime()>new Date(end).getTime()
                }
            },
            pickerMonth:{
                disabledDate:time=>{
                     let year=new Date().getFullYear()-1
                     let nowDate=''
                     let myDate=new Date()
                     let myYear=myDate.getFullYear()
                     let myMonth= new Date().getMonth()+1
                     let myToday=myDate.getDate()
                     myMonth=myMonth>9?myMonth:'0'+myMonth
                     myToday=myToday>9?myToday:'0'+myToday
                     nowDate=myYear+'-'+myMonth+'-'+myToday
                     let start=year+'-'+'12'+'-'+'31'  
                     let end=nowDate
                     return time.getTime()<new Date(start).getTime()||time.getTime()>new Date(end).getTime()
                }
            },
            startYear:{
                disabledDate:time=>{
                    let year=new Date().getFullYear()
                    return(
                        time.getTime()>new Date(parseInt(year)-parseInt(0)+'-12-31').getTime()
                    )
                }
            },
            exportExcelList:[],
            excelName:'',
            querytypeDisabled:false,
            querytypeLoading:false
        }
    },
    methods:{
        yearChange(val){
                     let year=new Date().getFullYear()
                     let nowDate=''
                     let myDate=new Date()
                     let myYear=myDate.getFullYear()
                     let myMonth= new Date().getMonth()+1
                     let myToday=myDate.getDate()
                     myMonth=myMonth>9?myMonth:'0'+myMonth
                     myToday=myToday>9?myToday:'0'+myToday
                     nowDate=myYear+'-'+myMonth+'-'+myToday
                     if(val<year){
                             this.startmonth={
                                   disabledDate(time){
                                         let start=val+'-'+'01'+'-'+'01'
                                         let end=val+'-'+'12'+'-'+'31'
                                         return time.getTime()<new Date(start).getTime()||time.getTime()>new Date(end).getTime()
                                   }
                             }
                             this.pickerMonth={
                                   disabledDate(time){
                                         let yearVal=val-1
                                         let start=yearVal+'-'+'12'+'-'+'31' // 选择日期区间时需要限制到最小时间的前一天去才行，不然最小时间那一天选择不了，最开始这里我设置的是当年的一月一号，这样写的话页面上一月没有被禁用但是选择不会生效
                                         let end=val+'-'+'12'+'-'+'31' 
                                         return time.getTime()<new Date(start).getTime()||time.getTime()>new Date(end).getTime()
                                   }
                             }
                     }else{
                            this.startmonth={
                                   disabledDate(time){
                                         let start=val+'-'+'01'+'-'+'01'
                                         let end=nowDate
                                         return time.getTime()<new Date(start).getTime()||time.getTime()>new Date(end).getTime()
                                   }
                             }
                             this.pickerMonth={
                                   disabledDate(time){
                                         let yearVal=val-1
                                         let start=yearVal+'-'+'12'+'-'+'31'
                                         let end=nowDate
                                         return time.getTime()<new Date(start).getTime()||time.getTime()>new Date(end).getTime()
                                   }
                             }
                             this.$set(this.scaechDom,'monthData','')
                             this.$set(this.scaechDom,'monthsData','')
                     }
        },
      
    }

}
</script>
<style>
       .content{
            height: 80vh;
            margin-left:30%;
            margin-top:5% ;
       }
    
</style>