Dynamischer JQuery-Datumsauswahlcode

Question

Ich muss einen dynamischen Filter erstellen, der Zeilen dynamisch hinzufügt/entfernt.

Es enthält eine Dropdown-Box. Abhängig von dem ausgewählten Dropdown-Box-Wert, erstelle ich eine dynamische <TD>, die ein Textfeld oder eine Dropdown-Liste haben kann.

Wenn es ein Textfeld ist, dann muss ich Datumsauswahl für dieses Textfeld hinzufügen.

Ich habe dies getan, außer Datumsauswahl für dynamisch generierte Textfeld.
Wenn Sie 100 Zeilen erstellen, sollten die Namen der Textfelder für alle Zeilen identisch sein.

Wie füge ich datepicker für dynamisch generierte Textfelder hinzu?

Answer 1

Verwenden Sie JQuery Live, um auf das dynamisch erstellte DOM zuzugreifen.

http://api.jquery.com/live/

Das können Sie den Picker befestigt.

http://jqueryui.com/demos/datepicker/

Answer 2

Tirst ein Klasse-Attribut als "Datum", um Ihre Eingabe oder div hinzuzufügen.

Nach dynamisch fügen Sie eine Texteingabe hinzu, um $('.date').datePicker() wieder zu binden, um datePicker an neue Eingänge oder div zu binden.

Answer 3

Ich hatte das gleiche Problem. Sie müssten den DatePicker an die dynamisch hinzugefügte Zeile binden. Die Datumsauswahl weist der dynamischen Zeile eine hadDatePicker-Klasse zu.

Sie müssten also entfernen und neu binden.

Etwas Ähnliches -

jQuery('.date-pick').removeClass('hasDatepicker').datepicker({ 
    dateFormat: 'mm-dd-yy' 
    }); 

Grüße, Tina Agrawal

Answer 4

Eigentlich habe ich die Lösung von @Tina Agrawal Aber da nun vorgesehen, verwenden, wenn ich ein Datum aus dem Kalender wählen, i klicken erneut und erneut auswählen. Wenn ich auf nächsten Monat klicke, wird es zu 1900-01-01 gehen.

Nun, es war so seltsam ...

Nach zwei Stunden von Versuch und Fehler und Forschung.

ich einfach tat

$('.date-pick').live('click', function(){ 
$('.date-pick').datepicker(); 
}); 

Nun, es funktioniert.

Answer 5

Ich hatte ein ähnliches Problem darin, dass beim dynamischen Hinzufügen neuer Zeilen zu meiner Tabelle die Datumsauswahlfelder in den neuen Zeilen (jede Zeile, die dem DOM dynamisch hinzugefügt wurde) alle meine ursprünglichen Datumsauswahlfelder aktualisiert haben.

Das Entfernen der hasDatepicker-Klasse, wie oben vorgeschlagen, reichte nicht aus, um mein Problem zu lösen, wahrscheinlich weil ich .clone() verwendete, um meine dynamisch hinzugefügten Zeilen zu erstellen.

Die Lösung, wenn das Klonen Reihe waren die geklonten Eingabefelder, erstellen Sie sie, fügen Sie sie in meine neu geklonten Tabellenzeile und dann neu initiieren die Date Picker

Zum Beispiel zu entfernen:

//Remove exisiting cloned input fields 
new_row.find("td.date input").remove(); 

//Create new input fields and append to table td 
var date_tds = new_row.find("td.date"); 
$('<input />', {"name":"gStartDates["+n_array_pos+"]","type":"text"}).appendTo(date_tds[0]); 
$('<input />', {"name":"gEndDates["+n_array_pos+"]","type":"text"}).appendTo(date_tds[1]); 

//Re-initiate datepicker on the input fields      
new_row.find("td.date input").datepicker({ 
    dateFormat:"dd-mm-yy", 
    minDate:StartDate, 
    maxDate:EndDate 
}); 

Answer 6

man sollte „.auf“ anstelle von Live verwenden - siehe http://api.jquery.com/on/

Answer 7

ich hatte das gleiche Problem und löste es auf eine andere Weise. Obwohl ich mir nicht ganz sicher bin, warum es funktioniert, da ich sehr neu in jQuery bin. Ich schrieb folgendes und es iteriert den gesamten Satz von Steuerelementen mit der Klasse "class_date" und bindet das datepicker-Steuerelement an es zurück.

$(".class_date").removeClass('hasDatepicker').datepicker();