Javascript ui引导日期选择器：强制重新呈现日期选择器？

特别是使用ui引导的日期选择器和无jQuery

所以，我试着从两个日期选择器中拼凑出一个日期范围选择器，它非常接近。我正在尝试根据结束日历上选择的日期禁用开始日历上的日期，反之亦然。问题是，“开始日历”仅在对该日历进行选择时刷新或重新呈现。因此，如果我在“结束日历”上选择了一个日期，“开始日历”将不会重新运行“禁用日期”功能并重新渲染，直到我再次在“开始日历”上选择了一个日期

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

如果您正在使用then，则可以使用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正在读取该数组…

如果没有任何代码作为答案的基础，我不能100%确定这是您想要的，但希望这能给您一个提示，告诉您如何实现您想要的

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

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

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

加成

---

如果我理解正确的话，你的问题与我的问题相似。我的getDayClass方法依赖于从服务器加载的信息。因此，当小部件呈现时，它不可用，因此当我从服务器接收到查找数据时，需要重新呈现

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

---

诚然，这有点像黑客，但目前似乎还有效。

我正在使用ui bootstrap的datepicker，抱歉，我会更清楚地说明这一点。请创建一个Plunker或至少发布您的代码，以便人们可以帮助您。如果您使用的是UI引导日期选择器，请查看“最小日期”和“最大日期”属性。这些是双向可绑定表达式，因此当您在范围中更新它们时，它们将自动更新元素。不幸的是，它们似乎不起作用。对模型变量进行一个月的加减运算在某些情况下有效，但不可靠。

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

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

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

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