element 时间选择器开始时间和结束时间范围控制

最新推荐文章于 2024-06-03 16:14:18 发布

Hi_Dh

最新推荐文章于 2024-06-03 16:14:18 发布

阅读量2.4k

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_52040333/article/details/120993408

版权

方法1：

      <el-time-picker
                v-model="Form.preClockOffTime"
                class="date-box"
                format="HH:mm"
                value-format="HH:mm"
                :picker-options="{
                  selectableRange:`00:00:00 -${Form.nextClockInTime ? aForm.nextClockInTime+':00' : '23:59:00'}`
                }">
       </el-time-picker>
       <el-time-picker
                v-model="Form.nextClockInTime"
                format="HH:mm"
                value-format="HH:mm"
                :picker-options="{
                  selectableRange: `${Form.preClockOffTime ? Form.preClockOffTime+':00' : '00:00:00'}-23:59:00`
                }">
       </el-time-picker>

方法2：

<el-date-picker type="date" placeholder="选择开始日期" 
   v-model="seachObj.beginTime" style="width: 40%;" 
   :picker-options="startDatePicker"
   @change="dateChangeBeginTime">
</el-date-picker>
至
<el-date-picker type="date" placeholder="选择结束日期" 
    v-model="seachObj.endTime" style="width: 40%;" 
    :picker-options="endDatePicker" 
    @change="dateChangeEndTime">
</el-date-picker>

data(){
    startDatePicker:this.beginDate(),
    endDatePicker:this.processDate(),
},
 
methods:{
    beginDate(){//提出开始时间必须小于今天
        let self = this
        return {
            disabledDate(time){
                return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
            }
        }
    },
    processDate(){//提出结束时间必须大于提出开始时间
        let self = this
        return {
            disabledDate(time){
                if(self.seachObj.beginTime){
                    return new Date(self.seachObj.beginTime).getTime() > time.getTime()
                }else{
                    return time.getTime() > Date.now()
                    //开始时间不选时，结束时间最大值小于等于当天
                }
            }
        }
    },
 
}