tempus-dominus: Trigger "change" Events of Input Element

For example, if we use the Simple Setup (jQuery) where the input element has an input group and has a jQuery event attached by:

$("#datetimepicker1Input").on("change", () => alert('something'));

then we convert the input to datetime picker by:

new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));

The original “change” event of the input will not be fired unless the original event is attached to the div#datetimepicker1 and the event name is “change.td”.

It would be more convenient if the datetime picker can trigger the input’s original events. This can be done by:

Change the event type from “change.td” to “change” before triggering the original events (either jQuery event or native HTML element event)
Fire the event attached to the input element (not the enclosing DIV)

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 1
Comments: 17 (13 by maintainers)

Commits related to this issue

Fixed clear() doesn't erase text of date. #2472 Fixed clear button event cycle. #2516 Fixed 2 digit formatting. #2513 Trigger native change event on input when available - fixes #2401 via #2533 Fixes ... — committed to Eonasdan/tempus-dominus by Eonasdan 2 years ago
Fixed clear() doesn't erase text of date. #2472 Fixed clear button event cycle. #2516 Fixed 2 digit formatting. #2513 Trigger native change event on input when available - fixes #2401 via #2533 Fixes ... — committed to Eonasdan/tempus-dominus by Eonasdan 2 years ago
Dev master (#2546) * sonarqube issues * plugins and locales! * sonarqube issues * plugins and locales! * trying out some plugin stuff * tiny di works * clean packagelock * fixed ... — committed to Eonasdan/tempus-dominus by Eonasdan 2 years ago
Development (#2535) Fixed clear() doesn't erase text of date. #2472 Fixed clear button event cycle. #2516 Fixed 2 digit formatting. #2513 Trigger native change event on input when available - fixe... — committed to KingWTD/bootstrap-datetimepicker by Eonasdan 2 years ago

Most upvoted comments

Either the user changes the input manually, or the user changes the input value by the datetime picker, the same plain old “change” event should be fired. Of course, if the user choose to add another listener to the datetime picker’s “changed.td”, it should be also fine. I believe this should be the most common usage of the date timer picker. Thank you for considering this.

hkvstore on Sep 14, 2021

But the point of this issue was to trigger the ORIGINAL (non namespaced) events (i.e… “change”) already added to the input element (before tempusDominus.TempusDominus is created) so users do not need to add handlers for the namespaced (“change.td”) event. (Please refer to the first post.)

hkvstore on Feb 25, 2022

The events are namespaced. You’re looking for change.td

Eonasdan on Feb 25, 2022

It does not work as expected. e.g.

document
  .getElementById('datetimepicker1Input')
  .addEventListener('change', () => alert('change event fired'));

new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'), {
  //put your config here
});

The change event is only fired when the input loses focus, not fired after the datetime picker changes the data and close the calendar.

Note: It should also works for jQuery, e.g.

$('#datetimepicker1Input').on('change', () => alert('jQuery change event fired'));

new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'), {
  //put your config here
});

hkvstore on Feb 25, 2022

Ok I see. Let me play with it and see what I can do.

The outcome you’d like to see is that if the picker is attached to an input field and a user changes the input value that there should be a plain old change event on the field e.g. step 1 right?

Eonasdan on Sep 14, 2021