Правильный способ добавить обратный вызов в jQuery DatePicker - PullRequest
Новая
       32

Правильный способ добавить обратный вызов в jQuery DatePicker

17 голосов
/ 04 ноября 2010

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'); }
});

FYI

onChangeMonthYear не является приемлемой альтернативой события, равно как и опции привязки live() / delegate() (не работают в IE).

Это связано с необходимостью применения классов / манипуляций с элементами после выбора месяца.Изменение месяца воссоздает элементы в календаре;когда это выполняется, jQueryUI недостаточно умен, чтобы наследовать изменения класса.Таким образом, мне нужно перезвонить после изменения даты.

Ответы [ 3 ]

34 голосов
/ 14 января 2013

Существует опция onSelect , которую можно использовать для передачи функции обратного вызова в средство выбора даты. Похоже, это может быть встроенным решением для того, что вам нужно. 

$('.datepicker').datepicker({
  onSelect: function(selectedDate) {
    // custom callback logic here
    alert(selectedDate);
  }
});
16 голосов
/ 24 августа 2011

Я написал небольшую демонстрацию, которая делает это ...

Я создаю литерал объекта, который содержит расширения для $ .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;
    }
});
0 голосов
/ 30 августа 2018

В 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);
        }
    });
...