I was using AngularJS and AngularStrap 2.3.7 and trying to catch the 'change'
event by listening to a <form>
element (not the input itself) and none of the answers here worked for me. I tried to do:
$(form).on('change change.dp dp.change changeDate' function () {...})
And nothing would fire. I ended up listening to the focus
and blur
events and setting a custom property before/after on the element itself:
// special hack to make bs-datepickers fire change events
// use timeout to make sure they all exist first
$timeout(function () {
$('input[bs-datepicker]').on('focus', function (e){
e.currentTarget.focusValue = e.currentTarget.value;
});
$('input[bs-datepicker]').on('blur', function (e){
if (e.currentTarget.focusValue !== e.currentTarget.value) {
var event = new Event('change', { bubbles: true });
e.currentTarget.dispatchEvent(event);
}
});
})
This basically manually checks the value before and after the focus
and blur
and dispatches a new 'change'
event. The { bubbles: true }
bit is what got the form to detect the change. If you have any datepicker elements inside of an ng-if
you'll need to wrap the listeners in a $timeout
to make sure the digest happens first so all of your datepicker elements exist.
Hope this helps someone!