Search code examples
angularngx-bootstrap

How to set custom date in ngx-bootstrap datepicker

I am using ngx-bootstrap datepicker. I want a custom date to be highlighted on load of date-picker. I have a date stored in some variable and want that date to be selected(highlighted).

component.ts

private dob : string = '2017/07/07';

component.html

<datepicker [activeDate]="dob" [showWeeks]="false" [startingDay]="1" [formControl]="form.controls[dob]"></datepicker>

But this is not working. By default today's date will be selected even after setting activeDate. How to achieve this? Or is there any other attribute that I can use instead of activeDate? And is there any particular format for date?

Solution

  • ngModel did the trick for me. Instead of setting the value to activeDate we can set it to ngModel. And also activeDate accepts a Date object, which will need a conversion if the value is a string.

    I had to remove formControl as well, since it did not work along with ngModel.

    <datepicker [(ngModel)]="dob" [showWeeks]="false" [startingDay]="1" (selectionDone)="showDatePicker = false"; ></datepicker>