Question

我想删除datepicker函数，具体取决于下拉列表选择的值。我尝试以下代码，但是当我将光标放在文本框中时它仍然显示日历。请给我一个建议。

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

enter image description here

Answer 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

Answer 2

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

我知道这很难看但只是这似乎有效......

Check this out

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

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

Answer 3

只需将datepicker绑定到类，而不是将其绑定到id。如果要撤消日期选择器，请删除该课程。

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

Answer 4

我有同样的问题并试过“破坏”，但这对我没用。然后我发现了以下的工作我的HTML是：

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

Jquery那对我有用：

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

Answer 5

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

$('#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的值为＆＃34;所需日期＆＃34;否则不会显示日期选择器。或＆＃34;提交日期＆＃34;

Answer 6

使用官方API怎么样？

根据API文档：

DESTROY：完全删除datepicker功能。这将使元素返回到pre-init状态。

使用：

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

将输入恢复为正常行为和

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

再次显示数据贴纸。

动态删除Datepicker函数

6 个答案: