javascript jQuery Datepicker“更新后”事件或等效事件
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6334898/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Datepicker "After Update" Event or equivalent
提问by andleer
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.
我正在使用标准的 jQuery Datepicker,我需要根据一些日常状态信息修改每个 TD 中的文本。我意识到我可以连接“beforeShowDay”事件,但这仅允许我修改每个日期的 css 信息。希望在整个日历上有一个事件,例如“afterRender”等。
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.
我可以修改显示的第一个日历,但如果用户更改了几个月或几年,我(或我的代码)将退出循环。
回答by Markus
if you need a "afterShow"-event before jquery-ui version 1.9 you can overwrite the datepicker._updateDatepicker function.
如果在 jquery-ui 1.9 版之前需要“afterShow”事件,则可以覆盖 datepicker._updateDatepicker 函数。
for example:
例如:
$(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
}
});
Now the datepicker raise an "afterShow" event after every update from the datepicker element.
现在,日期选择器在每次更新日期选择器元素后引发“afterShow”事件。
I know it isn't the best way to solve this problem, but it's better than change the original jquery-ui code.
我知道这不是解决此问题的最佳方法,但总比更改原始 jquery-ui 代码要好。
回答by andyb
Looks like afterShow()
and onAfterChangeMonthYear()
are already raised an enhancements, but there doesn't seem to be any work on them yet.
看起来afterShow()
并且onAfterChangeMonthYear()
已经提出了增强功能,但似乎还没有对它们进行任何工作。
You could (for now) implement it yourself…
你可以(现在)自己实现它......
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:
下载最新的未压缩源 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)')]);
},
I just coded the function to have the same signature as beforeShow()
but then added a 3rd parameter - an array of <td>
elements.
我只是将函数编码为具有相同的签名,beforeShow()
但随后添加了第三个参数 - 一个<td>
元素数组。
You can then add your own callback to the datepicker()
in the usual way.
然后,您可以以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"/>
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 :-)
注意:我没有进行大量测试,但它似乎是在呈现日期选择器之后调用的。如果这不是您所追求的,则可能需要做更多工作才能满足您的要求。希望它仍然有帮助:-)
回答by Naftali aka Neal
回答by Renato Gama
I know its another ugly hack but I just add a timeout, like this;
我知道这是另一个丑陋的黑客,但我只是添加了一个超时,就像这样;
$('.selector').datepicker({
beforeShowDay: function(date) {
setTimeout(function() {
//your code
}, 50); /* TD content is already rendered */
},
});