The this.component selector is too greedy

[terryaney]

Expected behaviour

Want only the input-group-append item to be the popup trigger for the datepicker (specifically one icon in the input-group-append.

Actual behaviour

Both the input-group-append and the input-group-prepend trigger calendar.

Datepicker version used

1.9.

Example code

My markup looks like this:

    <div class="form-group">
        <div class="validator-container input-group date error">
            <div class="input-group-prepend">
                <span class="input-group-text" id="">Date Updated</span>
                <select class="pl-2 pr-2">
                    <option value="=">=</option>
                    <option value=">=">>=</option>
                </select>
            </div>
            <input type="text" class="form-control" placeholder="mm/dd/yyyy">
            <span class="error-msg" data-toggle="tooltip" data-placement="top auto"></span>
            <div class="input-group-append"><i class="input-group-text fal fa-calendar-day"></i></div>
        </div>
    </div>

With the input looking like this:

With the current code

this.component = this.element.hasClass('date') ? this.element.find('.add-on, .input-group-addon, .input-group-append, .input-group-prepend, .btn') : false;

Basically the 'Date Updated' label, 'operator dropdown' and the calendar icon all trigger the calendar to appear.

To fix this, I added a componentSelector option with following default:

componentSelector: '.add-on, .input-group-addon, .input-group-append, .input-group-prepend, .btn'

Then I updated line 118 (or so) to:

this.component = this.element.hasClass('date') ? this.element.find(options.componentSelector) : false;

Then when I call .datepicker() I use the following code.

        $('.input-group.date').datepicker({
            componentSelector: "i.fa-calendar-day",

Then only the calendar icon will trigger the click. Am I too much of an edge case, or is it worth adding this feature?

[ocarreterom]

I suggest to use a data attributes selector that follows Bootstrap's API as data-toggle="datepicker".

Usage following @terryaney example:

<div class="form-group">
  [...]
  <div class="input-group-append">
    <button type="button" class="btn btn-secondary" data-toggle="datepicker">
      <i class="input-group-text fal fa-calendar-day"></i>
    </button>
  </div>
</div>

This feature could be included in v2.0 roadmap and start working on it. I can send a PR and help working on v2.0. 🚀

[ocarreterom]

Ups, there was already an issue in 2013 https://github.com/uxsolutions/bootstrap-datepicker/issues/377