Question

我是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的新手，我试图通过做项目来理解它。任何人都可以检查并提供解决方案吗？

Answer 1

您无需将startDate和endDate变量传递到第二个日期选择器的ng-change方法中;您已使用$scope在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）用户在今天之前选择startDate并且2）用户在endDate之前选择startDate。

通过修改minDate中的datepicker-options选项，可以防止上述两个错误。查看this plunker中的$watch - 每次选择新的开始日期时，我们都可以修改结束日期的minDate选项，并防止用户输入问题。

更新（按要求）

plunker显示两个日期选择器，两者都有自己的自定义datepicker-options绑定为$ scope变量 - 我们将能够修改这些datepicker-options来改变每个{{1}的行为}}

默认datepicker“minDate”到今天（在CTRL内）使得用户无法在今天之前选择startDateOptions（解决您试图阻止的第一个问题）。

在startDate上放置$watch，我们可以在更改startDate后更新endDateOptions。这样，我们可以通过将startDate设置为endDate的任何内容来限制用户对minDate输入的选择（解决在{{1}之前选择startDate的第二个问题}}）。

在$ watch中还有一些逻辑可以调整endDate，这是有意义的（比如我们首先选择了有效的startDate，但之后选择了一个新的endDate endDate无效。

在AngularJS Bootstrap日期选择器上验证开始日期和结束日期？

1 个答案: