DatePicker有一个内部函数_adjustDate()
,我想在之后添加一个回调函数。
这就是我目前正在做的事情。基本上,只需用自身替换函数定义,再加上新的操作。这会影响所有日期选择器,我也不确定是否需要。
$(function(){
var old = $.datepicker._adjustdate;
$.datepicker._adjustDate = function(){
old.apply(this, arguments);
// custom callback here
console.log('callback');
};
});
_adjustDate是在下一个/上个月点击期间调用的内容。该函数有三个参数。我很好奇是否有更好的方法来添加回调。
我希望最终结果看起来像这样;其中afterAjustDate
是回调句柄:
$('#datepicker').datepicker({
showButtonPanel: true
, afterAdjustDate: function(){ $(this).find('foo').addClass('bar'); }
});
onChangeMonthYear
不是一个可接受的事件替代品,也不是live()
/ delegate()
(在IE中不起作用)绑定选项。
这来自于在选择月份后应用类/操作元素的需要。更改月份会重新创建日历中的元素;执行此操作时,jQueryUI不够智能,无法继承类更改。因此,我需要在更改日期后进行回调。
我写了一个小演示来做到这一点......
我创建了一个包含$ .datepicker扩展的对象文字,然后在$ .datepicker和我的对象上执行$ .extend。
你可以在这里查看:http://jsfiddle.net/NHN4g/4/
这是扩展本身:
(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);
和演示:
(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的)
var changed = false;
$("#datepicker").datepicker({
afterAdjustDate: function(i,o,p){
if(!changed){
$('.ui-datepicker-month').css('color', '#f00');
}
changed = !changed;
}
});
有一个onSelect选项,您可以使用它将回调函数传递给datepicker。听起来这可能是您需要的内置解决方案。
$('.datepicker').datepicker({
onSelect: function(selectedDate) {
// custom callback logic here
alert(selectedDate);
}
});
在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);
}
});