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

时间:2018-10-31 09:11:16

标签: javascript jquery html angular 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();
    });
  }

1 个答案:

答案 0 :(得分:1)

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

我使用图像图标作为输入字段的背景,而不是使用单独的图像,

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

用户感觉好像有一个图标,但是该图标实际上是输入字段的背景,并且当用户甚至在图标上单击时,DatePicker也会显示