Подтвердить что ты не робот

Событие beforeShow не запускается на jQueryUI Datepicker

Независимо от того, что я пытаюсь, я не могу получить событие beforeShow, чтобы запустить мой datepicker. Здесь мой код:

$('#calendar').datepicker({
inline: true,
dateFormat: 'mm,dd,yy',
beforeShow: function(input, inst) { alert('before'); }
});

Я добавил события beforeShowDay и onSelect для своего датпикера, и они правильно срабатывают. У кого-нибудь еще были проблемы с этим?

4b9b3361

Ответ 1

Вот решение, которое придумала моя команда, поэтому нам не нужно запоминать изменения файлов jQuery каждый раз при обновлении. Просто добавьте это в свой собственный script и включите его:

(function ($) {
    $.extend($.datepicker, {

        // Reference the orignal function so we can override it and call it later
        _inlineDatepicker2: $.datepicker._inlineDatepicker,

        // Override the _inlineDatepicker method
        _inlineDatepicker: function (target, inst) {

            // Call the original
            this._inlineDatepicker2(target, inst);

            var beforeShow = $.datepicker._get(inst, 'beforeShow');

            if (beforeShow) {
                beforeShow.apply(target, [target, inst]);
            }
        }
    });
}(jQuery));

Ответ 2

Собственно, это немного правильнее (и следует шаблон плагина/класса):

var beforeShow = $.datepicker._get(inst, 'beforeShow');
extendRemove(inst.settings, (beforeShow ? beforeShow.apply(target, [target, inst]) : {}));

Ответ 3

Я нашел исправление для этого. Вы должны добавить 3 строки кода в jquery.ui.datepicker.js(полная версия)

Рядом с линией # 274 найдите this._updateAlternate(inst);

Сразу после этой строки поставьте следующее:

var beforeShow = $.datepicker._get(inst, 'beforeShow');
if(beforeShow)
   beforeShow.apply();

Версия от jqueryui.com не имеет beforeShow для встроенного datepicker. С помощью этого кода функция beforeShow включена.

Ответ 4

Я хотел использовать beforeShow для обновления даты minumum на дате date date, чтобы отобразить дату, установленную в дате datepicker. Я обнаружил ряд решений, размещенных здесь и в других местах, которые были сложными. Мне может быть что-то не хватает, но для меня работает следующий довольно прямой код.

Сбрасывает фокус на дату начала, если он еще не установлен, и делается попытка ввести дату окончания. Если дата начала установлена, она устанавливает минимальную дату для конца _Date соответствующим образом.

    $(function(){
    $("#start_Date").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: "c-1:c+5",
        dateFormat: "dd-mm-yy"
    });
    $("#end_Date").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: "c-1:c+5",
        dateFormat: "dd-mm-yy",
        beforeShow: end_Range
    });

    function end_Range(){
        if ($("#start_Date").datepicker("getDate") == null ){
            $("#start_Date").focus();
        } else {
            // set minimum date range
            $("#end_Date").datepicker("option", "minDate", new Date ($("#start_Date").datepicker("getDate")));
        };
    };
});

С полями даты:

<label>Date</label><input class="datepicker" id="start_Date" type="text"/>
<label>Date</label><input class="datepicker" id="end_Date" type="text"/>

Ответ 5

Это немного сложно, но использовать метод setTimeout для запуска этой функции хорошо работает для меня.

$('#calendar').datepicker({
inline: true,
dateFormat: 'mm,dd,yy',
beforeShow: function() { 
    setTimeout(function() {
        alert('before'); 
    }, 10);
}
});

Ответ 6

Вы назначили datepicker() для этого элемента раньше?

Событие beforeShow присоединяется к элементу после того, как вы назначили datepicker() в первый раз. Если вы переназначите datepicker() для одного и того же элемента, то он не будет работать должным образом.

Попробуйте "уничтожить" и переназначить datepicker(), который хорошо работает для меня.

$('#calendar').datepicker('destroy');

$('#calendar').datepicker({
    inline: true,
    dateFormat: 'mm,dd,yy',
    beforeShow: function(input, inst) {
        alert('before');
    }
});