In my current project, I am utilizing the ng2-bootstrap date-picker. The goal is to display the date-picker when clicking on the calendar icon and hide it once a date has been selected.
<label>Date:</label>
<div class="datepickerDiv">
<input type="text" value="{{ getDate() | date:'dd-MMMM-yyyy' }}" class="datepicker">
<span class="cal-icon" (click)="open()"><i class="fa fa-calendar-check-o" aria-hidden="true"></i></span>
<span class="clearDate" (click)="clearDate()"><i class="fa fa-times-circle" aria-hidden="true"></i></span>
<ul class="datepicker-ul" role="menu" *ngIf="opened">
<datepicker [(ngModel)]="Date" [minDate]="minDate" [showWeeks]="false"></datepicker>
</ul>
</div>
The component setup that I am using is as follows:
private opened: boolean = false;
public open():void {
this.opened = !this.opened;
}
public getDate():number {
return this.Date && this.Date.getTime() || new Date().getTime();
}
private clearDate() {
this.Date = null;
}
However, I have encountered an issue where the date-picker only closes upon clicking the icon again.