Jquery ui 如何扩展jQueryUIDatePicker来修改今天按钮和添加帮助图标

我想扩展jQueryUIDatePicker小部件（并称之为datepickerHelp），它基于。我之所以对扩展感兴趣，而不是直接修改jQueryUI源代码，是因为扩展可以让我从一个快速CDN服务jQueryUI

扩展将完成两件事：

覆盖“今天”按钮，以便在单击该按钮时，选择今天的日期并关闭日期选择器

在“今天”按钮前添加帮助图标

我创建它是为了演示我正在寻找的内容，但它不起作用，因为“今天”按钮不起任何作用，当单击“上一个”和“下一个”图标以更改月份时，“帮助”图标将消失。下面是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);
  }
})

$.widget（“ui.datepickerHelp”{
_init:function（）{
var$el=此元素；
$el.datepicker（此选项）；
},
_GoToDay:函数（id）{
var目标=$（id）；
var inst=此项。_getInst（目标[0]）；
如果（本指令（指令“gotoCurrent”）和指令当前日期）{
inst.selectedDay=inst.currentDay；
inst.drawMonth=inst.selectedMonth=inst.currentMonth；
inst.drawYear=inst.selectedYear=inst.currentYear；
}否则{
变量日期=新日期（）；
inst.selectedDay=date.getDate（）；
inst.drawMonth=inst.selectedMonth=date.getMonth（）；
inst.drawYear=inst.selectedYear=date.getFullYear（）；
//下面两行是新的
此._setDatePicker（目标，日期）；
this.\u selectDate（id，this.\u getDateDatepicker（target））；
}
此项变更（inst）；
此日期（目标日期）；
}
});
$（“.datepicker”）.datepickerHelp({
showButtonPanel：是的，
变化月：对，
变化年：是的，
showOtherMonths：是的，
beforeShow:函数（输入）{//前置帮助按钮
setTimeout（函数（）{
var buttonPane=$（输入）.datepicker（“小部件”）.find（“.ui datepicker buttonPane”）；
var btn=$（“”）；
btn.prependTo（按钮平面）；
}, 1);
}
})

我的演示是根据这些答案拼凑而成的：

• Irvin Dominin对的回答显示了如何扩展datepicker的示例，我将其作为起点
• 处理“今天”按钮，但它不是“打包”为一个扩展，其中现有的_gotoday方法被正确覆盖
• 尝试寻址帮助图标，但由于它是在beforeShow方法中实现的，因此在日历中导航时该图标将消失。我需要的解决方案应该修改现有的按钮面板，并“打包”到相同的扩展中

---

是否有人可以修复我的演示，使其成为一个适当的扩展，或者提供一些指针或资源来解释如何扩展jQuery UI datepicker？

我的问题是一个风滚草，但我认为这很有帮助。有人愿意再加一笔赏金吗？我的代表太低了，我所做的所有努力都没有奏效。提前谢谢。你的用户界面工作正常了。我认为您需要花更多的时间学习如何扩展jQuery事件。你说我不熟悉创建小部件，从解决这个问题开始，找一个关于这个问题的教程。把你的问题分成小块。确定您所说的

是什么意思，但它不起作用

。在SO上的人都是忙碌的专业开发人员，当你没有很好地定义问题时，他们不能真正花时间进行调试，也不能给他们太多的东西让他们看。@WalterStabosz谢谢你的反馈！我没有让UI正常工作（这只是我从我引用的SOs中拼凑出来的一个演示），我认为我很好地定义了这个问题，但可能它并不像应该的那样清晰。我做了编辑，希望能澄清。我的问题是风滚草，但我认为它是有帮助的。有人愿意再加一笔赏金吗？我的代表太低了，我所做的所有努力都没有奏效。提前谢谢。你的用户界面工作正常了。我认为您需要花更多的时间学习如何扩展jQuery事件。你说我不熟悉创建小部件，从解决这个问题开始，找一个关于这个问题的教程。把你的问题分成小块。确定您所说的

是什么意思，但它不起作用

。在SO上的人都是忙碌的专业开发人员，当你没有很好地定义问题时，他们不能真正花时间进行调试，也不能给他们太多的东西让他们看。@WalterStabosz谢谢你的反馈！我没有让UI正常工作（这只是我从我引用的SOs中拼凑出来的一个演示），我认为我很好地定义了这个问题，但可能它并不像应该的那样清晰。我做了编辑，希望能澄清。