ui-bootstrap datepicker: Force a re-render of a datepicker?

Question

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?

Answer 1

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.

Plunker Demo

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

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:

Markup

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

Answer 2

If I understand you correctly you have a similar problem to what I have. My getDayClass method is dependent on information loaded from the server. So when the widget renders it is not available, thus requiring a rerender when I receive the lookup data from the server.

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

My widget renders and then after the response from the server I trigger a rerender the component to update the styles.To trigger the rerender I have found I can just update the selectedDate object:

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

Admittedly this is a bit of a hack, but seems to work for now.

Answer 3

If you are using jquery datepicker then, you can use beforeShowDay function. For one of our projects, we have used it as follows:

    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 is an array of dates. We are highlighting some using that array. As the js comment explains, you can provide parameters in this order: [isEnabled, additionalCssClass, tooltipText]. jQuery is reading that array...