我们常常用到elementUI中的el-date-picker组件,在组件中有个picker-options属性可对时间的选择进行限制。
1.不可选择今日之后的时间
<el-date-picker
style="width: 140px"
v-model="billMonthDate"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
type="daterange"
:picker-options="billPickerOptions"
@change="changeMonth"
:clearable="false"
placeholder="选择时间">
</el-date-picker>
/*
*将billPickerOptions下的disableDate做如下限制
*8.64e7 = 1*24*60*60*1000 = 8.64*10^7
*/
data() {
return {
billPickerOptions: {
disabledDate(time) {
return time.getTime() >= (Date.now()-8.64e7);
}
},
};
},
2.不可选择当月时间
<el-date-picker
style="width: 140px"
v-model="billMonthDate"
format="yyyy-MM"
value-format="yyyy-MM"
type="month"
:picker-options="billPickerOptions"
@change="changeMonth"
:clearable="false"
placeholder="选择月">
</el-date-picker>
//减去当前月的日期
billPickerOptions:{
disabledDate(time) {
let t =new Date().getDate();
return time.getTime() > Date.now() - 8.64e7*t;
}
},