1

全部，

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

  1. 页面加载时没有验证

  2. onChange日期文本框检查空和无效的日期格式

  3. 从日期选择器日历中选择有效日期后，它会删除上述场景号中提到的错误消息：2。

  4. 在文本框中输入无效日期时，它会抛出“无效日期格式”。

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

  1. 输入有效日期时仍显示错误消息“日期格式无效”

这是我的代码片段

<!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);
    };

});

那么问题是如何启用第五种场景？

4

0 回答 0