How to subclass a specific jqueryui widget method?

Question

Since I updated jQueryUI to 1.8 I found a couple of issues in our implementations and I could fix it myself without waiting for a fix on their end if I could find out how to subclass a specific method of the datepicker widget so I call the parent code and then execute my code.

I was reading on $.widget but I just can't wrap my head around how that is suppose to work.

I tried something like this:

$.widget("ui.datepicker", {
  _showDatepicker: function(input) {
   alert('Yo');
   $.datepicker.prototype._showDatepicker.apply(this,arguments);
   alert('Hey!');
  }
 });

And all sorts of other variations and beging to think I just don't understand the 'extendability' of jQueryUI or it just can't be done.

Anybody knows how I can achieve this ?

Thx

Answer 1

The datepicker in 1.8 doesn't use the widget factory. The other widgets do but the datepicker hasn't been refactored to use the widget factory yet, something that will happen for a later version of jQuery UI.

You can do something like for the datepicker:

var old_showDatepicker = $.datepicker._showDatepicker;
$.datepicker._showDatepicker = function(input){
    console.log('hello');
    old_showDatepicker.apply(this,arguments);
    console.log('goodbye');
}

And this for the slider:

$.widget("my.slider", $.ui.slider, {
    _value: function(input) {
        console.log('Yo');
        $.ui.slider.prototype.value.apply(this,arguments);
        console.log('Hey!');
    }
});

Answer 2

ui.tabs has gotten lots of love, an alternate perhaps less code way is this:

https://github.com/jquery/jquery-ui/blob/c1cda180a93a6c0a63cf21a68dacb54233e03d03/ui/jquery.ui.tabs.js#L688

(function( $, dp ){
    var _showDatepicker = dp._showDatepicker;

    dp._showDatepicker = function( input ){

        alert( 'Yo' );
        _showDatepicker.apply( this, arguments );
        alert( 'Hey!' );
    }
}( jQuery, jQuery.ui.datepicker );

TBH, I would not look at datepicker. The widget factory is far more advanced, just look at how ui.tabs hooks up events and methods at the same time here