ui-bootstrap datepicker:强制重新渲染日期选择器? [英] ui-bootstrap datepicker: Force a re-render of a datepicker?

问题描述

特别使用 ui-bootstrap 的 datepicker 和 NO jQuery...

Specifically using ui-bootstrap's datepicker and NO jQuery...

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

So, I'm trying to sew together a date range picker of sorts from two datepickers and it's pretty close. I'm trying to disable dates on the start calendar based on the date selected on the end calendar and vice versa. The problem is that the start calendar only refreshes or re-renders when a selection is made on that calendar. So if I select a date on the end calendar, the start calendar will not re-run the disable-date function and re-render until I pick a date on the start calendar again.

有人知道强制重新渲染日历或直接调用提供的禁用日期或自定义类函数的方法吗?

Does anyone know a way to force a re-render of a calendar or make a direct call to the supplied disable-date or custom-class functions?

推荐答案

我不是真的 100% 确定这是您正在寻找的内容，但没有任何代码作为此答案的基础，但希望这会给您一个提示关于如何完成你想要的.

I'm not really 100% sure this is what you're looking for without any code to base this answer on, but hopefully this will give you a hint as to how to accomplish what you want.

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

So if you want to create a very simple date range picker, you can take advantage of the min-date attribute, which points to a bindable expression. This means that whenever the parent scope property changes, the corresponding isolated scope property of the datepicker also changes, and vice versa. Therefore, if you bind the min-date attribute of the "end date" datepicker to the model for the "start date" datepicker, whenever the start date is changed, the second datepicker will be updated to reflect the change.

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

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

To make things a little nicer for the user, you could further watch the start date and automatically update the end date in the event that the selected start date is greater than the currently selected end date.

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

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

To further improve usability, if you're using UI Bootstrap 0.13.0+, you can use the custom-class attribute to set a custom CSS class on the date range. As an example of this, you could add:

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

这篇关于ui-bootstrap datepicker:强制重新渲染日期选择器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！