jQuery 日期选择器“更新后"事件或等效 [英] jQuery Datepicker "After Update" Event or equivalent

问题描述

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

I am using a standard jQuery Datepicker and I need to modify the text in each TD based on some daily status information. I realize I can wire up the beforeShowDay event but that only allows me to modify CSS information for each date. Hoping for an event on the entire calendar such as afterRender etc.

我可以修改显示的第一个日历，但如果用户更改了月份或年份，我(或我的代码)将退出循环.

I can modify the first calendar that is displayed but if the user changes months or years, I (or my code) is out of the loop.

推荐答案

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

Looks like afterShow() and onAfterChangeMonthYear() are already raised an enhancements, but there doesn't seem to be any work on them yet.

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

You could (for now) implement it yourself…

下载最新的未压缩源 v1.8.13 - 参见 http://blog.jqueryui.com/2011/05/jquery-ui-1-8-13/ 并搜索 _updateDatepicker: function(inst) { 然后添加一个新的函数调用.以下是我如何布置新功能:

Download the latest uncompressed source v1.8.13 - see http://blog.jqueryui.com/2011/05/jquery-ui-1-8-13/ and search for _updateDatepicker: function(inst) { then add a new function call. Here is how I laid out the new function:

_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() 但随后添加了第三个参数 - 元素的数组.

I just coded the function to have the same signature as beforeShow() but then added a 3rd parameter - an array of <td> elements.

然后您可以按照通常的方式将自己的回调添加到 datepicker().

You can then add your own callback to the datepicker() in the usual way.

<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"/>

注意:我没有做过大量的测试，但它似乎是在日期选择器呈现后调用的.如果这不是您所追求的，则可能需要做更多工作才能满足您的要求.希望它仍然有帮助:-)

Note: I've not done a great deal of testing, but it seems to be called after the datepicker is rendered. It may need some more work to fit in with your requirements if it's not exactly what you are after. Hope it helps nonetheless :-)

这篇关于jQuery 日期选择器“更新后"事件或等效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！