测试元素是不是已经有 jQuery datepicker

Posted 2023-05-07

【中文标题】测试元素是不是已经有 jQuery datepicker

【英文标题】：Test if element already has jQuery datepicker测试元素是否已经有 jQuery datepicker

【发布时间】：2011-02-04 11:34:52

【问题描述】：

我有一个包含许多输入元素的表单。有些是带有 jQ​​uery UI datepicker alraedy 的日期字段：

$("#someElement").mask("9?9/99/9999").datepicker(showOn: 'button', buttonText:'Click here to show calendar', duration: 'fast', buttonImageOnly: true, buttonImage: /images/calicon.gif' );

然后我有一个键命令绑定到这个函数：

function openCalendar() 
    var selection = document.activeElement;

    //  Need to test here if datepicker has already been initialized 
        $(selection).datepicker("show");
    // 

这对于已经有日期选择器的元素非常有用。但是，任何其他字段都会引发 javascript 错误。我想知道测试日期选择器是否已经在该字段上初始化的最佳方法。

【参考方案1】：

哇，简直不敢相信我错过了这个。 ui.datepicker.js 的第 108 行：

/* Class name added to elements to indicate already configured with a date picker. */
markerClassName: 'hasDatepicker',

所以我只需要测试hasClass('hasDatepicker')。这似乎是最直接的方法。此外，此语句检查日期选择器当前是否打开（对于任何感兴趣的人）：

if ($("#ui-datepicker-div").is(":visible") && $("#ui-datepicker-div").html() != "") 
    // datepicker is open. you need the second condition because it starts off as visible but empty

【讨论】：

要检查 jQuery UI 自动完成是否已初始化，我使用了这个：$('#myinput').is(':data(autocomplete)')。我认为这也适用于日期选择器。

仅仅因为标记类存在并不总是意味着日期选择器在节点上。在 Datatables 中，当它切换到卡片视图时，日期选择器会从节点中删除，但类仍然存在！因此，如果需要重新绑定，则需要添加上述额外检查并删除该类，因为 datepicker 在内部使用该类作为代理来防止多次绑定。

【参考方案2】：

1）如果代码在尝试打开日期选择器时抛出错误，可以将代码放入try..catch中

2) 初始化日期选择器时可以给输入字段设置一些数据

$("#someElement").data("datepicker-initialized", true);

3) 您可以使用 datepicker 插件存储的数据

if($("#someElement").data("datepicker") != null)
   // datepicker initialized

或

if($.data($('#someElement').get(0), 'datepicker'))
   // datepicker initialized

4) datepicker 内部使用函数 _getInst

if($.datepicker._getInst($('#someElement')[0]) != null)

该方法与示例 3 几乎相同。

找不到更好的解决方案。

【讨论】：

谢谢！这对我帮助很大。

if($("#someElement").data("datepicker") !== null) 不完全正确，因为data() 返回undefined，而不是null。不过，不那么严格的!= 比较也有效。

我检查了 jQuery 1.5，它是 2010 年 4 月的最新版本，以确保它返回 undefined 或 null。它返回undefined。我更新了我的答案。感谢您的评论。

【参考方案3】：

一个基本的解决方案是在日期选择器附件时设置一个属性，然后对其进行测试：

$("#someElement").mask("9?9/99/9999")
.datepicker(showOn: 'button', buttonText:'Click here to show calendar', duration: 'fast', buttonImageOnly: true, buttonImage: /images/calicon.gif' )
.attr("data-calendar", "true");

那么你可以这样做：

if ($(selection).attr("data-calendar") == "true")
    $(selection).datepicker("show");

有没有更直接的方法？

【讨论】：

我喜欢这种方法，但我会使用addClass("data-calendar")，这样您就可以使用这样的简单选择器：$(".data-calendar").datepicker("show");。

【参考方案4】：

我还有一个案子。 我的脚本正在复制最后一个表格元素，包括日期选择器。

jquery 将无法工作，因为复制的元素已标记为“hasDatepicker”。

要在新元素中激活日期选择器，请删除该类名并启动它，如下所示。

 $("#yournewelementid").attr("class","your-class-name"); 
 $("#yournewelementid").datepicker();    

【参考方案5】：

如果 section 是 datepicker 的 dom 元素，请检查是否已经初始化，如果没有先将其初始化为 datepicker（您可以添加属性）然后显示它！

    // If already initialized        
    if ( typeof selection !== 'undefined' && selection.length > 0)
         $(selection).datepicker('show');
    // otherwise initialize first and show
    else 
         $(selection).datepicker().datepicker('show');

【讨论】：

请不要只在答案中提供一大堆代码。给出一些背景和解释，说明您为什么认为这可以解决问题。我们的想法是创建一个问答体系，以帮助这些特定的人和未来的其他人提供一般有用的信息。

【参考方案6】：

这是我的解决方案:)

if(typeof jQuery.fn.datepicker !== "undefined")

【讨论】：

这是测试当前窗口中是否有日期选择器可用，而不是在输入时。