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.

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

Datepicker does not fire input "input" event #2078

Open
worpet opened this issue May 20, 2022 · 2 comments
Open

Datepicker does not fire input "input" event #2078

worpet opened this issue May 20, 2022 · 2 comments

Comments

@worpet
Copy link

worpet commented May 20, 2022

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.

} 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.

@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
Development

Successfully merging a pull request may close this issue.

3 participants