jQuery Datepicker"After Update"事件或等效事件

and*_*eer 10 javascript jquery jquery-ui javascript-events

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

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

小智 22

如果你需要在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
    }
});
Run Code Online (Sandbox Code Playgroud)

现在,datepicker在每次更新datepicker元素后引发"afterShow"事件.

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


and*_*dyb 13

貌似afterShow()onAfterChangeMonthYear()已经提出了一个改进,但似乎并没有成为他们的任何工作呢.

你可以(现在)自己实现它......

下载最新的未压缩源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)')]);
},
Run Code Online (Sandbox Code Playgroud)

我只是将函数编码为具有相同的签名,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"/>
Run Code Online (Sandbox Code Playgroud)

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

  • 好答案.但是你应该在外部附加你的修改,以便保留原始的jquery文件.在正确的JS文件中,您可以进行修改,例如保存原始函数`$ .datepicker._updateDatepicker_original = $ .datepicker._updateDatepicker;`并修改新版本(首先调用旧版本). (6认同)