Angular-UI Datepicker设置：将结束日期最小日期绑定为开始日期

嘿，这个需求其实很好实现！Angular-UI Datepicker本身就支持通过绑定动态更新min-date，直接把结束日期的最小日期和开始日期的模型关联起来就行，我给你一步步说怎么做：

1. 完善视图代码 #

首先把你的结束日期输入框补全，并在它的datepicker-options里关联开始日期的模型：

<div class="input-daterange input-group" id="datepicker">
  <input type="text" class="input form-control" name="ev_StartDate" 
         ng-model="evStartDate" ng-required="true" 
         is-open="startPop.opened" ng-focus="openStart()" 
         uib-datepicker-popup="{{format}}" alt-input-formats="altInputFormats" 
         datepicker-options="startDateOptions" readonly="true">
  <span class="input-group-addon">至</span>
  <input type="text" class="input form-control" name="ev_EndDate" 
         ng-model="evEndDate" ng-required="true" 
         is-open="endPop.opened" ng-focus="openEnd()" 
         uib-datepicker-popup="{{format}}" alt-input-formats="altInputFormats" 
         datepicker-options="endDateOptions" readonly="true">
</div>

2. 控制器里配置动态限制 #

在对应的Angular控制器中，我们需要初始化日期选项，并且监听开始日期的变化来实时更新结束日期的最小限制：

angular.module('yourApp').controller('YourController', function($scope) {
  // 配置日期显示格式
  $scope.format = 'yyyy-MM-dd';
  $scope.altInputFormats = ['yyyy/MM/dd', 'dd.MM.yyyy'];

  // 控制日期选择器弹窗的打开状态
  $scope.startPop = { opened: false };
  $scope.endPop = { opened: false };

  $scope.openStart = function() {
    $scope.startPop.opened = true;
  };

  $scope.openEnd = function() {
    $scope.endPop.opened = true;
  };

  // 开始日期的基础配置（这里可以加最大日期限制，比如不能选未来日期）
  $scope.startDateOptions = {
    maxDate: new Date(),
    showWeeks: false
  };

  // 结束日期的配置，重点绑定minDate到开始日期模型
  $scope.endDateOptions = {
    minDate: $scope.evStartDate,
    maxDate: new Date(),
    showWeeks: false
  };

  // 监听开始日期的变化，实时更新结束日期的最小限制
  $scope.$watch('evStartDate', function(newStartDate) {
    if (newStartDate) {
      $scope.endDateOptions.minDate = newStartDate;
      // 额外优化：如果之前选的结束日期比新开始日期早，自动清空结束日期
      if ($scope.evEndDate && $scope.evEndDate < newStartDate) {
        $scope.evEndDate = null;
      }
    }
  });
});

关键说明 #

• 核心就是把结束日期选项里的minDate绑定到开始日期的ngModel（也就是evStartDate），再通过$watch监听开始日期的变化，确保结束日期的限制会实时更新。
• 额外加的清空逻辑是为了避免出现结束日期早于开始日期的无效情况，提升用户体验。

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