beforeShow 事件未在 jQueryUI Datepicker 上触发

Posted 2023-05-07

【中文标题】beforeShow 事件未在 jQueryUI Datepicker 上触发

【英文标题】：beforeShow event not firing on jQueryUI Datepicker

【发布时间】：2011-04-27 02:13:39

【问题描述】：

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

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

我已将 beforeShowDay 和 onSelect 事件添加到我的日期选择器中，它们确实可以正确触发。有没有其他人遇到过这个问题？

【问题讨论】：

你用的是什么版本的jquery和jqueryUI？

【参考方案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));

【讨论】：

这是正确答案。工作完美。谢谢！

【参考方案2】：

其实这样更正确一点（并且遵循插件/类模式）：

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

【讨论】：

因为答案不清楚，我想指出，这段代码在_inlineDatepicker 方法中就在this._updateAlternate(inst) 行之后。在完整的 jquery-ui-1.8.23.js 中，这将位于第 7156 行。

【参考方案3】：

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

在 #274 线附近，找到这个this._updateAlternate(inst);

在这一行之后，输入以下内容：

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

来自 jqueryui.com 的版本没有为内联日期选择器启用 beforeShow。 使用此代码，启用 beforeShow。

【讨论】：

如答案中所述，此方法将启用beforeShow。但是，input 和 inst 参数无法通过 jqueryui.com/demos/datepicker/#event-beforeShow 中定义的这种方式访问​​

【参考方案4】：

我想使用 beforeShow 更新结束日期日期选择器上的最小日期，以反映开始日期日期选择器中设置的日期。我已经回顾了这里和其他地方发布的一些复杂的解决方案。我可能遗漏了一些东西，但以下非常简单的代码对我有用。

这会将焦点重置为开始日期（如果尚未设置）并尝试输入结束日期。如果已设置开始日期，则会适当地设置结束日期的最短日期。

    $(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() 分配给此元素？ 首次分配 datepicker() 后，beforeShow 事件将附加到元素。 如果您将 datepicker() 重新分配给同一个元素，那么它将无法正常工作。 尝试“销毁”并重新分配 datepicker()，这对我来说很好。

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

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