Eliminar la función Datepicker dinámicamente

Question

Deseo eliminar la función datepicker según el valor seleccionado en la lista desplegable. Intento los siguientes códigos, pero todavía muestra el calendario cuando coloco el cursor en el cuadro de texto. Por favor dame una sugerencia

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

Answer 1

Usted puede probar los métodos de activar/desactivar en lugar de utilizar el método de opción:

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

Esto desactiva todo el cuadro de texto. Así que puede ser que usted puede utilizar en lugar 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

Sólo se unen el selector de fechas a una clase en lugar de unirlo al ello. Retire la clase cuando se quiere revocar el selector de fechas ...

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

Answer 3

Destruye la instancia del datepicker cuando no la quieras y crea una nueva instancia siempre que sea necesario.

Sé que esto es feo, pero sólo esto parece estar funcionando ...

Check this out

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

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

Answer 4

Esta es la solución que yo uso. Tiene más líneas pero solo creará el datepicker una vez.

$('#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); 
    } 
}); 

El selector de fechas no se mostrará a menos que el valor de ddlSearchType es "fecha requerida" o "Fecha de presentación"

Answer 5

Bueno, yo tenía el mismo problema y trataron de "destruir", pero que no funcionó para mí. Entonces me encontré siguiente trabajo alrededor Mi HTML fue:

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

Jquery que funcionan para mí:

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