Question

我正在使用标准的jQuery Datepicker，我需要根据一些日常状态信息修改每个TD中的文本。我意识到我可以连接“beforeShowDay”事件，但这只允许我修改每个日期的css信息。希望在整个日历上举办活动，例如“afterRender”等。

我可以修改显示的第一个日历，但如果用户更改了几个月或几年，我（或我的代码）就不在循环中了。

Answer 1

如果在jquery-ui版本1.9之前需要“afterShow”-event，则可以覆盖datepicker._updateDatepicker函数。

例如：

$(function() {
    $.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker;
    $.datepicker._updateDatepicker = function(inst) {
        $.datepicker._updateDatepicker_original(inst);
        var afterShow = this._get(inst, 'afterShow');
        if (afterShow)
            afterShow.apply((inst.input ? inst.input[0] : null));  // trigger custom callback
    }
});

现在，datepicker会在每次更新datepicker元素后引发“afterShow”事件。

我知道这不是解决这个问题的最佳方法，但它比改变原始的jquery-ui代码要好。

Answer 2

看起来afterShow()和onAfterChangeMonthYear()已经提出了增强功能，但似乎还没有任何相关工作。

你可以（现在）自己实现它......

下载latest uncompressed source v1.8.13 - 请参阅http://blog.jqueryui.com/2011/05/jquery-ui-1-8-13/并搜索_updateDatepicker: function(inst) {，然后添加新的函数调用。以下是我如何布置新功能：

_updateDatepicker: function(inst) {
    // existing jQueryUI code cut for brevity
    this._afterShow(inst);
},
_afterShow: function(inst) {
    var afterShow = this._get(inst, 'afterShow');
    if (afterShow)
        afterShow.apply((inst.input ? inst.input[0] : null),
                [(inst.input ? inst.input.val() : ''), inst, inst.dpDiv.find('td:has(a)')]);
},

我只是将函数编码为与beforeShow()具有相同的签名，但随后添加了第3个参数 - <td>元素数组。

然后，您可以按常规方式将自己的回调添加到datepicker()。

<script type="text/javascript">
    $(function() {
        $('#dp').datepicker({
            afterShow: function (input, inst, td) {
               console.log(td); // needs a browser with a console (Chrome / Firefox+Firebug for example)
            }
        });
    });
</script>
<input type="text" id="dp"/>

注意：我没有做过大量的测试，但似乎是在渲染了datepicker之后调用的。如果不完全符合您的要求，可能还需要更多的工作来满足您的要求。希望它有所帮助： - ）

Answer 3

你可以这样做：

$('.selector').datepicker({
   beforeShowDay: function(date) { 
       /*some function to do before display*/ 
   },
   onChangeMonthYear: function(year, month, inst) { 
       /*some function to do on month or year change*/ 
   }
});

See DOCs

Answer 4

我知道它的另一个丑陋的黑客，但我只是添加一个超时，像这样;

$('.selector').datepicker({
   beforeShowDay: function(date) { 
       setTimeout(function() {
            //your code  
       }, 50); /* TD content is already rendered */ 
   },
});

jQuery Datepicker“After Update”事件或等效事件

4 个答案: