角度ui-bootstrap datepickerのマインドは、入力時に検証されません

Question

私はui-bootstrap datepickerを持つフォームを持っています。私は過去の日付を避けたい。

ディレクティブの最小日付の設定を、以下に示すようにnew Date()に設定しました。これにより、ポップアップを使用するときの過去の日付の選択が正しく防止されますが、過去に日付を入力することができ、これによりOKが検証されます。

入力された日付に対して最小日付検証を実施するにはどうすればよいですか？

Plunkr：

<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：https://plnkr.co/edit/EHO1BG8BspNMvsoKT30l?p=preview

HTML形式これが正しく動作するはず

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; 
    }; 
}); 

Answer 1

、私はあなたのコントローラでchangeHandler機能を追加し、それを求めています入力の変更。

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

}); 

Answer 2

あなたは自分のdateOptionsにMinDateプロパティを含める必要があり、オブジェクトん：HTML

を変更する

app.controller('MainCtrl', function($scope) { 
    $scope.dateOptions = { 
    formatYear: 'yy', 
    startingDay: 1, 
    minDate: new Date() 
    }; 
}); 

不要