zoukankan      html  css  js  c++  java
  • antdvue时间选择范围TimePicker 的使用,实现对应时间的禁用

      如题,需求:开始时间必须小于结束时间,结束时间必须大于开始时间,如果先选择了开始时间,则结束时间面板中小于开始时间的时、分、秒处于禁用状态,不可选择;如果先选择了结束时间,则开始时间面板中大于结束时间的时、分、秒处于禁用状态。解决方案如下:

    HTML代码:

    <a-time-picker v-model="form.startTime" style=" 110px;margin-left: 5px"
      :disabledHours="disabledStartHours"
      :disabledMinutes="disabledStar"
      :disabledSeconds="disabledStartSeconds"
      @change="onChangeStartTime" />
    <span style="margin: 0 5px">~</span>
    <a-time-picker v-model="form.endTime" style=" 110px;"
      :disabledHours="disabledEndHours"
      :disabledMinutes="disabledEndMinutes"
      :disabledSeconds="disabledEndSeconds" 
      @change="onChangeEndTime" />
                         

    JS代码:

    //获取不可选择的小时
    disabledStartHours(){
            if(this.form.endTime){
              let hours = [];
              let hour = moment(this.form.endTime).hour();
              for (let i = hour+1; i < 24; i++) {
                hours.push(i);
              }
              return hours
            }
    },
    //获取不可选择的分钟
    disabledStartMinutes(selectedHour){
            if(this.form.endTime){
              let minutes = [];
              let hour = moment(this.form.endTime).hour();
              let minute = moment(this.form.endTime).minute();
              if(selectedHour===hour){
                for (let i = minute+1; i < 60; i++) {
                  minutes.push(i);
                }
             }
              return minutes
            }
    },
    //获取不可选择的秒
    disabledStartSeconds(selectedHour, selectedMinute){
            if(this.form.endTime){
              let seconds = [];
              let hour = moment(this.form.endTime).hour();
              let minute = moment(this.form.endTime).minute();
              let second = moment(this.form.endTime).second();
              if(selectedHour===hour&&selectedMinute ===minute){
                for (let i = second+1; i < 60; i++) {
                   seconds.push(i);
                }
              }
              return seconds
            }
    },
    //获取不可选择的小时
    disabledEndHours(){
            if(this.form.startTime){
              let hours = [];
              let hour = moment(this.form.startTime).hour();
              for (let i = 0; i < hour; i++) {
                hours.push(i);
              }
              return hours
            }
    },
    //获取不可选择的分钟
    disabledEndMinutes(selectedHour){
            if(this.form.startTime){
              let minutes = [];
              let hour = moment(this.form.startTime).hour();
              let minute = moment(this.form.startTime).minute();
              if(selectedHour===hour){
                for (let i = 0; i < minute; i++) {
                  minutes.push(i);
                }
              }
              return minutes
            }
    },
    //获取不可选择的秒
    disabledEndSeconds(selectedHour, selectedMinute){
            if(this.form.startTime){
              let seconds = [];
              let hour = moment(this.form.startTime).hour();
              let minute = moment(this.form.startTime).minute();
              let second = moment(this.form.startTime).second();
              if(selectedHour===hour&&selectedMinute ===minute){
                for (let i = 0; i < second; i++) {
                   seconds.push(i);
                }
              }
              return seconds
            }
    },

    实现效果如下:

     

     

     

  • 相关阅读:
    JQuery中jqGrid分页实现
    给jqGrid数据行添加修改和删除操作链接(之一)
    jquery 更新了数据库后局部刷新
    JS图片另存为(转)
    RFID系统集成公司
    R语言数据文件读写
    matlab当前目录下的相对路径
    转载:勤奋在科研中究竟有多重要?
    大型网站的架构设计问题大型高并发高负载网站的系统架构
    大型网站运维探讨和心得
  • 原文地址:https://www.cnblogs.com/trampeagle/p/15715773.html
Copyright © 2011-2022 走看看