AngularJS起止日期校验：结束日期早于开始日期时展示错误提示

一、JS代码调整 #

核心修改为新增错误状态标识，同时监听开始、结束两个日期的变更，自动校验日期合法性，完整代码如下：

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.dateInvalid = false;

    $scope.datePicker.minStartDate = new Date();
    $scope.datePicker.minEndDate = $scope.start;

    // 替换原有单变量监听，同时监听开始、结束日期变更
    $scope.$watchGroup(['start', 'end'], function(newVals) {
        const start = newVals[0];
        const end = newVals[1];
        // 更新结束日期的最小可选值
        if (start) {
            $scope.datePicker.minEndDate = start;
            $scope.dateOptions2.minDate = start;
        }
        // 校验日期是否合法
        if (start && end) {
            $scope.dateInvalid = start.getTime() > end.getTime();
        }
    });


    $scope.dateOptions1 = {
        formatYear: 'yyyy',
        minDate: $scope.datePicker.minStartDate,
        startingDay: 1
    };

    $scope.dateOptions2 = {
        formatYear: 'yyyy',
        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 class="text-danger" ng-if="dateInvalid">* 结束日期不能早于开始日期</div>

  </div>

效果说明 #

• 初始加载时两个日期默认取当前时间，无错误提示
• 修改开始日期晚于当前已选结束日期时，自动触发错误提示
• 修改结束日期晚于开始日期后，错误提示自动消失
• 原有结束日期选择器禁用早于开始日期选项的逻辑完全保留

内容的提问来源于stack exchange，提问作者Tim