I copied the implementation of the NgbInputDatepicker from the docs.
<form class="row row-cols-sm-auto">
<div class="col-12">
<div class="input-group">
<input
class="form-control"
placeholder="yyyy-mm-dd"
name="dp"
[(ngModel)]="model"
[autoClose]="false"
ngbDatepicker
#d="ngbDatepicker" />
<button class="btn btn-outline-secondary bi bi-calendar3" (click)="d.toggle()" type="button">
Toggle calendar
</button>
<button class="btn btn-outline-secondary bi bi-calendar3" (click)="clearValue()" type="button">
Clear
</button>
</div>
</div>
</form>
<hr />
<pre>Model: {{ model | json }}</pre>
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [CommonModule, NgbInputDatepicker, FormsModule],
selector: 'nl-test-datepicker',
standalone: true,
templateUrl: './test-datepickerponent.html'
})
export class TestDatepickerComponent {
model?: NgbDateStruct;
clearValue(): void {
this.model = undefined;
}
}
Normally when clicking on the forward/backward arrows from the navigation header, we should see the next/previous month but the current value shoul not change.
However when the autoclose property is set to [autoclose]="false"
in order to handle the closing of the datepicker programmatically, there is the following bug:
(steps to reproduce:)
- open pop-up and select a date
- without closing the pop-up, click on the clear button to clear the selected date
- click on the forward button on the navigation
- the next month is indeed rendered but we also get the value for the date we just cleared. I think this is an unexpected behavior since date selection and navigation are supposed to be 2 different things as per the documentation. Personally I would expect to see the next month but the date should still be set to undefined