Question

全部，

我需要在Angular js Bootstrap DatePicker上实现验证。它适用于以下场景

页面未加载验证
onChange日期文本框，它会检查空白和无效的日期格式
从日期选择器日历中选择有效日期后，它会删除上述情况no：2中提到的错误消息。
在文本框中输入无效日期时会抛出“无效的日期格式”。

但是对于以下情况，它不起作用。

当输入有效日期时，它仍然显示错误消息“无效的日期格式”

这是我的代码段

<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div ng-controller="DatepickerDemoCtrl">
        <pre>Date output: <em>{{dt}}</em></pre>
        <form id="main-form" name="peopleForm" novalidate>
            <div class="row">
                <div class="col-md-6">
                    <p class="form-group">
                        
                        <div ng-class="{ 'has-error': peopleForm.txtGroupExpirationDate.$invalid && peopleForm.txtGroupExpirationDate.$dirty }" class="text-right">
                            <input id="txtGroupExpirationDate" name="txtGroupExpirationDate"
                                   type="date"
                                   class="form-control"
                                   ng-model="dt"
                                   datepicker-popup="MM-dd-yyyy"
                                   is-open="false"
                                   ng-required="true" />
                            <input type="hidden" datepicker-popup="yyyy-MM-dd" ng-model="dt" is-open="opened" ng-required="true" close-text="Close" />
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                            </span>
                            <span class="help-block" ng-show="peopleForm.txtGroupExpirationDate.$error.required && peopleForm.txtGroupExpirationDate.$dirty">
                                Expiration Date can not be empty
                            </span>
                            <span class="help-block" ng-show="peopleForm.txtGroupExpirationDate.$invalid  && peopleForm.txtGroupExpirationDate.$dirty ">
                                Invalid date format
                            </span>
                        </div>
                    </p>
                </div>
            </div>
        </form>
    </div>
</body>
</html>

这里是Example.js

angular.module('ui.bootstrap.demo',['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl',function ($scope) {
    $scope.dt = null;
    $scope.open = function ($event) {
        $event.preventDefault();
        $event.stopPropagation();

        $scope.opened = true;
        $scope.groupExpirationDate = null;
        
        console.log($scope.dt);
    };

});

所以问题是如何启用第五种情况？

验证Angular JS bootstrap DatePicker

0 个答案: