angularJS中的日期选择器验证不起作用

Question

我正在尝试对我的日期时间选择器进行验证。我在 Angular 局部视图中有一个“从”日期选择器和一个“到”日期选择器。如果选择了过去的日期，我希望“开始”日期选择器显示错误消息，如果选择的日期早于“开始”日期，则“结束”日期选择器应该显示错误消息。错误消息应该出现在选择日期时。

我的 HTML 是：

<div>
    <form id="edit-profile" novalidate name="editReservationForm" autocomplete="off" class="form-horizontal">
        <fieldset>
            <div class="control-group">
                <label class="control-label" for="reservation.reservedFrom">Reserved From<sup>*</sup></label>
                <div class="controls input-group date" data-provide="datepicker">
                    <input type="text" class="span4" style="width:150px" name="reservedFrom" placeholder="Reserved From" ng-model="reservation.reservedFrom"
                           validator="required" required-error-message="Date is required" valid-method="watch" id="startDate" />
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-th"></span>
                    </div>

                </div> <!-- /controls -->
            </div> <!-- /control-group -->

            <div class="control-group">
                <label class="control-label" for="reservation.reservedTill">Reserved Till<sup>*</sup></label>
                <div class="controls input-group date" data-provide="datepicker">
                    <input type="text" style="width:150px" class="span4" name="reservedTill" placeholder="Reserved Till" ng-model="reservation.reservedTill"
                           validator="required" required-error-message="Date is required" valid-method="checkErr" id="endDate" ng-change='checkErr()' />
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-th"></span>
                    </div>
                    <span>{{errMessage}}</span>

                </div> <!-- /controls -->
            </div> <!-- /control-group -->
        </fieldset>
    </form>

</div>

控制器：

myApp.controller('editReservationController', ['$scope', '$filter', 'reservationResolved', 'pocResolved', 'accountResolved', 'reservationServices', '$location', '$state',
    function ($scope, $filter, reservationResolved, pocResolved, accountResolved, reservationServices, $location, $state) {
        $scope.reservation = new Object();
        $scope.accounts = accountResolved.data;
        $scope.pocs = pocResolved.data;
        $scope.reservation.employee = reservationResolved.data;



        $scope.updateReservation = function () {
            if ($scope.editReservationForm.$valid) {

                //TODO: fix it properly
                $scope.reservation.reservedTill = '';
                $scope.reservation.reservedFrom = '';

                $scope.reservation.reservedFrom = $('#startDate').val();
                $scope.reservation.reservedTill = $('#endDate').val();

               reservationServices.updateReservation($scope.reservation).then(function (result) {
                        $scope.data = result.data;
                        if (!result.data.error) {
                            $state.transitionTo('employeeTalentPool', {
                                id: $state.params.id
                            });
                        }
                    });

            }

        };



        $scope.cancel = function () {
            $location.path("/reservations");
        };
        $scope.checkErr = function () {
            var startDate = new Date($scope.reservation.reservedFrom),
            endDate = new date($scope.reservation.reservedTill);
            $scope.errMessage = '';


            if (startDate < new Date()) {
                $scope.errMessage = 'Start Date should be greater than or equal today';
                return false;
            }
            if (new Date(endDate) < new Date()) {
                $scope.errMessage = 'End Date should be greater than or equal today';
                return false;
            }
            if (endDate < startDate) {
                $scope.errorMsg = "End must be after start";
                return false;
            }
            return true;
        };
    }]);

我对 Angular 完全陌生，我正在尝试通过做项目来理解它。任何人都可以检查并提供解决方案吗？

提前谢谢...

Answer 1

一种不同的方法，不显示任何错误消息并满足问题陈述中提到的选择标准

这里是工作解决方案的plunker，与您的实现略有不同，我在此示例中使用了引导 datepicker，它与 datetimepicker 几乎相似。希望这能给你一个理解。

在控制器中，我们可以控制from 和to 日期应在其相应选择中禁用的时间和对象。使用 datepicker 提供的minDate，我们可以将 To date 字段的 min date 更改为 From date。

通过这样做，我们可以消除错误消息的显示，这也将满足您选择开始和结束日期的标准。

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function($scope) {

    $scope.datePicker = {};
    $scope.start = new Date();
    $scope.end = new Date();

    $scope.datePicker.minStartDate = new Date();
    // $scope.datePicker.maxStartDate = $scope.end; 
    $scope.datePicker.minEndDate = $scope.start;
    //   $scope.datePicker.maxEndDate = $scope.end; //fixed date same as $scope.maxStartDate init value

    // watcher to watch the "From" date and set the min date for 'To' datepicker 
    $scope.$watch('start', function(v) {
        $scope.datePicker.minEndDate = v;
        $scope.dateOptions2.minDate = v;
    });


    $scope.dateOptions1 = {
        //dateDisabled: disabled,
        formatYear: 'yyyy',
        //  maxDate: $scope.datePicker.maxStartDate,
        minDate: $scope.datePicker.minStartDate,
        startingDay: 1
    };

    $scope.dateOptions2 = {
        //dateDisabled: disabled,
        formatYear: 'yyyy',
        //  maxDate: $scope.datePicker.maxEndDate,
        minDate: $scope.datePicker.minEndDate,
        startingDay: 1
    };
    // Disable weekend selection
    function disabled(data) {
        var date = data.date,
            mode = data.mode;
        return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
    }
    $scope.open1 = function() {
        $scope.popup1.opened = true;
    };

    $scope.open2 = function() {
        $scope.popup2.opened = true;
    };

    $scope.formats = ['dd.MM.yyyy'];
    $scope.format = $scope.formats[0];
    $scope.altInputFormats = ['M!/d!/yyyy'];

    $scope.popup1 = {
        opened: false
    };

    $scope.popup2 = {
        opened: false
    };

});

在您的 HTML 中，您可以如下所示显示

<div ng-controller="DatepickerPopupDemoCtrl">
    <h5>From Date</h5>
        <p class="input-group">
          <input type="text" 
                  class="form-control" 
                  uib-datepicker-popup="{{format}}" 
                  ng-model="start" 
                  is-open="popup1.opened" 
                  datepicker-options="dateOptions1" 
                  close-text="Close" 
                  readonly="true" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open1()">
              <i class="glyphicon glyphicon-calendar"></i>
            </button>
          </span>
        </p>

        <hr>
      <h5>To Date</h5>
        <p class="input-group">
          <input type="text" 
                  class="form-control" 
                  uib-datepicker-popup="{{format}}" 
                  ng-model="end" 
                  is-open="popup2.opened" 
                  datepicker-options="dateOptions2" 
                  close-text="Close" 
                  readonly="true"/>
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open2()">
              <i class="glyphicon glyphicon-calendar"></i>
            </button>
          </span>
        </p>

  </div>