wake-up-neo.com

Entfernen Sie die Datepicker-Funktion dynamisch

Ich möchte die Datumsauswahlfunktion in Abhängigkeit vom ausgewählten Dropdown-Listenwert entfernen. Ich probiere die folgenden Codes aus, aber es wird immer noch der Kalender angezeigt, wenn ich den Cursor in das Textfeld setze. Bitte geben Sie mir einen Vorschlag.

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

enter image description here

37
TTCG

Sie können die Aktivierungs-/Deaktivierungsmethoden ausprobieren, anstatt die Optionsmethode zu verwenden:

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

Dadurch wird das gesamte Textfeld deaktiviert. Vielleicht können Sie stattdessen datepicker.destroy() verwenden:

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

Demo hier .

82
Salman A

Zerstören Sie die Instanz des Datepickers, wenn Sie dies nicht möchten, und erstellen Sie bei Bedarf eine neue Instanz.

Ich weiß, das ist hässlich, aber nur das scheint zu funktionieren ...

Check this out

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

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

Binden Sie den Datepicker einfach an eine Klasse, anstatt ihn an die ID zu binden. Entfernen Sie die Klasse, wenn Sie den Datepicker widerrufen möchten ...

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

Nun, ich hatte das gleiche Problem und habe versucht, "zu zerstören", aber das hat bei mir nicht funktioniert. Dann fand ich folgende Arbeit um mein HTML war:

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

Jquery Das funktioniert bei mir:

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

was ist mit der offiziellen API ?

Laut API-Dokument:

ZERSTÖREN: Entfernt die Datumsauswahlfunktion vollständig. Dadurch wird das Element wieder in den Zustand vor der Initialisierung versetzt.

Verwenden:

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

um die Eingabe auf ihr normales Verhalten zurückzusetzen und

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

erneut, um den Datapicker erneut anzuzeigen.

0
user1344654

Dies ist die Lösung, die ich benutze. Es hat mehr Zeilen, aber es wird nur einmal den Datepicker erstellen.

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

Die Datumsauswahl wird nur angezeigt, wenn der Wert von ddlSearchType entweder "Erforderliches Datum" oder "Übermitteltes Datum" ist.

0
johanDior