el-datepicker 限制时间规则 packer-op

2022-06-19  本文已影响0人  学无止境_cheer_up
<template>
<el-date-picker
    :picker-options="startTimeFn"
     v-model="startTime"
     type="datetime"
     placeholder="请输入开始时间"
</el-date-picker>
<el-date-picker
     :picker-options="endTimeFn"
     v-model="endTime"
     type="datetime"
     placeholder="请输入结束时间"
</el-date-picker>
</template>
<script>
export default{
data () {
return{
     startTime:'' ",
      endTime:" " , 
 }
},
computed:{
// 开始时间限制(开始时间不能晚于结束时间 并且两个时间差5天)
startTimeFn () {
       const that = this
       return {
            disabledDate(time:string|number){
       if(that.endTime){
       return (new Date(that.endTime).getTime() - 86400000 *5 < 
       time.getTime())
}
}
} 
}
// 限制结束时间(结束时间不能早于开始时间,并且两个时间相差5天)
endTimeFn () {
       const that = this 
       return {
           disabledDate(time:any) {
              if(that.start) {
                     return (new Date(that.start).getTime() + 86400000 * 5 > 
                     time.getTime())
      } else if(that.startTime){
     return(new Date(that.startTime).getTime() < time.getTime())
}
}
}
}
}
}
</script>

上一篇 下一篇

猜你喜欢

热点阅读