ui-bootstrap datepicker：强制重新渲染datepicker？

Question

特别是使用ui-bootstrap的datepicker和没有jQuery ...

因此，我正在尝试从两个日期选择器中缝制某种类型的日期范围选择器，它非常接近。 我正在尝试根据结束日历上选择的日期来禁用开始日历上的日期，反之亦然。 问题在于，开始日历仅在对该日历进行选择时才刷新或重新渲染。 因此，如果我在结束日历上选择一个日期，则开始日历将不会重新运行disable-date函数并重新呈现，直到我再次在开始日历上选择一个日期为止。

有谁知道一种强制重新渲染日历或直接调用所提供的禁用日期或自定义类函数的方法？

Answer 1

我不是真的100％地确定这是您在寻找的内容，而没有任何代码可以基于此答案，但是希望这会给您一些提示，告诉您如何完成所需的操作。

柱塞演示

因此，如果您想创建一个非常简单的日期范围选择器，则可以利用min-date属性，该属性指向可绑定的表达式。 这意味着，每当父范围属性更改时，日期选择器的相应隔离范围属性也会更改，反之亦然。 因此，如果将“结束日期”日期选择器的min-date属性绑定到“开始日期”日期选择器的模型，则无论何时更改开始日期，都会更新第二个日期选择器以反映更改。

<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>

调节器

  //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;
  }

Answer 2

如果我对您的理解正确，那么您将遇到与我类似的问题。 我的getDayClass方法取决于从服务器加载的信息。 因此，当小部件呈现时，它不可用，因此当我从服务器收到查找数据时，需要重新呈现。

<datepicker ng-model="selectedDate" 
            min-date="minDate" 
            show-weeks="false" 
            custom-class="getDayClass(date, mode)">
</datepicker>

我的小部件会渲染，然后在服务器响应后，我触发一个重新渲染组件以更新样式。要触发该重新渲染，我发现我可以只更新selectedDate对象：

$scope.selectedDate = new Date($scope.selectedDate.getTime() + 1);

诚然，这有点麻烦，但目前看来行之有效。

Answer 3

如果您正在使用jquery datepicker，则可以使用beforeShowDay函数。 对于我们的项目之一，我们已将其使用如下：

    beforeShowDay: function(date) {
        var dateStr = formatDate(date);
        var indexOfDate = $.inArray(dateStr, goldCalendarDateSource);
        if (indexOfDate != -1) {
            var tooltip = decodeStr(goldEventTooltipsArray[indexOfDate]);
            return [true, 'highlight', tooltip]; //[0]= isSelectable, 1= cssClass, [2]=Some tooltip text
        }
        return [false, '', '']
    },

goldCalendarDateSource是一个日期数组。 我们将重点介绍一些使用该数组的方法。 正如js注释所解释的，您可以按以下顺序提供参数：[isEnabled，additionalCssClass，tooltipText]。 jQuery正在读取该数组...