How to extend jQuery UI datepicker to modify Today button and add help icon

问题

I would like to extend the jQuery UI datepicker widget (and call it datepickerHelp) that is based upon the jQuery UI datepicker widget. The reason I am interested in an extension rather than directly modifying the jQuery UI source is because an extension would let me server jQuery UI from a fast CDN.

The extension would accomplish two things:

Overrides the Today button so, when it is clicked, today's date is selected and the datepicker closes.
Prepend a help icon before the Today button.

I created this fiddle to demonstrate what I am looking for but it does not work as the Today button does not do anything and the help icon disappears when the Prev and Next icons are clicked to change months. Here is the JavaScript:

$.widget("ui.datepickerHelp", {
  _init: function() {
    var $el = this.element;
    $el.datepicker(this.options);
  },
  _gotoToday: function(id) {
    var target = $(id);
    var inst = this._getInst(target[0]);
    if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
      inst.selectedDay = inst.currentDay;
      inst.drawMonth = inst.selectedMonth = inst.currentMonth;
      inst.drawYear = inst.selectedYear = inst.currentYear;
    } else {
      var date = new Date();
      inst.selectedDay = date.getDate();
      inst.drawMonth = inst.selectedMonth = date.getMonth();
      inst.drawYear = inst.selectedYear = date.getFullYear();
      // the below two lines are new
      this._setDateDatepicker(target, date);
      this._selectDate(id, this._getDateDatepicker(target));
    }
    this._notifyChange(inst);
    this._adjustDate(target);
  }
});

$(".datepicker").datepickerHelp({
  showButtonPanel: true,
  changeMonth: true,
  changeYear: true,
  showOtherMonths: true,
  beforeShow: function(input) { //prepend help button
    setTimeout(function() {
      var buttonPane = $(input).datepicker("widget").find(".ui-datepicker-buttonpane");
      var btn = $("<img alt='Help' title='Help' src='http://www.amazegps.com/images/shop/helpIcon.png' width='26' height='26' style='float: left; margin: 0.6em 0.2em 0.4em; cursor: pointer;' />");
      btn.prependTo(buttonPane);
    }, 1);
  }
})

My demo was cobbled together from these SO answers:

Irvin Dominin's answer to this question shows an example for how to extend the datepicker, which I used as a starting point.
This example addresses the Today button but it is not 'packaged' as an extension where the existing _gotoToday method is properly overridden.
This example tries to address the help icon but, since it is implemented in the beforeShow method, the icon disappears when navigating through the calendar. The solution I need should modify the existing button panel and is 'packaged' into the same extension.

Could someone either fix my demo so it is a proper extension or provide pointers or resources that explain how to extend the jQuery UI datepicker?

来源：https://stackoverflow.com/questions/41066090/how-to-extend-jquery-ui-datepicker-to-modify-today-button-and-add-help-icon

标签

jquery-ui

jquery-plugins

jquery-ui-datepicker