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

    实现效果如下:

     

     

     

  • 相关阅读:
    纯CSS实现气泡聊天框的方法
    css实现箭头矩形流程效果
    上传文件控件的样式美化
    Input placeholder 字体颜色更改
    如何为全局所有input组件添加边框发光效果
    JavaWeb:Filter(二)
    JavaWeb:Filter
    JavaWeb:EL & JSTL
    JavaWeb:标签(二)
    JavaWeb:简单的标签
  • 原文地址:https://www.cnblogs.com/trampeagle/p/15715773.html
Copyright © 2011-2022 走看看