jQueryUI日期选择器的beforeShow事件未触发。

Question

无论我尝试什么，都无法使日期选择器的 beforeShow 事件触发。这是我的代码：

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

我已经为我的日期选择器添加了beforeShowDay和onSelect事件，它们确实正确地触发。还有其他人遇到这个问题吗？

- bestattendance

---

你正在使用哪些版本的jquery和jqueryUI？ - Leopd

Answer 1

这是我的团队想出的解决方案，这样我们就不必每次更新时都记得修改jQuery文件。只需将以下代码添加到您自己的脚本中并包含即可：

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

- Big McLargeHuge

---

这是正确的答案。完美地运行了。谢谢！ - Matt

Answer 2

实际上，这种方式更加正确（并且遵循插件/类模式）：

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

- clubclifton

---

因为答案不够清晰，我想指出这段代码应该放在 _inlineDatepicker 方法中，在 this._updateAlternate(inst) 这行代码的下一行。在完整的 jquery-ui-1.8.23.js 文件中，这应该是第 7156 行。 - Big McLargeHuge

Answer 3

我找到了解决方法。 您需要在jquery.ui.datepicker.js（完整版本）中添加3行代码。

在第274行附近，找到this._updateAlternate(inst); 在这一行之后，加入以下内容：

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

来自jqueryui.com的版本没有内联日期选择器启用beforeShow选项。使用这段代码，beforeShow将被启用。

- user632723

---

如答案中所述，此方法将启用beforeShow。然而，根据http://jqueryui.com/demos/datepicker/#event-beforeShow的定义，无法以这种方式访问“input”和“inst”参数。 - Big McLargeHuge

Answer 4

我想使用beforeShow来更新结束日期datepicker上的最小日期，以反映在开始日期datepicker中设置的日期。我已经查看了这里和其他地方发布的许多复杂解决方案。也许我错过了什么，但是以下非常简单的代码适用于我。

如果尚未设置开始日期并尝试输入结束日期，则将焦点重置为开始日期。如果已设置开始日期，则相应地设置结束日期的最小日期。

    $(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"/>

- codepuppy

Answer 5

这有点棘手，但使用setTimeout方法来启动函数对我很有效。

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

- MaoTseTongue

Answer 6

你之前有给这个元素分配datepicker()吗？

在第一次分配datepicker()后，将beforeShow事件附加到元素。
如果您重新分配datepicker()到相同的元素，则它将无法正常工作。

尝试“销毁”并重新分配datepicker()，这对我很有效。

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

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

- abhijeet meshram