Правильный способ добавления обратного вызова к jQuery DatePicker
DatePicker имеет внутреннюю функцию _adjustDate()
, которую я хотел бы добавить после.
Текущий метод
Вот как я сейчас это делаю. В принципе, просто замена функции defintion на себя, а также новые операции. Это влияет на всех датпикеров, которых я не уверен в этом.
$(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'); }
});
FYI
onChangeMonthYear
не является приемлемой альтернативой события, и параметры привязки live()
/delegate()
(не работают в IE).
Это происходит из-за необходимости применения классов/манипуляций элементов после выбора месяца. Изменение месяца воссоздает элементы в календаре; Когда это выполняется, jQueryUI недостаточно умен, чтобы наследовать изменения класса. Таким образом, мне нужно обратный вызов после изменения даты.
Ответы
Ответ 1
Я написал небольшую демонстрацию, которая делает это...
Я создаю литерал объекта, который содержит расширения для $.datepicker, а затем выполняет $.extend на $.datepicker и моем объекте.
Вы можете проверить это здесь: 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;
}
});
Ответ 2
Существует опция onSelect, которую вы можете использовать для передачи функции обратного вызова на datepicker. Похоже, это может быть встроенное решение того, что вам нужно.
$('.datepicker').datepicker({
onSelect: function(selectedDate) {
// custom callback logic here
alert(selectedDate);
}
});