web-dev-qa-db-fra.com

Supprimer la fonction Datepicker dynamiquement

Je souhaite supprimer la fonction datepicker en fonction de la valeur sélectionnée de la liste déroulante. J'essaie les codes suivants, mais il montre toujours le calendrier lorsque je place le curseur dans la zone de texte. Veuillez me donner une suggestion.

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

enter image description here

javascriptjqueryjquery-uijquery-ui-datepicker
37
TTCG

Vous pouvez essayer les méthodes activer/désactiver au lieu d'utiliser la méthode option:

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

Cela désactive la zone de texte entière. Vous pouvez donc utiliser datepicker.destroy() à la place:

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

Démo ici .

82
Salman A

Détruisez l'instance de datepicker lorsque vous ne le souhaitez pas et créez une nouvelle instance si nécessaire.

Je sais que c'est moche mais seulement cela semble fonctionner ...

Vérifiez cela 

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

         }
          else {
                $("#txtSearch").datepicker("destroy");                    
         }
 });
22
Jishnu A P

Liez simplement le sélecteur de date à une classe plutôt que de le lier à l'id. Supprimez la classe lorsque vous souhaitez révoquer le sélecteur de date ...

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

Eh bien, j'ai eu le même problème et j'ai essayé de "détruire" mais cela n'a pas fonctionné pour moi. Ensuite, j'ai trouvé que le travail suivant autour de Mon HTML était:

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

Jquery qui fonctionne pour moi:

$('#MyControlId').data('datepicker').remove();
2
Avneesh Srivastava

que diriez-vous d'utiliser l'officiel API ?

Selon le document API:

DESTROY: Supprime complètement la fonctionnalité de sélection de date. Cela ramènera l'élément à son état pré-init.

Utilisation:

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

pour restaurer l'entrée à son comportement normal et

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

pour afficher à nouveau le sélecteur de données.

0
user1344654

C'est la solution que j'utilise. Il a plus de lignes mais il ne créera le sélecteur de date qu'une seule fois.

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

Le sélecteur de date n'apparaîtra que si la valeur de ddlSearchType est "Date requise" ou "Date soumise"

0
johanDior