CODEWITHSUNDEEP
jqueryjquery-uiknockout.jsjquery-ui-datepickerknockout-3.0
Dani
Dani

Reputation: 2488

Trigger event when updating datepicker by restriction

I've got a jQuery UI datepicker which uses restrictions. The datepicker is initialized and bound to an input element using a knockout custom binding. These date restrictions are being handled by computeds which rely on other values in my form. The thing is: by setting the datepicker restrictions the DOM updates (visibly) to another value. However, the change event registered on that element does not trigger. I'm desperate to catch this event so I can update my observable accordingly.

ko.utils.registerEventHandler(element, 'change', function() {
    console.log('this should fire when clicking the Set restrictions-button');
    var observable = valueAccessor();
    var value = $(element).datepicker('getDate');
    observable(value);
});

I created a pen just to illustrate the problem: http://codepen.io/Egidius/pen/XdyazR?editors=1011

By clicking the "Set restrictions"-button you see the date changing in the DOM. However the event does not trigger by that mutation.

Upvotes: 0

Views: 560

Answers (1)

user3297291
user3297291

Reputation: 23372

The jQuery UI datepicker doesn't trigger a change after it changes its value due to a new restriction. You can force it to do so by adding .trigger("change") or .change() to your setRestrictions method:

this.setRestrictions = function() {
   var minDate = new Date();
   minDate.setDate(minDate.getDate() + 5);
   $("input[name='date']")
     .datepicker('option', 'minDate', minDate)
     .trigger("change");
}

Also note that jQuery UI isn't very picky when triggering onSelect: it doesn't check if the value actually changed. It might be a nice feature to check this yourself in the change handler. Alternatively, you could check before triggering the change, but you'd still have to 'fix' the change triggers that happen when clicking an already selected date.

Upvotes: 1

Related Questions