【问题标题】:disable future dates in angular-bootstrap-datetimepicker在 angular-bootstrap-datetimepicker 中禁用未来日期
【发布时间】:2015-11-16 10:27:32
【问题描述】:

我无法禁用未来日期。

使用angular-bootstrap-datetimepicker

<datetimepicker data-ng-model="user.join_date" data-datetimepicker-config="{ startView:'day', minView:'day' }"    />

尝试在指令的DateObject() 内添加this.future = false;,但没有成功...

编辑

发现我可以使用before-render,然后将selectable=false; 用于将来的日期。

正在尝试实施。

感谢您的帮助!

【问题讨论】:

    标签: javascript angularjs datetimepicker bootstrap-datetimepicker


    【解决方案1】:

    完成了。

    使用 beforeRender 函数并禁用将来日期比较 utcDateValue 与当前日期。

    代码如下:

    $scope.beforeRender = function ($dates) {
        /* disable future dates */
        for(var i=0; i<$dates.length;i++) {
           if(new Date().getTime() < $dates[i].utcDateValue) {
              $dates[i].selectable = false;
           }
        }                
    };
    

    也添加了data-before-render="beforeRender($dates)"

    <datetimepicker data-ng-model="user.join_date" data-datetimepicker-config="{ startView:'day', minView:'day' }" data-before-render="beforeRender($dates)" />
    

    【讨论】:

      【解决方案2】:

      只允许未来

      我需要稍微复杂一点的完全相反的要求,只允许您需要考虑参数 $view 的未来日期

      Javascript:

      $scope.futureOnlyBeforeRender = function($view, $dates) {
      // $view values: year, month, day, hour, minute
      var currentDate = new Date();
      // set the current date according to the view
      switch($view){
          case 'year': currentDate.setYear(currentDate.getYear() - 1); break;
          case 'month': currentDate.setMonth(currentDate.getMonth() - 1); break;
          case 'day': currentDate.setDate(currentDate.getDate() - 1); break;
          case 'hour': currentDate.setHours(currentDate.getHours() - 1); break;
          case 'minute': currentDate.setMinutes(currentDate.getMinutes() - 1); break;
      }
      // apply ot the dates
      $dates.filter(function (date) {
          return date.utcDateValue < currentDate.getTime();
      }).forEach(function (date) {
          date.selectable = false;
      })
      

      };

      HTML:

      data-before-render="futureOnlyBeforeRender($view, $dates)"
      

      【讨论】:

        猜你喜欢
        • 2019-04-18
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多