I have a requirement to use a NgbDateAdapter and a NdgDateParserForamatter defined as a directive and added to an input using a selector, rather than the usual method of adding it to the component’s provides list, as I need to be able to have different behaviours for different date inputs on the same page and I’d rather not create separate components around each date input.

This is working perfectly for the formatter but when the calendar is used to select the date, the date adapter is setting the model to the NgbDateStruct rather than my class than extends it. The class handles converting several different date input formats into valid dates and, when stringified it provides just the date in yyyy-mm-dd format.

An example of where I need a difference is for the formatter, as I want to be able to set a target date for date-fns than differs e.g. a Date of Birth needs a target date of 66 years ago, so that if a 2 digit year is entered when the missing first 2 digits are added the date will still be in the past, but a second input for start date needs a target date of 50 years in the future, so that a completed date will be in the future.

Is there a way to get this working / disable the default behaviour when a directive is being used?

The below screen shots are from
https://stackblitz.com/edit/angular-fwd4cj?file=src%2Fapp%2Fdatepicker-selector.html

I added “DateOnly.toJSON()” to the stringify value for my class, just to make it clearer when it was being called.

First set are the results after inputting 1/6/24. The comments above each input explain their setup – first is using Bootstrap’s Native Date classes, the second using my adapter and formatter but imports using the provides and the last 2 are both using the directive method.

The second set are when using the calendar to select 1st June 2024.

The 2nd input gives the expected result, as the model has been set to my DateOnly class. The 3rd and 4th are showing the model has been set to an NgbDateStruct.

I suspect this is happening due to the ngbDatepicker directive, that I still need to include on these inputs, using the default handling because it can’t find a provided one in the component.

The console however shows that my defined directives are also being called.

I have been unable to locate the page where I original saw this directive method of working with the ngbDatePicker, so I don’t know if I got something wrong.