动态删除 Datepicker 函数答案

【问题标题】：Remove Datepicker Function dynamically动态删除 Datepicker 函数
【发布时间】：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" 不是下拉列表的值，它们是标签。查找，您需要的值将在下拉列表的 value 属性中。
为什么不在文档就绪时加载它（日期选择器），而不是根据您的选择切换隐藏/显示？
我使用“Required Date”和“Submitted Date”作为值。是的，我可以稍后将它们更改为 0,1,2,3 值。感谢您的建议。
@c0mrade 是的，这是我能想到的最后一种方式。但我想知道是否有动态绑定和撤销 jquery 功能？

标签： javascript jquery jquery-ui jquery-ui-datepicker

【解决方案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”，否则不会显示日期选择器

【讨论】：