How to add additional event handlers to a jquery-ui datepicker instance?

Question

I've got a datepicker with an onSelect event handler. Later in my program, I want to add other onSelect handlers. Problem is, they wipe out the first one. (Fiddle.)

How can I add additional handlers without doing that?

Answer 1

You could maintain your desired calls in an array;

var firstHandler = function(dateText, inst) {
    console.log('Original Handler', dateText, inst);
};

var secondHandler = function(dateText, inst) {
    console.log('Second Handler', dateText, inst);
};

$('#datepicker').datepicker({
    onSelect: function() {
        var sinks = $(this).data("mySelects");
        for (var i = 0; i < sinks.length; i++)
            sinks[i].apply(this, arguments);
    }
}).data("mySelects", [firstHandler]);

$('#addBtn').click(function(event) {
    $('#datepicker').data('mySelects').push(secondHandler);
    $('#datepicker').data('mySelects').push(nthHandler);
});