Question

我有一个AngularJS应用程序，我使用HTML5输入类型日期控件。我想验证控件是否仅限制在今天之前的日期（包括今天）。

我尝试max={{new Date()}}值并尝试设置，但似乎无效。

请建议。

Answer 1

最好的方法是创建简单的专用验证指令，该指令可以将验证状态正确地添加到输入和父表单中：

＆＃13;

angular.module('demo', [])
.controller('main', function($scope) {
    $scope.startDate = new Date('2015-12-30');
})
.directive('minDate', function() {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModelController) {
            
            var minDate = scope.$eval(attrs.minDate) || new Date(new Date().setHours(0, 0, 0, 0));
            
            ngModelController.$validators.minDate = function(value) {
                return value >= minDate;
            };
        }
    };
});

＆＃13;

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>

<div ng-app="demo" ng-controller="main">
    
    <form name="testForm">
        <input type="date" name="date" ng-model="date" required min-date="startDate" />
    </form>
    
    <div ng-if="testForm.date.$error.minDate">Select date after {{ startDate | date:'MMMM dd, yyyy' }}.</div>
</div>

＆＃13;

该指令也可以轻松重用。假设您希望今天只使用min-date

作为最小日期

<input type="date" name="date" ng-model="date" min-date />

但是，您可以使用可以从控制器传递的任意日期：

<input type="date" name="date" ng-model="date" min-date="startDate" />

在控制器中你可以拥有

$scope.startDate = new Date('2015-12-30');

Answer 2

Firefox目前不支持type =＆＃34; date＆＃34;，会将所有值转换为字符串。既然你（正确地）希望date是一个真正的Date对象而不是一个字符串，我认为最好的选择是创建另一个变量，例如dateString，然后链接这两个变量：

<input type="date" ng-model="dateString" />
function MainCtrl($scope, dateFilter) {
    $scope.date = new Date();

    $scope.$watch('date', function (date)
    {
        $scope.dateString = dateFilter(date, 'yyyy-MM-dd');
    });

    $scope.$watch('dateString', function (dateString)
    {
        $scope.date = new Date(dateString);
    });
}

参见Fidler演示： Demo Link 实际结构仅用于演示目的。你最好创建自己的指令，尤其是为了：

AngularJS验证HTML5输入日期

2 个答案: