Investigate allowing dynamic date classes for the datepicker

[wesleycho]

A performant solution is needed for allowing dynamic date class toggling without running excessive watchers.

Noting from prior investigations, removing the one-time binding in the templates is not an option due to major performance issues. This will likely involve writing a new directive and/or parsing mechanism.

[mkmaier]

This would be really nice! I'm implementing a daterange-picker with two connected date-pickers and want to show the range of selected dates with a different background. When one of the dates changes, my custom-class function is called for every day but nothing happens. I don't want to have to watch for changes and manually switch months back and forth, which seems to be the only thing that helps right now.
Is there another way of forcing an update of the classes? refreshView() as described in https://gist.github.com/cgmartin/3daa01f910601ced9cd3 does not seem to help in v0.14.3.

[ghost]

+1

[wesleycho]

Please do not +1, all it does is add noise

[ghost]

What is the current recommended work-around for this issue?

[wesleycho]

One can currently override the template and remove the one-way bindings if one wants to prevent this behavior, but I would recommend against doing so due to the 2x performance regression, and the massive hit on performance with each $digest cycle.

[ReToCode]

+1 - ish.
We would not need the fully dynamic solution as described above. We know exactly which days changed. So it would be enough to just be able to "refresh" specific days.

[icfantv]

@ReToCode - in that case, you can still do a partial version of @wesleycho's solution in the interim.

[wesleycho]

I have an idea for this - it will take a bit of work, but it should do the job.

A new helper directive pair needs to be written for this where one directive orchestrates class updating and another directive registers the element & model object (in this case the dt object from the templates for the day/month/year directives). The parent directive will have a $watch for changes in the date classes, and will manually toggle the classes, avoiding the watcher from ng-class.

[fedyk]

Hi,
Recently I also faced with such behavior, and as a workaround I used ngDisabled. So by default my datepicker is disabled. And when external resources were loaded, I just un-disable datepicked.

Small example, template:

<uib-datepicker
  ng-model="$ctrl.date"
  ng-disabled="$ctrl.datepicker.disabled"
  datepicker-options="$ctrl.datepicker"></uib-datepicker>

Controller:

$scope.datepicker = {
  disabled: true
};

someService.fetch().then(() => {
  $scope.datepicker.disabled = false;
});