0

I have a bootstrap DatePicker, and next to it is an empty Input of type Text.

Whenever a date is selected in the DatePicker, this value is autofilled (not autocomplete) into the Input.

I want to detect this by attaching an event to the Input. There doesn't seem to be a solution after trying almost a hundred different solutions.

From this link it says there is no way to attach an event due to browsers all handle autofill differently.

The solution from the page says is to use polling.

Here is my code:

<div class="product-options">
        <div class="input-group date" data-picker-class="product-options pp-date-time-picker">
        <input type="text" name="option[248]" value="2020-11-19" data-date-format="YYYY-MM-DD" id="input-option248" class="form-control">
        <span class="input-group-btn">
        <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
        </span></div>
</div>

$('.product-options input[type="text"]').on('blur input change keyup select propertychange', autoUpdatePriceUsingDate);

<div class="bootstrap-datetimepicker-widget dropdown-menu top pull-right product-options pp-date-time-picker" style="display: none; position: absolute; inset: auto 20px 127.4px auto;">...</div>

The bootstrap-datetimepicker-widget class hooks to this function via click, keydown and mousedown:

function() {
  return a.apply(b || this, e.concat(d.call(arguments)))
}

Is there a 2020 solution?

charleslcso
  • 182
  • 1
  • 1
  • 16

0 Answers0