将回调添加到jQuery DatePicker的正确方法

Question

DatePicker有一个内部函数,_adjustDate()我想在之后添加一个回调函数.

现行方法

---

这就是我目前正在做的事情.基本上,只需用自身替换功能定义,再加上新操作.这会影响所有日期选择器,我也不确定是否需要.

$(function(){

   var old = $.datepicker._adjustdate;

   $.datepicker._adjustDate = function(){
      old.apply(this, arguments);

      // custom callback here     
      console.log('callback');
   };

});

_adjustDate是在下一个/上个月点击期间调用的内容.该函数有三个参数.我很好奇是否有更好的方法来添加回调.

预期结果

---

我希望最终结果看起来像这样; afterAjustDate回调句柄在哪里:

$('#datepicker').datepicker({ 
       showButtonPanel: true
     , afterAdjustDate: function(){ $(this).find('foo').addClass('bar'); }
});

FYI

---

onChangeMonthYear不是可接受的事件替代,也不是live()/ delegate()(不在IE中工作)绑定选项.

这来自于在选择月份后应用类/操作元素的需要.更改月份会重新创建日历中的元素; 执行此操作时,jQueryUI不够智能,无法继承类更改.因此,我需要在更改日期后进行回调.

Answer 1

有一个onSelect选项可用于将回调函数传递给datepicker.听起来这可能是您需要的内置解决方案.

$('.datepicker').datepicker({
  onSelect: function(selectedDate) {
    // custom callback logic here
    alert(selectedDate);
  }
});

Answer 2

我写了一个小演示来做到这一点......

我创建了一个包含$ .datepicker扩展的对象文字,然后在$ .datepicker和我的对象上执行$ .extend.

你可以在这里查看:http://jsfiddle.net/NHN4g/4/

这是扩展本身:

(function($){
    var datepickerExtensions = {
        _oldAdjustDate: $.datepicker._adjustDate,
        _adjustDate: function(id, offset, period) { 
            var target = $(id);
            var inst = this._getInst(target[0]);
            var afterAdjustDate = this._get(inst, 'afterAdjustDate');
            this._oldAdjustDate(id, offset, period);
            if(afterAdjustDate && typeof afterAdjustDate === 'function'){
                afterAdjustDate(id, offset, period);
            }
        }
    }
    $.extend($.datepicker, datepickerExtensions);
})(jQuery);

和演示:

(HTML)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all">
<div class="demo">
    <p>Date: <input type="text" id="datepicker"></p>
</div><!-- End demo -->

(JavaScript的)

var changed = false;
$("#datepicker").datepicker({ 
    afterAdjustDate: function(i,o,p){
        if(!changed){
            $('.ui-datepicker-month').css('color', '#f00');
        }
        changed = !changed;
    }
});