限制日期组件不能选择,可以使用提供的pickerOptions属性来进行操作
case1:如果想要单纯的限制一个日期组件的可选日期(比如截止到当前日期之后的不能选择)
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker
v-model="value1"
type="date"
@change="selectPicker"
:picker-options="pickerOptions"
placeholder="选择日期">
</el-date-picker>
</div>
data:{
return{
pickerOptions{
disabledDate:(time)=> {
return time.getTime() < Date.now()-1 * 24 * 3600 * 1000
}
}
}
},
case2:el-date-picker组件有时候会用到两个日期关联的情况,当选择前一个日期之后,再选下一个日期时,期望下一个日期在当前选的日期之前或者之后不能选,就可以使用以下方法。
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker
v-model="value1"
type="date"
@change="selectPicker"
placeholder="选择日期">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker
v-model="value2"
:picker-options="pickerOptions"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
data:{
return{
value1:'',
value2:'',
pickerOptions{
onPick:({value1,value2})=>{
this.value1=value1;
this.value2=value2;
},
disabledDate:(time)=> {
if(this.value1){
return time.getTime()>this.value2
}
}
},
method:{
selectPicker(e){
this.pickerOptions={
disabledDate:(time)=> {
if(this.value1){
return time.getTime()>this.value1
}
}
}
}
}