element-ui 日期區間選擇控件 根據所選月份 日期區間 同一個月

背景：
在一個管理後臺中，需要根據選擇的月份，來聯動控制 時間區間 的顯示（並且在月份選擇之前，日期範圍不可選）
示例圖：

1、初始化頁面
2、選擇年月

3、選擇日期範圍

代碼：
1、組件 => element-ui

//
<div class="input_div">
    <span>申報年月</span>
    <el-date-picker
    type="month"
    placeholder="選擇申報年月"
    v-model="applyMonth"
    @change="changeApplyMonth"
    >
    </el-date-picker>
</div>
<div class="input_div">
    <span>所屬時段</span>
    <el-date-picker
    v-model="applyDate"
    type="daterange"
    range-separator="至"
    start-placeholder="開始日期"
    end-placeholder="結束日期"
    :default-value="defaultVal"
    :picker-options="pickerOptions"
    @change="changeApplyDate"
    :disabled="applyMonth==''"
    >
    </el-date-picker>
</div>


data(){
	applyMonth:"",
	applyDate:"",
	defaultVal:"",
	defaultValYear:"",
	defaultValMon:"",
	/*
		關鍵代碼是這裏*********
		注意要用箭頭函數，否則會報錯
	*/
	pickerOptions:{
	    disabledDate: (time)=>{
	        return (this.defaultVal && new Date(this.defaultVal).getMonth()!== time.getMonth())
	    }
	},
	/*
		關鍵代碼是這裏*********
	*/
},

methods:{
	//修改月份
	changeApplyMonth(val){
	    this.defaultVal = val.getFullYear()+"-"+(val.getMonth()+1)+"-"+"1";
	    this.defaultValYear = val.getFullYear();
	    this.defaultValMon= val.getMonth()+1;
	    console.log(this.defaultVal);
	},
	//修改日期
	changeApplyDate(val){
	    let val0 = val[0];
	    let val1 = val[1];
	    let startDate = val0.getFullYear() + "-" + (val0.getMonth()+1) + "-" + val0.getDate();
	    console.log(startDate);
	    let endDate = val1.getFullYear() + "-" + (val1.getMonth()+1) + "-" + val1.getDate();
	    console.log(startDate,endDate);
	},
}

ps：樣式就不貼了，每個項目的樣式需求不一樣，日期標籤外面的div殼子是我自己包的，可以不粘。