具体使用 ui-bootstrap 的 datepicker 和 NO jQuery...
所以，我正在尝试将来自两个日期选择器的各种日期范围选择器缝合在一起，并且非常接近。我正在尝试根据结束日历上选择的日期禁用开始日历上的日期，反之亦然。问题是开始日历仅在该日历上进行选择时才会刷新或重新呈现。因此，如果我在结束日历上选择了一个日期，那么在我再次在开始日历上选择一个日期之前，开始日历将不会重新运行禁用日期功能并重新渲染。
有人知道强制重新渲染日历或直接调用提供的禁用日期或自定义类函数的方法吗？
【问题讨论】：
标签： javascript angularjs angular-ui-bootstrap
如果没有任何代码可以作为此答案的基础，我并不是真的 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 '';
};
/*Create the corresponding .range class*/
.range>.btn-default {
background-color: #5bb75b;
}
.range button span {
color: #fff;
font-weight: bold;
}
【讨论】：
如果我对您的理解正确，您会遇到与我类似的问题。我的 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);
诚然，这有点小题大做，但现在似乎可行。
【讨论】：
如果你使用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 正在读取该数组...
【讨论】：