标签：时间 begin disable date line www get ons html
需求场景如下：
实现方法不难，利用了 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
vue知识点----element UI+vue关于日期范围选择的操作，picker-options属性的使用
标签：时间 begin disable date line www get ons html
原文地址：https://www.cnblogs.com/zytcomeon/p/13126493.html
