jQuery Datepicker Событие "После обновления" или эквивалент - PullRequest
Новая
       8

jQuery Datepicker Событие "После обновления" или эквивалент

10 голосов
/ 13 июня 2011

Я использую стандартный jQuery Datepicker, и мне нужно изменить текст в каждом TD на основе некоторой ежедневной информации о состоянии.Я понимаю, что могу подключиться к событию beforeShowDay, но это позволяет мне изменять информацию CSS для каждой даты.Надеясь на событие во всем календаре, например "afterRender" и т. Д.

Я могу изменить первый отображаемый календарь, но если пользователь меняет месяцы или годы, я (или мой код) выходит из цикла.

Ответы [ 4 ]

22 голосов
/ 03 мая 2012

если вам нужно событие afterShow перед jquery-ui версии 1.9, вы можете перезаписать функцию datepicker._updateDatepicker.

, например: 

$(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
    }
});

Теперь средство выбора даты вызываетСобытие afterShow после каждого обновления элемента datepicker.

Я знаю, что это не лучший способ решить эту проблему, но это лучше, чем изменение исходного кода jquery-ui.

13 голосов
/ 14 июня 2011

Похоже, afterShow() и onAfterChangeMonthYear() уже подняты улучшения, но, похоже, над ними еще не работает.

Вы могли бы (на данный момент) реализовать это самостоятельно…

Загрузить последний несжатый источник 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)')]);
},

Я просто закодировал функцию, чтобы иметь ту же сигнатуру, что и beforeShow(), но затем добавил третий параметр - массив <td> элементов.

Затем вы можете добавить свой собственный обратный вызов к 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"/>

Примечание: Я не сделалмного испытаний, но, похоже, он вызывается после того, как средство выбора даты выполнено.Может потребоваться дополнительная работа, чтобы соответствовать вашим требованиям, если это не совсем то, что вам нужно.Надеюсь, это поможет, тем не менее: -)

1 голос
/ 13 июня 2011

Вы можете сделать это: 

$('.selector').datepicker({
   beforeShowDay: function(date) { 
       /*some function to do before display*/ 
   },
   onChangeMonthYear: function(year, month, inst) { 
       /*some function to do on month or year change*/ 
   }
});

См. DOCs

0 голосов
/ 20 октября 2014

Я знаю, что это еще один уродливый хак, но я просто добавляю таймаут, как это; 

$('.selector').datepicker({
   beforeShowDay: function(date) { 
       setTimeout(function() {
            //your code  
       }, 50); /* TD content is already rendered */ 
   },
});
...