Datepicker: make navigation event cancellable

[CarlosTorrecillas]

Bug description:

markDisabled is executed before the navigate callback in NgbDatePicker when changing month. If you want to apply some checks re the state of the days in terms of them being disabled then that's not possible.

Link to minimally-working StackBlitz that reproduces the issue:

https://stackblitz.com/edit/datepicker-navigation

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 7.0.0

ng-bootstrap: 4.0.0

Bootstrap: -

I think this is pretty similar to #1325 and I could also use the workaround but in my case and in general we could make that event being run after the navigate.

I'm not sure if that would be a matter of reordering the lists:

https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/datepicker/datepicker.ts#L281
https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/datepicker/datepicker.ts#L289

And if you don't see any issues with that perhaps that could be a feature to have?

[maxokorokov]

@CarlosTorrecillas markDisabled is run after the navigate, check in the same stackblitz with workaround: https://stackblitz.com/edit/angular-li9grd. (add console.log() inside the markDisabled function)

It might not be run for all months if you have multiple months visible though (it is run only for newly generated months)... is that the case for you?

[CarlosTorrecillas]

@maxokorokov thanks for the reply. It's strange as I added the console.log on both the navigate and markDisabld and got this:

I may be doing something wrong here but as far as I can see the navigate code gets run last?

I have a basic calendar, don't have any multi-month or any other fancy customisation - pretty standard setup.

You can simple click on the "next month" arrow to reproduce it.

[maxokorokov]

Oh, I didn't get what was the problem initially. Thought that markDisabled is not called at all when changing month.

Yes, (navigate) is just a notification that navigation has just happened and will be fired last.

If you want to apply some checks re the state of the days in terms of them being disabled

• Do you want to prevent navigation from happening ?
• Are you missing some data when running markDIsabled ?

Sorry it's still unclear what is the problem/use case you're trying to solve

[CarlosTorrecillas]

Yeah, I think I miss the context here.

When I click and navigate to any month, on the navigate callback I'm retrieving stuff from an API that will get used in the markDisabled function. That's why I need it to happen AFTER I've got the data refreshed. To me, from the design point of view it makes sense to run the markDisabled after you've moved to another month because that's when you would like to check the availability of the days, wouldn't you?

Unless I'm understanding this wrong, perhaps there is another way of doing it?

Thanks!
Carlos.

[maxokorokov]

Ok, so from what I understand, you want something like router data prefetchig with Resolver: https://angular.io/guide/router#resolve-pre-fetching-component-data → basically wait navigating until the promise is resolved. I think doing this would be an overkill for the datepicker.

What we could do is to fire (navigate) event at the first place and make it cancellable with preventDefault(). Like this it would actually be inline with other widgets.

So for your use case:

• if you need data synchronously → you just get it in your (navigate) handler
• if you need data asynchronously → you cancel navigation and trigger it manually later by calling datepicker.navigateTo()

/**
 * The payload of the datepicker navigation event
 */
export interface NgbDatepickerNavigateEvent {
  current: {year: number, month: number};
  next: {year: number, month: number};
  preventDefault: () => void;
}

So will mark this as a feature request

[CarlosTorrecillas]

That's exactly what I need. Thanks for getting back to me. Appreciated