**Component.html**
<div class="col-md-6">
<div class="input-group flex-nowrap">
<input type="text" ngxDaterangepickerMd
placeholder="DD/MM/YYYY"
[showDropdowns]="datepickerConfig.showDropdowns"
[showWeekNumbers]="datepickerConfig.showWeekNumbers"
[locale]="{applyLabel: 'Apply', format: 'DD-MM-YYYY'}"
pickerDirective
name="daterange"
[(ngModel)]="selected" [showCancel]="true"
class="form-control datePicker-form"
readonly >
<span class="btn calendar d-flex align-items-center ngx-
daterangepicker-action"
(click)="openDatepicker()"
type="button">
<fa-icon [icon]="faCalendarAlt"></fa-icon>
</span>
</div></div>
**Component.ts**
import { DaterangepickerDirective } from 'ngx-daterangepicker-
material';
@ViewChild(DaterangepickerDirective, { static: false })
pickerDirective!: DaterangepickerDirective;
openDatepicker() {
this.pickerDirective.open();
console.log("Triggered");
}
I need to change the color of the buttons that appears inside the calendar menu that is apply and close,and the main issues is the calendar menu is not triggering when hitting on the fontawesome icon mentioned above,Its an icon of the a calendar but it fires if i click on the edge of the box or anywhere in the input field.
