zoukankan      html  css  js  c++  java
  • antVue range-picker 限制当前时间之前的时间不可选择

    <a-range-picker
                            :format="dateFormat"
                            size="small"
                            :showToday="true"
                            class="org-rang-Time"
                            allowClear
                            :show-time="{hideDisabledOptions:true}"
                            :disabled-date="disabledDate"
                            :disabled-time="disabledRangeTime"
                            v-decorator="['orgStartEndTime',validatorRules.orgStartEndTime]"
                            :placeholder="['开始时间', '结束时间']"
                            @change="onTimeChange"/>

    两个知识点:1.时间重置;2.时间限制

    onTimeChange(value, dateString){//任务起止时间设置
             if(value.length>0){
               this.orgStartEndTime = value;
               this.beginTime = dateString[0];
               this.endTime  =dateString[1];
             }else{
              //  时间重置
               this.orgStartEndTime = moment([]).format('YYYY-MM-DD HH:mm:ss');
               this.beginTime ='';
               this.endTime  ='';
             }
          },
          range(start, end) {
            const result = [];
            for (let i = start; i < end; i++) {
              result.push(i);
            }
            return result;
          },
          disabledDate(current) {
          //  禁用当前时间之前的时间
            return current < moment().startOf('day');
          },
        disabledRangeTime(_, type) {
          if (type === 'start') {
            return {
              disabledHours: () => this.range(0, moment().hour()),
              disabledMinutes: () => this.range(0, moment().minute()),
              disabledSeconds: () => this.range(0, moment().second())
            };
          }
          return {
            // disabledHours: () => this.range(0, 60).splice(20, 4),
            // disabledMinutes: () => this.range(0, 30),
            // disabledSeconds: () => this.range(0, 60),
          };
        },
  • 相关阅读:
    10_14 drf接口框架。
    10_11 vue路由跳转
    10_10,vue项目环境搭建
    10_9vue循环指令与组件
    10_8 vue的导入
    9_25中间键与登录认证
    块级元素居中问题
    2019牛客多校第五场 F maximum clique 1 状压dp+最大独立集
    2019牛客多校第五场C generator 2 hash,bsgs模板
    2019牛客多校第五场B generator 十进制快速幂
  • 原文地址:https://www.cnblogs.com/changyuqing/p/15014763.html
Copyright © 2011-2022 走看看