elementUI 日期选择器限制时间范围
(借鉴或根据自己需求修改,纯用于自己记录使用并学习)
产品需求,新建任务的时候,选择一个名称,然后返回该名称的有效日期,只能在有限日期内选择任务的时间
使用的是elementUI自带的picker-options这个属性,因为我这个是需要动态的获取名称的有效周期,所以在切换名称的时候,使用change事件调用后台的给的接口,获取到该名称的有效周期,
<el-select v-model="businessName" remote placeholder="请选择名称" @change="getDisableTime" :popper-append-to-body="false" >
<el-option v-for="item in options1" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
<el-date-picker
style="width:100%"
v-model="busTime"
type="daterange"
:editable="false"
range-separator="→"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
clearable
:picker-options="executeTimeOptions" >
</el-date-picker>
export default {
data(){
return{
minDate:'', //这两个值一定要定义
maxDate:'',
busTime:[],
executeTimeOptions:{
disabledDate:(time)=>{
if(this.minDate && this.maxDate){
// this.maxDate = new Date(this.maxDate).getTime();我是直接获取的时间戳,如果后台返回的格式不同,因为这里是对比的时间戳,所以在这里转换格式或者获取的时候转换成时间戳都可以,
return time.getTime() < Date.now() - 8.64e7 || time.getTime() > this.maxDate ||time.getTime() < this.minDate;
//这里是大于结束日期和小于开始日期,小于今天的日期都不可选择
}
}
}
}
},
methods:{
// 获取时间值
getDisableTime(){
let _this= this;
_this.busTime= [];
myAxios.get(后台给的接口),{传入选择的名称id},(res)=>{
if(res.status == 200){
//获取名称的有效期的开始时间和结束时间
_this.minDate = res.data.startTime;
_this.maxDate = res.data.endTime;
}else{
_this.minDate = '';
_this.maxDate = '';
}
})
},
}
}
二。时间选择跨度为一年:
<el-col :xs="10" :sm="8" :md="8" :lg="8" class="mt">
<el-form-item label="时间">
<el-date-picker v-model="form.date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOption" @change="getTime">
</el-date-picker>
</el-form-item>
</el-col>
pickerOption: {
disabledDate(time) {
let startyear = new Date().getFullYear() - 1
let endYear = new Date().getFullYear() + 1
let endDate = endYear + '-' + (new Date().getMonth() + 1) + '-' +
new Date().getDate()
let startDate = startyear + '-' + (new Date().getMonth() + 1) + '-' +
new Date().getDate()
let _endDate = new Date(endDate)
let _startDate = new Date(startDate)
//即大于开始时间小于结束时间
return time.getTime() > _endDate.getTime() || time.getTime() <
_startDate.getTime()
},
},
二。时间选择不超过13个月,当月算1个月(限制到去年当月的1号):
pickerOption: {
disabledDate(time) {
// let startDate = startyear + '-' + (new Date().getMonth() + 1) + '-' +
// new Date().getDate();//限制12个月,限制到天
let startyear = new Date().getFullYear() - 1
let startDate = startyear + '-' + (new Date().getMonth() + 1) + '-' +'1';//当月的1号
let _startDate = new Date(startDate);
return time.getTime() > Date.now() | time.getTime() < _startDate.getTime();
},
},