Как показать всплывающее окно bsDatePicker, если пользователь нажимает на изображение значка

Question

Я использую DatePicker, который работает нормально, но я хочу, чтобы всплывающее окно было видимым, даже если пользователь нажимает на изображение, которое находится внутри поля ввода

        <div class="col-6">
            <div class="fake-input ml-auto">
                <img src="{{environment.assets_base_url}}assets/images/calendar.png" (click)="clickOnDateField(data.slug)" class="inlineBlock hand-cursor">
                <input type="text" [(bsValue)]="dateValue" value="{{dateValue | date: 'dd/MM/yyyy'}}" bsDatepicker
                       name="{{data.slug}}" id="{{data.slug}}" placeholder=" Date" class="inlineBlock question-row-face"
                       style="padding-left: 12px;padding-right: 12px">
            </div>
        </div>

Я пытаюсь вызвать щелчок на bsdatefield, но он все еще не работает. Вот код, который вызывается при нажатии на изображение

clickOnDateField(slug) {
    $( document ).ready(function() {
      $('#' + slug).click();
    });
  }

Answer 1

@ Роб указал мне правильное направление

Вместо использования отдельного изображения я использовал значок изображения в качестве фона поля ввода, например:

[ngStyle]= "{'background': 'url('+ (calanderImageLink) +') right no-repeat'}"

Пользователь чувствует, что есть значок, но этот значок на самом деле является фоном поля ввода, и когда пользователь нажимает даже на значок, появляется DatePicker