angolare ui-bootstrap datepicker mindate non convalidato quando digitato in

Question

Ho un modulo con un datepicker ui-bootstrap. Voglio impedire che la data sia nel passato.

Ho impostato l'impostazione della data minima sulla direttiva su new Date() come illustrato di seguito. Ciò impedisce correttamente la selezione delle date in passato quando si utilizza il popup, tuttavia posso ancora digitare una data nel passato e questo conferma OK.

Come si può applicare la convalida della data minima alle date digitate?

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

Answer 1

Questo dovrebbe funzionare correttamente, ho aggiunto la funzione changeHandler nel controller e lo ha chiamato su ng-change of input.

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

Hai solo bisogno di includere nel vostro MinDate dateOptions oggetto:

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

Non c'è bisogno di cambiare HTML