1.起始截止时间约束
<Form-item label="开始日期" prop="from">
<DatePicker
v-model="searchForm.from"
@on-change="onSearchStartTimeChange"
:options="searchStartTimeOption"
type="date"
format="yyyy-MM-dd"
placeholder="请选择开始日期"
style="width: 200px;">
</DatePicker>
</Form-item>
<Form-item label="截止日期" prop="to">
<DatePicker
v-model="searchForm.to"
:options="searchEndTimeOption"
@on-change="onSearchEndTimeChange"
type="date"
format="yyyy-MM-dd"
placeholder="请选择截止日期"
style="width: 200px">
</DatePicker>
</Form-item>
data(){
return{
searchForm: {
from: "",
to: ""
},
searchStartTimeOption:{},
searchEndTimeOption:{},
}
},
methods:{
onSearchStartTimeChange(e, type){
this.searchForm.from = e;
this.searchEndTimeOption = {
disabledDate: date => {
let startTime = this.searchForm.from ? new Date(this.searchForm.from).valueOf() : '';
return date && (date.valueOf() < startTime);
}
}
},
onSearchEndTimeChange(e, type) {
this.searchForm.to = e;
let endTime = this.searchForm.to ? new Date(this.searchForm.to).valueOf() - 1 * 24 * 60 * 60 * 1000 : '';
this.searchStartTimeOption = {
disabledDate(date) {
return date && date.valueOf() > endTime;
}
}
},
}
2.时间选择限制–只能选择现在和过去
<DatePicker
v-model="platForm.contractTime"
type="date"
format="yyyy-MM-dd"
placeholder="请选择时间"
:options="options"
></DatePicker>
data(){
return{
options: {
disabledDate (date) {
return date && date.valueOf() >= Date.now();
}
},
}
}
时间格式 yyyy-mm-dd
<DatePicker type="date" format="yyyy-MM-dd" @on-change="savePublishTime" :value="saveForm.publishTime" class="search" placeholder="请选择发布时间"></DatePicker>
savePublishTime(e){
this.saveForm.publishTime = e;
},