动态删除 Datepicker 函数

Posted 2023-05-07

【中文标题】动态删除 Datepicker 函数

【英文标题】：Remove Datepicker Function dynamically

【发布时间】：2011-08-31 17:41:19

【问题描述】：

我想根据下拉列表选择的值删除日期选择器功能。我尝试了以下代码，但是当我将光标放在文本框中时它仍然显示日历。请给我一个建议。

$("#ddlSearchType").change(function () 
    if ($(this).val() == "Required Date" || $(this).val() == "Submitted Date") 
        $("#txtSearch").datepicker();
     else 
        $("#txtSearch").datepicker("option", "disabled", true);
    
);

【问题讨论】：

"Required Date" 和 "Submitted Date" 不是下拉列表的值，它们是标签。查找 Required Date，您需要的值将在下拉列表的 value 属性中。

为什么不在文档就绪时加载它（日期选择器），而不是根据您的选择切换隐藏/显示？

我使用“Required Date”和“Submitted Date”作为值。是的，我可以稍后将它们更改为 0,1,2,3 值。感谢您的建议。

@c0mrade 是的，这是我能想到的最后一种方式。但我想知道是否有动态绑定和撤销 jquery 功能？

【参考方案1】：

您可以尝试启用/禁用方法，而不是使用选项方法：

$("#txtSearch").datepicker("enable");
$("#txtSearch").datepicker("disable");

这会禁用整个文本框。所以也许你可以改用datepicker.destroy()：

$(document).ready(function() 
    $("#ddlSearchType").change(function() 
        if ($(this).val() == "Required Date" || $(this).val() == "Submitted Date") 
            $("#txtSearch").datepicker();
        
        else 
            $("#txtSearch").datepicker("destroy");
        
    ).change();
);

Demo here.

【参考方案2】：

在您不想要的时候销毁 datepicker 的实例，并在必要时创建新的实例。

我知道这很丑，但只有这似乎有效......

Check this out

 $("#ddlSearchType").change(function () 
        if ($(this).val() == "Required Date" || $(this).val() == "Submitted Date") 
                $("#txtSearch").datepicker();

         
          else 
                $("#txtSearch").datepicker("destroy");                    
         
 );

【参考方案3】：

只需将 datepicker 绑定到一个类，而不是将它绑定到 id 。当你想撤销日期选择器时删除类...

$("#ddlSearchType").change(function ()  
  if ($(this).val() == "Required Date" || $(this).val() == "Submitted Date")                    
    $("#txtSearch").addClass("mydate");
    $(".mydate").datepicker()
   else  
    $("#txtSearch").removeClass("mydate");
   
); 

【讨论】：

如果以前有效，那么现在无效

【参考方案4】：

好吧，我遇到了同样的问题并尝试“破坏”，但这对我不起作用。然后我发现了以下工作 我的 html 是：

<input placeholder="Select Date" id="MyControlId" class="form-control datepicker" type="text" />

Jquery 对我有用：

$('#MyControlId').data('datepicker').remove();

【讨论】：

这对我有用，而不是其他答案，谢谢哥们。

【参考方案5】：

用官方API怎么样？

根据 API 文档：

DESTROY：完全删除日期选择器功能。这会将元素返回到其初始化前的状态。

用途：

$("#txtSearch").datepicker("destroy");

将输入恢复到其正常行为并

$("#txtSearch").datepicker(/*options*/);

再次显示数据选择器。

【讨论】：

欢迎提供解决方案链接，但请确保您的答案在没有它的情况下有用：add context around the link 这样您的其他用户就会知道它是什么以及为什么会出现，然后引用最相关的您链接到的页面的一部分，以防目标页面不可用。 Answers that are little more than a link may be deleted.

【参考方案6】：

这是我使用的解决方案。它有更多的行，但它只会创建一次日期选择器。

$('#txtSearch').datepicker(
    constrainInput:false,
    beforeShow: function()
        var t = $('#ddlSearchType').val();
        if( ['Required Date', 'Submitted Date'].indexOf(t) ) 
            $('#txtSearch').prop('readonly', false);
            return false;
        
        else $('#txtSearch').prop('readonly', true);
    
);

除非 ddlSearchType 的值为“Required Date”或“Submitted Date”，否则不会显示日期选择器