0

I am using datepicker which is working fine but I want to make the popup visible even if user click on image which is inside the inputfield

        <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>

I am trying to trigger a click on bsdatefield but still its not working. Here is the code which is being called on click of image

clickOnDateField(slug) {
    $( document ).ready(function() {
      $('#' + slug).click();
    });
  }
Zohab Ali
  • 8,426
  • 4
  • 55
  • 63
  • What textfield do you mean? there is no textfield in your html code. – Rob Rombouts Oct 31 '18 at 09:28
  • 1
    I meant `input field` – Zohab Ali Oct 31 '18 at 09:34
  • 1
    The problem might be that your image is not inside your inputfield. If you want the image to be inside your inputfield as an icon, you can set it as a backgroundimage. if you want to do that you can follow [this link](https://stackoverflow.com/questions/917610/put-icon-inside-input-element-in-a-form). – Rob Rombouts Oct 31 '18 at 09:56

1 Answers1

1

@Rob pointed me to the right direction

Instead of using separate image I used image icon as background of input field like this:

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

User feels like there is an icon but that icon is actually the background of input field, and when user click even on icon then DatePicker shows up

Zohab Ali
  • 8,426
  • 4
  • 55
  • 63