Topic: I want to add calendar icon in my <mdb-date-picker>

andolasoft free asked 4 years ago


I have tries the below code, the icon is showing but not clickable

<mdb-date-picker [options]="myDatePickerOptions" class="form-control"
                                  formControlName="next_followup_date" [(ngModel)]='next_followup_date' class="form-control"
                                  placeholder="Select a Date" errorMessage="" successMessage="" mdbInput></mdb-date-picker>
 <i class="datepicker-inline-icon far fa-calendar-alt"></i>

I want the date picker will open when someone clicks on both input field & icon. Please suggest


Arkadiusz Idzikowski staff answered 4 years ago


You can create new template variable on mdb-date-picker component to get access to the date picker methods in your template code, for example:

<mdb-date-picker #datepicker [options]="myDatePickerOptions" class="form-control"
                                  formControlName="next_followup_date" [(ngModel)]='next_followup_date' class="form-control"
                                  placeholder="Select a Date" errorMessage="" successMessage="" mdbInput></mdb-date-picker>
 <i class="datepicker-inline-icon far fa-calendar-alt" (click)="datepicker.openBtnClicked()"></i>


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.4.3
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: No
  • Provided link: No