Javascript 向 jQuery DatePicker 添加回调的正确方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4101287/
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
Proper way to add a callback to jQuery DatePicker
提问by vol7ron
DatePicker has an internal function, _adjustDate(), which I'd like to add a callback after.
DatePicker 有一个内部函数 ，_adjustDate()我想在它之后添加一个回调。
Current Method
当前方法
This is how I'm currently doing this. Basically, just replacing the function defintion with itself, plus the new operations. This effects all datepickers, which I'm not sure is desired, either.
这就是我目前正在这样做的方式。基本上，只是用它自己替换函数定义，加上新的操作。这也会影响所有日期选择器，我不确定是否需要。
$(function(){
var old = $.datepicker._adjustdate;
$.datepicker._adjustDate = function(){
old.apply(this, arguments);
// custom callback here
console.log('callback');
};
});
_adjustDate is what's called during the next/prev month clicks. The function takes three parameters. I'm curious if there's a better way to add the callback.
_adjustDate 是在下个月/上个月点击期间调用的日期。该函数接受三个参数。我很好奇是否有更好的方法来添加回调。
Expected Result
预期结果
I'd like to have the end result look like this; where afterAjustDateis the callback handle:
我想让最终结果看起来像这样；afterAjustDate回调句柄在哪里：
$('#datepicker').datepicker({
showButtonPanel: true
, afterAdjustDate: function(){ $(this).find('foo').addClass('bar'); }
});
FYI
供参考
onChangeMonthYearis not an acceptable event alternative, neither are the live()/delegate()(don't work in IE) binding options.
onChangeMonthYear不是可接受的事件替代方案，live()/ delegate()（不适用于 IE）绑定选项也不是。
This comes from the need of applying classes/manipulating elements after the month is selected. Changing the month recreates elements in the calendar; when this is performed jQueryUI is not smart enough to inherit the class changes. Thus, I need a callback after changing the date.
这来自于选择月份后应用类/操作元素的需要。更改月份会重新创建日历中的元素；执行此操作时，jQueryUI 不够智能，无法继承类更改。因此，我需要在更改日期后回调。
采纳答案by gislikonrad
I wrote a small demo that does this...
我写了一个小演示来做到这一点......
I create an object literal that contains the extensions to $.datepicker and then do $.extend on $.datepicker and my object.
我创建了一个包含 $.datepicker 扩展名的对象文字，然后在 $.datepicker 和我的对象上执行 $.extend。
You can check it out here: http://jsfiddle.net/NHN4g/4/
你可以在这里查看：http: //jsfiddle.net/NHN4g/4/
Here's the extension itself:
这是扩展本身：
(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);
And the demo:
和演示：
(html)
(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)
（javascript）
var changed = false;
$("#datepicker").datepicker({
afterAdjustDate: function(i,o,p){
if(!changed){
$('.ui-datepicker-month').css('color', '#f00');
}
changed = !changed;
}
});
回答by undeniablyrob
There is an onSelectoption that you can use to pass a callback function to the datepicker. It sounds like this might be a built-in solution to what you need.
有一个ONSELECT选项，您可以使用一个回调函数传递到日期选择器。听起来这可能是您需要的内置解决方案。
$('.datepicker').datepicker({
onSelect: function(selectedDate) {
// custom callback logic here
alert(selectedDate);
}
});
回答by jrenouard
On Datepicker v1.0.0 you can use the pickoption.
在 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);
}
});
回答by Kyle Bing
Open source file and you fill see there are several callback function you can use in default_options
打开源文件，你会看到有几个回调函数可以使用default_options
onSelectDate: function () {},
onSelectTime: function () {},
onChangeMonth: function () {},
onGetWeekOfYear: function () {},
onChangeYear: function () {},
onChangeDateTime: function () {},
onShow: function () {},
onClose: function () {},
onGenerate: function () {},
