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

});

問題は、5 番目のシナリオを有効にする方法です。

4

0 に答える 0