angularjs – angular ui-bootstrap datepicker mindate在输入时

发布时间：2020-12-17 10:21:02 所属栏目：安全来源：网络整理

导读：我有一个带有ui-bootstrap datepicker的表单.我想阻止这个日期过去. 我将指令的最小日期设置设置为新的Date(),如下所示.这样可以正确地防止在使用弹出窗口时选择过去的日期,但是我仍然可以输入过去的日期,这样就可以确认. 如何在输入的日期强制执行最小日期

我有一个带有ui-bootstrap datepicker的表单.我想阻止这个日期过去.

我将指令的最小日期设置设置为新的Date(),如下所示.这样可以正确地防止在使用弹出窗口时选择过去的日期,但是我仍然可以输入过去的日期,这样就可以确认.

如何在输入的日期强制执行最小日期验证？

普兰克：https://plnkr.co/edit/EHO1BG8BspNMvsoKT30l?p=preview

HTML：

<div class="input-group">
    <input type="text" 
           class="form-control" 
           uib-datepicker-popup="{{format}}" 
           ng-model="dt" 
           is-open="popup1.opened" 
           min-date="minDate" 
           datepicker-options="dateOptions" 
           ng-required="true" 
           close-text="Close"
           alt-input-formats="altInputFormats"
           name="dt"/>
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open1()">
            <i class="glyphicon glyphicon-calendar"></i>
        </button>
    </span>
</div>

JS：

app.controller('MainCtrl',function($scope) {
  $scope.dt = new Date();
  $scope.minDate = new Date();
  $scope.format = "dd/MM/yyyy";
  $scope.altInputFormats = ['d!/M!/yyyy'];
  $scope.dateOptions = {
    formatYear: 'yy',startingDay: 1
  };

  $scope.popup1 = {
    opened: false
  };

  $scope.open1 = function() {
    $scope.popup1.opened = true;
  };
});

这应该正常工作,我已经在你的控制器中添加了changeHandler函数,并在输入的ng-change上调用它.

HTML：

<div class="input-group">
      <input type="text" 
             class="form-control" 
             uib-datepicker-popup="{{format}}" 
             ng-model="dt" 
             is-open="popup1.opened" 
             min-date="minDate" 
             datepicker-options="dateOptions" 
             ng-required="true" 
             close-text="Close"
             alt-input-formats="altInputFormats"
             ng-change="changeHandler()"
             name="dt"/>
      <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open1()">
          <i class="glyphicon glyphicon-calendar"></i>
        </button>
      </span>
</div>

JS：

app.controller('MainCtrl',function($scope) {
  $scope.dt = new Date();
  $scope.minDate = new Date();
  $scope.format = "dd/MM/yyyy";
  $scope.altInputFormats = ['d!/M!/yyyy'];
  $scope.dateOptions = {
     formatYear: 'yy',startingDay: 1
  };

  $scope.popup1 = {
     opened: false
  };

  $scope.changeHandler = function () {
    $scope.dateForm.dt.$setValidity('$valid',$scope.dt.getTime() >= $scope.minDate.getTime());
  }

  $scope.open1 = function() {
     $scope.popup1.opened = true;
  };

 });

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!