Feature Request: Datepicker month change trigger

[RPGillespie6]

Related to #5409 but it seems that feature request was closed with no resolution.

Basically, what's the point of being able to color in circles of certain important dates, if you have to prefetch every possible important date past, present, and future? It doesn't scale. We need a way to lazy load.

Currently there is no way of knowing which month a user is looking currently looking at, so there is no way to lazy load in which dates should be colored.

Solution:

• In the options object, allow user to specify callback function that will be called when the display month changes. datepicker will pass in the min/max date of the current displayed month into the callback.

Something like:

  function loadImportantDates(min, max)
  {
      //Load data in range [min, max]
  }

  $scope.options = {
    customClass: getDayClass,
    minDate: new Date(),
    showWeeks: true,
    monthChange: loadImportantDates
  };

[RPGillespie6]

And actually, the customClass option almost already encapsulates this feature - it calls a function once per day in the month. You could use customClass to figure out which days of the month you are looking at, the only problem is that you have no way of telling datepicker to call customClass on all the dates again once you have loaded new data

[liverezhurst]

+1 for broadcasting Events on user selecting new months. I also would like to go fetch new disabled dates data if the user goes forward or back from the initial view.

[shyamal890]

Another use case would to be make a range picker. Currently most of the range pickers have 2 datepickers side by side with the consecutive months. So if the user changes the month in the first datepicker the second datepicker should also change it's month view.

Example here: http://www.daterangepicker.com/#examples

[armbp1972]

The quick solution I implemented to solve this situation was:

In ui-bootstrap, in the definition of the directive's scope I added a new bidirectional binding parameter (month):

scope: { datepickerMode: '=?', dateDisabled: '&', customClass: '&', shortcutPropagation: '&?', month: '=?' },

In the function that actually change the month inside the directive I propagated that value to the template using that bidirectional binding:

$scope.move = function (direction) { var year = self.activeDate.getFullYear() + direction (self.step.years || 0), month = self.activeDate.getMonth() + direction (self.step.months || 0); $scope.month = month; self.activeDate.setFullYear(year, month, 1); self.refreshView(); };

And in my template I assigned that variable to a correspondent one in my controller:

<uib-datepicker ng-model="dashboardLeftCtrl.selectedDay" ... month="dashboardLeftCtrl.mymonth">

In this way I just exported to my controller the actual month the datapicker is sited in, not just the date. I just need to watch for change in it to trigger the action I need to when the month change.

The version of ui-boostrap I'm working with is 0.14.3, and I'm not in the mood to upgrade because it's in production. Maybe it could be a better one in current versions.

[armbp1972]

Even better:

In 'uibDatepicker' directive's isolated scope add customMonthChange: scope: { datepickerMode: '=?', dateDisabled: '&', customClass: '&', shortcutPropagation: '&?', customMonthChange: '&' }

In the move() method (responsible of changing the month when the datepicker lateral buttons are pressed ( < > ), added this lines:

$scope.customMonthChange({ month: month, year: year }).then(function (result) { self.activeDate.setFullYear(year, month, 1); self.refreshView(); });

In this way we can run an external method each time the month is changed inside the directive. The method to run is declared in the external controller, so the user has total independence to customize it.