ngbDatepicker set current month and year dropdown

Question

In my Angular application, I used a datepicker called ngbDatePicker. It seems that it has a bug because the default selected month and year dropdowns is not correct. See screenshot below:

As you can see, the selected month is January and the year is 2011 but today is May of 2021. But if I check the value it is correct it's just that the dropdowns are not correct. For further reference, here is my code on using the ngbDatePicker:

<input class="form-control calendar pl-0 rounded" id="workDateSelector" (click)="d.toggle()" (dateSelect)="formatDate()" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #d="ngbDatepicker" [formControl]="selectedDate">

EDIT: Here is the code for the component:

selectedDate: FormControl;
date: Date = new Date();

ngOnInit(){
  this.selectedDate = new FormControl({year: this.date.getFullYear(), month:this.date.getMonth()+1, day:this.date.getDate()});
}

Answer 1

Try angular material datepicker.The datepicker allows users to enter a date either through text input, or by choosing a date from the calendar