Angular弹窗功能失效：日期选择器校验脚本无法正常运行

你的日期校验逻辑没正常工作主要有几个核心问题，我来帮你一步步修正：

问题根源 #

1. 脚本执行时机错误：你直接写在模板里的<script>只会在页面初始化时运行一次，用户选择新日期后不会重新触发校验逻辑。
2. 未监听模型变化：Angular中需要监听ctrl.minDate和ctrl.maxDate的变更，才能在用户更新日期时自动执行校验。
3. 日期类型可能不匹配：直接比较时如果模型值不是标准Date对象（比如字符串格式），会导致比较逻辑失效。

修正方案 #

我们把校验逻辑移到控制器中，通过监听模型变化或绑定事件来触发校验：

步骤1：在控制器中添加校验方法 #

在对应ctrl的控制器里，添加专门的日期校验函数，并监听日期模型的变化：

app.controller('YourDialogController', ['$window', '$scope', function($window, $scope) {
  var ctrl = this;

  // 日期校验核心方法
  ctrl.validateDates = function() {
    var today = new Date();
    // 重置当天时间到0点，避免时分秒干扰日期比较
    today.setHours(0, 0, 0, 0);

    // 校验开始日期不能晚于当前日期
    if (ctrl.minDate) {
      var startDate = new Date(ctrl.minDate);
      startDate.setHours(0, 0, 0, 0);
      if (startDate > today) {
        $window.alert("WARNING! Your start date can't be in the future. This will yield no search results.");
      }
    }

    // 校验结束日期不能早于开始日期
    if (ctrl.minDate && ctrl.maxDate) {
      var startDate = new Date(ctrl.minDate);
      var endDate = new Date(ctrl.maxDate);
      startDate.setHours(0, 0, 0, 0);
      endDate.setHours(0, 0, 0, 0);
      if (endDate < startDate) {
        $window.alert("WARNING! Your end date can't be before your start date. This will yield no search results.");
      }
    }
  };

  // 监听日期模型变化，自动触发校验
  $scope.$watchGroup(['ctrl.minDate', 'ctrl.maxDate'], function() {
    ctrl.validateDates();
  });
}]);

步骤2：修改模板代码 #

移除模板里的<script>标签，也可以给日期选择器绑定ng-change事件（和上面的$watch二选一即可）：

<md-dialog-content>
  <div class="md-dialog-content">
    <md-datepicker 
      input 
      submit-required="true" 
      ng-model="ctrl.minDate" 
      md-placeholder="Enter Start Date"
      ng-change="ctrl.validateDates()">
    </md-datepicker>
    <md-datepicker 
      input 
      submit-required="true" 
      ng-model="ctrl.maxDate" 
      md-placeholder="Enter End Date"
      ng-change="ctrl.validateDates()">
    </md-datepicker>
  </div>
</md-dialog-content>

额外优化提示 #

• 建议用Angular的ng-messages表单校验替代alert，把错误信息直接显示在日期选择器下方，用户体验更流畅。
• 比较日期时重置时分秒是关键，避免用户选择当天晚于当前时间的日期被误判为“未来日期”。

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