1.起始截止时间约束
<template>
<!-- 起始时间选择器 -->
<div >
<Form ref="formInline" :model="searchForm" :label-width="70" inline>
<Form-item label="开始日期" prop="from">
<DatePicker
v-model="searchForm.from"
@on-change="onSearchStartTimeChange"
:options="searchStartTimeOption"
type="date"
format="yyyy-MM-dd"
placeholder="请选择开始日期"
style="width: 150px;">
</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: 150px">
</DatePicker>
</Form-item>
</Form>
</div>
</template>
<script>
export default {
name: 'StartEnd',
data() {
return {
searchForm: {
from: "",
to: ""
},
}
},
computed:{
//设置不可选择的日期,option的disabledDate属性
searchStartTimeOption(){
return{
//date为从1970开始的日期
disabledDate:date=>{
let endTime = new Date(this.searchForm.to).valueOf();
//若返回值为ture 则该日期处于禁用状态
return date && date.valueOf() >endTime;
}
}
},
searchEndTimeOption(){
return{
disabledDate:date=>{
//为了让结束日期可以选择当前开始日期,则减去一天的时间
let startTime = new Date(this.searchForm.from).valueOf() -1*24*60*60*1000;
return date && date.valueOf() <startTime;
}
}
},
},
methods:{
onSearchStartTimeChange(e, type){
this.searchForm.from = e;
this.$emit('start',e);
},
onSearchEndTimeChange(e, type) {
this.searchForm.to = e;
this.$emit('end',e);
},
}
}
</script>
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;
},