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),
          };
        },
  • 相关阅读:
    POJ2516 构图+k次费用流
    POJ 1511 最短路径之和(spfa或dijkstra+heap)
    windows中配置mongodb
    原型设计
    Erlang的参考资源
    用Erlang实现递归查找文件
    list相关的习题
    springmvc基础知识
    汇编实验4
    实验3 转移指令跳转原理及其简单应用编程
  • 原文地址:https://www.cnblogs.com/changyuqing/p/15014763.html
Copyright © 2011-2022 走看看