javascript - ui-bootstrap 日期选择器 : Force a re-render of a datepicker?

Question

特别是使用 ui-bootstrap 的日期选择器和 NO jQuery...

因此，我正在尝试将两个日期选择器的各种日期范围选择器缝合在一起，而且非常接近。我正在尝试根据在结束日历上选择的日期禁用开始日历上的日期，反之亦然。问题在于，只有在该日历上进行选择时，开始日历才会刷新或重新呈现。因此，如果我在结束日历上选择一个日期，开始日历将不会重新运行禁用日期函数并重新呈现，直到我再次在开始日历上选择一个日期。

有谁知道强制重新呈现日历或直接调用提供的禁用日期或自定义类函数的方法吗？

Answer 1

如果没有任何代码作为答案的基础，我并不是真的 100% 确定这就是您要找的东西，但希望这会给您一个提示，告诉您如何完成您想要的。

Plunker Demo

因此，如果您想创建一个非常简单的日期范围选择器，您可以利用指向可绑定(bind)表达式的 min-date 属性。这意味着每当父范围属性发生变化时，日期选择器的相应独立范围属性也会发生变化，反之亦然。因此，如果您将“结束日期”日期选择器的最小日期属性绑定(bind)到“开始日期”日期选择器的模型，则每当开始日期更改时，第二个日期选择器将更新以反射(reflect)更改。

<datepicker ng-model="startdt" show-weeks="false"></datepicker>
<datepicker ng-model="enddt" min-date="startdt" show-weeks="false"></datepicker>

为了让用户感觉更好，您可以进一步观察开始日期，并在所选开始日期大于当前选择的结束日期时自动更新结束日期。

$scope.$watch('startdt', function(newval){
  if (newval > $scope.enddt) {
    $scope.enddt = newval;
  }
});

为了进一步提高可用性，如果您使用的是 UI Bootstrap 0.13.0+，您可以使用 custom-class 属性在日期范围内设置自定义 CSS 类。例如，您可以添加:

标记

//Bind the custom-class attribute to the setRangeClass function
<datepicker ng-model="enddt" min-date="startdt" custom-class="setRangeClass(date, mode)" show-weeks="false"></datepicker>

Controller

  //Define the setRangeClass on the controller
  $scope.setRangeClass = function(date, mode) {
    if (mode === 'day') {
      var dayToCheck = new Date(date).setHours(0,0,0,0);
      var startDay = new Date($scope.startdt).setHours(0,0,0,0);
      var endDay = new Date($scope.enddt).setHours(0,0,0,0);

      if (dayToCheck >= startDay && dayToCheck < endDay) {
        return 'range';
      }
    }
    return '';
  };

CSS

  /*Create the corresponding .range class*/
  .range>.btn-default {
    background-color: #5bb75b;
  }
  .range button span {
    color: #fff;
    font-weight: bold;
  }