我有一个带有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;
};
});
