angularng-bootstrapngb-datepicker

NG-Bootstrap - ngbDatepicker with custom template is not auto-closing

I am trying to implement NG-Bootstrap ngbDatepicker as a popup with a custom template for the selection of Month/Year (I do not care about the day of month). When selecting a date, the popup does not close, even if I force a toggle in the selection method. The popup does close if I click outside of it. I'm wondering if there is something I'm not implementing in the ngbDatepickerContent.

Here is a link to a StackBlitz that demonstrates the problem:

https://stackblitz.com/edit/angular-mr3kcf-bng9mw?file=src%2Fapp%2Fdatepicker-custommonth.ts,src%2Fapp%2Fdatepicker-custommonth.html

Solution

  • From this line:

    selectMonth(month, dp)

    You are providing the dp which is a NgbDatepicker instance based on the ContentTemplateContext. NgbDatepicker doesn't contain the toggle or close method.

    Change it to d2 to provide the NgbInputDatePicker instance from the template variable.

    selectMonth(month, d2)

    Demo @ StackBlitz