我有一个带有 ui-bootstrap 日期选择器的表单。我想防止日期成为过去。
我将指令的 min-date 设置为 new Date()
如下所示。这可以正确地防止在使用弹出窗口时选择过去的日期,但是我仍然可以输入过去的日期并且验证正常。
如何对输入的日期强制执行最小日期验证?
Plunkr:https://plnkr.co/edit/EHO1BG8BspNMvsoKT30l?p=preview
网址:
<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;
};
});
最佳答案
这应该可以正常工作,我在您的 Controller 中添加了 changeHandler 函数并在输入的 ng-change 上调用它。
网址:
<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;
};
});
关于angularjs - 输入时未验证 Angular ui-bootstrap datepicker 思维,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34745012/