CODEWITHSUNDEEP
javascriptjquery
Trant
Trant

Reputation: 3609

input propertyChange not working with jQuery datepicker

I am using the jQuery UI datepicker widget and I have a script which is supposed to act on inputs when their values change. It binds to 'input propertyChange' for all inputs and 'change' for selects.

The problem is for datepicker widgets it only gets the event when the user manually types into the datepicker's text box. If they use the UI calendar to pick a date for it, the input's value does indeed change BUT the event never fires!

Then I noticed I could apply a 'onSelect' option to the datepicker but this does not seemt o work for an existing datepicker, as so:

if (input.hasClass('hasDatepicker')) {
                        input.datepicker({
                            onSelect : function (dateTxt, element) {
                                alert('updated '+dateTxt);
                            }
                        });
                    }

The alert never comes, I guess because it expects you to apply the onSelect only when the widget is created.

But what I am trying to is create a universal script that attaches itself to certain pages as required so I need it to be loosely coupled. With the way this datepicker seems to funciton it is very rigid and does not lend itself well to being flexible. I also tried adding a explicit onSelect on each datepicker I need and in the onSelect just calling .change() on itself in the hopes of at least getting it to trigger the universal input propertyChange handler but it still doesn't work!

Any other ideas on how I can get an external handler to pick up datepicker updates without coding explicitly for each and every datepicker ??

Upvotes: 0

Views: 1479

Answers (2)

isJustMe
isJustMe

Reputation: 5470

You can dinamically bind the function after it has been created like this:

$('.datepicker').datepicker("option", "onSelect", 
   function (dateTxt, element) {
                                alert('updated '+dateTxt)

See the updated demo

Upvotes: 1

A. Wolff
A. Wolff

Reputation: 74420

Maybe this is what you are looking for:

$(document.body).on('change keyup','.datepicker',function(){    
    alert('updated ' + this.value)
});

http://jsfiddle.net/qebkB/6/

Upvotes: 1

Related Questions