AUI datePicker does not trigger change event

Adrian Wieczorek
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
November 28, 2013

I'm trying to detect change on the input field with datePicker attached, under JS, but it seems like the change event isn't triggered after the date is selected by the user. That was a known problem with jQuery UI datePicker too, however, there you can use "onSelect" property to define your own callback to be fired as a workaround. Unfortunatelly, this is not the case in AUI version of datePicker. I've tried the code below in Sandbox and neither alert got called:

AJS.$("#demo-date-picker").datePicker({
    overrideBrowserDefault: true,
    onSelect: function() {
        alert('Date selected!');
        $(this).change();
    }
});

AJS.$("#demo-date-picker").change(function() {
   alert('change event triggered!');
});
<input id="demo-date-picker" type="date" />

Any thoughts?

2 answers

1 accepted

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

0 votes
Answer accepted
Adrian Wieczorek
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 4, 2013

Thanks Jonathan. Actually, I did a quick fix that solves the problem:

https://bitbucket.org/atlassian/aui/pull-request/527/aui-1967-trigger-the-change-event-when/diff

And related issue is here:

https://ecosystem.atlassian.net/browse/AUI-1967

Adrian Wieczorek
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 11, 2013

As fix has been merged with the upstream I accepted that answer.

1 vote
Jonathon Creenaune
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
December 3, 2013

Adrian, unfortunately the AUI datepicker wraps rather than extends the jQuery UI datepicker; it does not support all of the options provided by the jQuery UI component. The only options available are those at https://docs.atlassian.com/aui/5.3/docs/datePicker.html .

Unfortunately I can't offer a short-term workaround - the code for the AUI component's internal onSelect handler is here https://bitbucket.org/atlassian/aui/src/155bb6e57be935556f9e03dbeae946d41c6b2faa/auiplugin/src/main/resources/js/atlassian/aui-date-picker.js#cl-76; there doesn't seem to be anything you can hook into (.val() doesn't trigger .change() events in jQuery).

Long-term, can you please raise an issue for this on the AUI issue tracker https://ecosystem.atlassian.net/browse/AUI ?

TAGS
AUG Leaders

Atlassian Community Events