• 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
            }
    },

    实现效果如下:

     

     

     

  • 相关阅读:
    [knowledge][perl][pcre][sed] sed / PCRE 语法/正则表达式
    [knowledge][模式匹配] 字符匹配/模式匹配 正则表达式 自动机
    [daily] 内存越界的分析与定位
    [DPI] Cisco Application Visibility and Control
    [bigdata] palantir
    [daily][nfs] nfs客户端设置
    [knowledge][ETA] Encrypted Traffic Analytics
    [tcpreplay] tcpreplay高级用法--使用tcpreplay-edit进行循环动态发包
    [redhat][centos] 让不同小版本的CentOS7使用相同的内核版本
    [grub2] grub2修改启动顺序
  • 原文地址:https://www.cnblogs.com/trampeagle/p/15715773.html
Copyright © 2020-2023  润新知