Блог

Я новичок в Angular JS и пытаюсь реализовать проверку для средства выбора даты и времени в моем проекте 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" data-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" data-ng-model="reservation.reservedTill"
               validator="required" required-error-message="Date is required" valid-method="watch" id="endDate" ng-change='checkErr(startDate,endDate)'/>
        <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) {
                reservationServices.updateReservation($scope.reservation).then(function (result) {
                    $scope.data = result.data;
                    if (!result.data.error) {
                        $state.transitionTo('employeeTalentPool', {
                            id: $state.params.id
                        });
                    }
                });
            }
        };

        $scope.checkErr = function (startDate, endDate) {
            $scope.errMessage = '';
            var curDate = new Date();

            if (new Date(startDate) > new Date(endDate)) {
                $scope.errMessage = 'End Date should be greater than start date';
                return false;
            }
            if (new Date(startDate) < curDate) {
                $scope.errMessage = 'Start date should not be before today.';
                return false;
            }
        };

        $scope.cancel = function () {
            $location.path("/reservations");
        }
    }]);
  

Я совершенно новичок в Angular и пытаюсь понять это, выполняя проекты. Может ли кто-нибудь проверить и предоставить решение?

Нет необходимости передавать startDate endDate переменные and в ng-change метод во втором средстве выбора даты; вы уже отслеживаете эти переменные в своем $scope with ng-model .

 $scope.checkErr = function() {
  var start = new Date($scope.reservation.reservedFrom),
      end = new Date($scope.reservation.reservedTill);

  if (end < start) {
    $scope.errorMsg = "End must be after start";
  }

  ... other logic ...
};
  

Кроме того, может быть лучше просто запретить пользователю делать неправильный выбор.

Две ошибки, от которых вы, похоже, хотите защититься: 1) пользователь выбирает a startDate до сегодняшнего дня и 2) пользователь выбирает an endDate перед startDate .

Обе вышеуказанные ошибки можно предотвратить, изменив minDate параметр внутри datepicker-options . Проверьте $watch в этом плунжере — каждый раз, когда мы выбираем новую начальную дату, мы можем изменить minDate параметр для даты окончания и предотвратить проблемы с пользовательским вводом.

Обновление (по запросу)

Плунжер показывает два указателя даты, оба из которых имеют свои собственные пользовательские datepicker-options привязки как переменные $scope — мы сможем изменить их datepicker-options , чтобы изменить поведение каждого datepicker .

Значение по умолчанию startDateOptions «minDate» до сегодняшнего дня (в пределах CTRL) делает невозможным для пользователя выбор startDate до сегодняшнего дня (решение первой проблемы, которую вы пытались предотвратить).

Размещение $watch на startDate позволяет нам обновлять endDateOptions после любого изменения startDate . Это позволяет нам ограничить выбор пользователей для endDate ввода, установив значение minDate независимо startDate от того, что есть (решая вторую проблему выбора endDate перед a startDate ).

В $watch также есть некоторая логика для настройки endDate , где это имеет смысл (например, если мы сначала выбрали допустимое endDate , но затем выбрали новое startDate , которое сделало бы это endDate недействительным).