Search code examples
angularangular-bootstrap

Is this a bug with the Angular Bootstrap date picker?

If I have an Angular bootstrap date picker with a format of "DD/MM/YYYY" and hide it with an ngIf it defaults back to a format of "MM/DD/YYYY" when it is shown again.

<button (click)="show = !show">{{ show ? 'Hide' : 'Show' }}</button><br>
<input bsDatepicker [bsConfig]="{ dateInputFormat: 'DD/MM/YYYY' }" type="text" [(bsValue)]="date" *ngIf="show">

See this StackBlitz https://stackblitz.com/edit/angular-uwa2fs

Can anybody think of a work around?

Solution

  • One workaround would be to only hide the datepicker in DOM, instead of destroying/recreating it. So, instead of *ngIf="show", [class.hidden]="!show" (and css: .hidden { display: none; }).

    https://stackblitz.com/edit/angular-eudgh3?file=src/app/app.component.html