如果用户单击图标图像，如何显示 bsDatePicker 弹出窗口答案

【问题标题】：How to show bsDatePicker popup if user click on icon image如果用户单击图标图像，如何显示 bsDatePicker 弹出窗口
【发布时间】：2018-10-31 09:11:15
【问题描述】：

我正在使用运行良好的日期选择器，但我想让弹出窗口可见，即使用户点击输入字段内的图像

        <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();
    });
  }

【问题讨论】：

你的意思是什么文本字段？您的 html 代码中没有文本字段。
我的意思是input field
问题可能是您的图像不在输入字段中。如果您希望图像作为图标出现在输入字段中，则可以将其设置为背景图像。如果你想这样做，你可以关注this link。

标签： javascript jquery html angular datepicker

【解决方案1】：

@Rob 为我指明了正确的方向

我没有使用单独的图像，而是使用图像图标作为输入字段的背景，如下所示：

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

用户感觉有一个图标，但该图标实际上是输入字段的背景，当用户点击图标时，DatePicker 会出现

【讨论】：