向 jQuery DatePicker 添加回调的正确方法答案

【问题标题】：Proper way to add a callback to jQuery DatePicker向 jQuery DatePicker 添加回调的正确方法
【发布时间】：2010-11-04 20:54:47
【问题描述】：

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'); }
});

仅供参考

onChangeMonthYear 不是可接受的事件替代方案，live()/delegate()（不适用于 IE）绑定选项也不是。

这是因为需要在选择月份后应用类/操作元素。更改月份会重新创建日历中的元素；执行此操作时，jQueryUI 不够聪明，无法继承类更改。因此，我需要在更改日期后进行回调。

【问题讨论】：

您可能会生成一个自定义插件来继承数据选择器代码，并添加您自己的方法和事件。您的插件的每个实例都会在本质上进行自定义更改，而无需稍后进行修改。前任。定义插件时，请使用$.widget('ui.myDatepicker','ui.datapicker',{...}); 的 3 选项形式，请参阅this post 了解更多信息
这可能是可行的 :) 这是一个老问题，自从我发布它以来，我已经学到了很多关于 jQuery 的知识，但我想我会提供一些代表并得到答案。
-1 因为你还没有用你的 cmets 更新你的问题。
@DarthVader：同样，这不适用于这里 - 问题不是可怕的解决方案（就像你留下的那种）

标签： javascript jquery jquery-ui jquery-callback jquery-ui-datepicker

【解决方案1】：

您可以使用 onSelect 选项将回调函数传递给日期选择器。听起来这可能是您需要的内置解决方案。

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

【讨论】：

这就是我想要的，太好了！

【解决方案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;
    }
});

【讨论】：

当我有机会时，我会检查一下是否可行。问题来自自定义日历，但是当它重绘时，它不会继承更改。
和我建议的一样。一个建议是添加检查 afterAdjustDate 是否确实是一个函数：typeof afterAdjustDate === 'function'。
我没有对此进行测试，但无论如何我需要关闭这个问题。我认为它大部分看起来都是食物。如果您将演示代码复制到您的答案中（以防 jsFiddle 出现故障），我会选择这个。
jsfiddle.net/NHN4g/9是一个比较全面的demo，展示了datepicker post-draw的代码更改css...这个demo在答案中也有展示...

【解决方案3】：

在 Datepicker v1.0.0 上，您可以使用 pick 选项。

    var date = new Date();
    $('.datepicker-trigger').datepicker({
        format: 'mm/dd/yyyy',
        autoPick: false,
        startDate: date.getDate(),
        changeMonth: false,
        changeYear: false,
        autoHide: true,
        pick: function (selectedDate) {
            console.log(selectedDate);
        }
    });

【讨论】：

【解决方案4】：

打开源文件，你会看到default_options中有几个回调函数可以使用

        onSelectDate: function () {},
        onSelectTime: function () {},
        onChangeMonth: function () {},
        onGetWeekOfYear: function () {},
        onChangeYear: function () {},
        onChangeDateTime: function () {},
        onShow: function () {},
        onClose: function () {},
        onGenerate: function () {},

【讨论】：