Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Datepicker does not fire input "input" event #2078

Open
worpet opened this issue May 20, 2022 · 2 comments · May be fixed by worpet/jquery-ui#1 or #2081
Open

Datepicker does not fire input "input" event #2078

worpet opened this issue May 20, 2022 · 2 comments · May be fixed by worpet/jquery-ui#1 or #2081
Labels
Behavior shared with 1.12 Comp: Datepicker

Comments

@worpet
Copy link

worpet commented May 20, 2022 •
edited

For Datepicker, when a date is selected and the associated input's value is updated, the "change" event is fired, but the "input" event is not. I assume this is because Datepicker was originally created before the "input" event became standard.

Although this has been the longtime behavior, it looks to be a simple change to fire the "input" event at the same time.

jquery-ui/ui/widgets/datepicker.js

Lines 1111 to 1113 in e21a254

} else if ( inst.input ) {
inst.input.trigger( "change" ); // fire the change event
}

@mgol
Copy link
Member

mgol commented May 25, 2022

Thanks for the report. Since the issue is already in 1.12, given limited team resources it's not likely to be fixed by the UI team; see the project status at https://blog.jqueryui.com/2021/10/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/. PRs are welcome if they're not too complex.

This was referenced May 25, 2022
Open
Open
@hummbugg
Copy link

Don't use the change event, use the input event. Which one you use it doesn't matter they won't fire.
The problem is that the input event is not being dispatched! You have to manually dispatch the event like this:

  $( "#inputStartDate" ).datepicker({
    showOn: "button",
    buttonImage: "https://stealth-apsvaw.streamhoster.com/aetv_dashboard_hd/icons/calendar_20.png",
    buttonImageOnly: true,
    dateFormat: "mm/dd/yy",
    changeMonth: true,
    changeYear: true,
    minDate: 0,
    onSelect: function(dateText) {
      var inputEvent = new Event('input', {
          bubbles: true
      });
      document.getElementById("inputStartDate").dispatchEvent(inputEvent);
    }
  });

  document.getElementById("inputStartDate").addEventListener('input', function (event) {
    alert('date changed');
  });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Behavior shared with 1.12 Comp: Datepicker
Milestone
No milestone
3 participants
@mgol @worpet @hummbugg