vue知識點----element UI+vue關於日期范圍選擇的操作，picker-options屬性的使用

需求場景如下：

1. 指定起止日期，后選的將會受到先選的限制
2. 不同的日期選擇器，不過也存在關聯關系

實現方法不難，利用了 change 事件，動態改變 picker-options 中的 disableDate 即可。

 


標簽中               <el-form-item label="統計起期" prop="contract_start_date" >
                            <el-date-picker
                                    v-model="formInline.contract_start_date"
                                    placeholder="選擇時間"
                                    type="date"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    :default-value="startDate"
                                    :picker-options="pickerOptionsStart" 
                                    style="width: 100%;"
                            ></el-date-picker>
                        </el-form-item>                        

picker-options="pickerOptionsStart"的設置
<el-date-picker />使用會出現起始日期和結束日期，結束日期不能早於起始日期，選擇了起始日期后，結束日期大於起始日期的不可選，置灰，
同理先選結束日期后再選起始日期，那么起始日期不能選截止日期后面的。

//設定時間

console.log("----------now-----"+now)
var startDate=new Date(Date.UTC(now.getFullYear(),Mmonth,Dday));
console.log("----------startDate-----"+startDate
---------------------------------------------------

pickerOptionsStart: {

                    disabledDate: time => {
                        let endDateVal = this.formInline.contract_end_date;
                        if (endDateVal) {
                            return time.getTime() > new Date(endDateVal).getTime(); //選則的時間
                        }
                    }
                },
//結束時間

var endDate=new Date(Date.UTC(now.getFullYear(),"11","31"));
console.log("----------endDate-----"+endDate)
this.formInline.contract_end_date = endDate ;
------------------------------------------

 pickerOptionsEnd: {

 disabledDate: time => { let beginDateVal = this.formInline.contract_start_date; if (beginDateVal) { return ( time.getTime() < new Date(beginDateVal).getTime() //return 小於今天的時間,昨天,前天 ); } } },

參考:https://www.cnblogs.com/zyz-s/p/11972599.html

 

 

atzhang