Wie man Datepicker in der dynamisch erzeugten Zeile hinzufügt

Question

Ich stecke in einer Abfrage fest und es funktioniert nicht. Ich habe einige Eingabetextfelder in der Tabellenzeile und eine Schaltfläche erstellt, um neue Zeilen mit denselben Eingabetextfeldern hinzuzufügen, wenn wir auf die Schaltfläche add Row klicken. Hier

ist der Code:

<table> 
<tr> 
<td><input type="text" name="assigned_date[]" value="" id="assigned_date" class="assigned_date" /> 
    <span class="text-danger"><?php echo form_error('assigned_date[]');?></span> 
</td> 
<td><input type="text" name="last_date[]" value="" id="last_date" class="last_date" /> 
    <span class="text-danger"><?php echo form_error('last_date[]');?></span> 
</td> 
<td><input type="text" name="priority[]" value="" /> 
    <span class="text-danger"><?php echo form_error('priority[]');?></span> 
</td> 
<td><input type="text" name="frequency[]" value="" /> 
    <span class="text-danger"><?php echo form_error('frequency[]');?></span> 
</td> 
</tr> 
</table> 
<input class="btn btn-primary" type="button" value="Add Row" onclick="addRow('dataTable')" id="add_button" /> 
<input class="btn btn-primary" type="submit" name="submit" value="submit"> 

Hier ist der Code JQuery neue Zeile hinzuzufügen, wenn wir auf die Schaltfläche Add klicken

function addRow(tableID) { 

     var table = document.getElementById(tableID); 

     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 

     var colCount = table.rows[1].cells.length; 

     for(var i=0; i<colCount; i++) { 

     var newcell = row.insertCell(i); 

     newcell.innerHTML = table.rows[1].cells[i].innerHTML; 
     //alert(newcell.childNodes); 
     switch(newcell.childNodes[0].type) { 
      case "text": 
       newcell.childNodes[0].value = ""; 
       break; 
      case "checkbox": 
       newcell.childNodes[0].checked = false; 
       break; 
      case "select-one": 
       newcell.childNodes[0].selectedIndex = 0; 
       break; 

     } 
     } 
    } 

ich jQuery-ui datepicker bin mit Datum auszuwählen aus Textbox. Hier ist datepicker Code

$('.assigned_date').each(function(){ 
    $('.assigned_date').removeClass('hasDatepicker').datepicker(); 
}); 

Als ich das erste Textfeld klicken, die nicht durch dynamisch dann erstellt wird es den Kalender und das Datum wählen. Aber das Problem ist, wenn ich auf die Schaltfläche Hinzufügen klicke und es die gleiche Zeile erstellen, und wenn ich dann das Textfeld wähle, dann zeigt es keinen Kalender an. wie ich dieses Problem lösen kann. Bitte helfen Sie, die Lösung zu finden. Wenn ich durch das Element inspizieren sehe dann mit hasDatepicker

Hier den Klassennamen es zeigen wird erstellt [Geige] [1] bitte

https://jsfiddle.net/r83vmv1q/3/

Answer 1

@ M.Tanzil: Es ist ein Fehler in Ihrem Code.

1) Wählen Sie zuerst ein Datum in der ersten Datumsauswahl aus.

2) Fügen Sie dann eine neue Zeile hinzu.

3) Wählen Sie dann ein Datum in der zweiten Zeile.

Das zweite ausgewählte Datum wird zur ersten Zeile hinzugefügt.

Ich habe dieses Problem behoben. Das Problem kommt, weil alle Datepicker dieselbe ID haben. Ich habe dynamische IDs für Datepicker zugewiesen.

Bitte überprüfen Sie diese Fiddle.

Answer 2

Sie haben viele Fehler in Ihrem javascript Code sehen in die Geige, die du zur Verfügung gestellt hast. Auch müssen Sie initialize die datepicker nach den Funktionen, die die Eingaben erstellt, die Sie datepicker mit binden möchten.

Auch wenn Sie eine Zeile hinzufügen, zerstören die alle Instanzen picker und dann die datepicker rebind, nachdem Sie eine neue Zeile anhängen.

Bitte beachten Sie die modified Fiddle seine Arbeiten.

HINWEIS: die alle neu rows erstellt und die Eingänge innen die datepicker angezeigt, aber wenn Sie Datum in einem der row der selected date wählen wird im top most row angezeigt (wenn die Eingänge die gleichen Klassen haben), so dass Sie haben um das auch zu schaffen. Verwenden Sie verschiedene Klassen oder eindeutige IDs.

Ich hoffe, es hilft.

Answer 3

sollten Sie Ihren js Code überprüfen und warum Sie nicht versuchen, den Eingabetyp Datum zu verwenden:

[<input type="date">][1] 

Answer 4

als Beratung: sicher sein, dass Sie ein Datum aus Textbox aus, nach der Erstellung das neue Element.!

Answer 5

Entfernen Sie IDs zugewiesene_Datum und last_date beim Erstellen von Zeilen von Javascript, es ist grundlegende Regel-IDs sollte nicht wiederholt werden in HTML.

Verwendung unter Code

<table> 
<tr> 
<td><input type="text" name="assigned_date[]" value="" class="assigned_date datetimepick" /> 
    <span class="text-danger"><?php echo form_error('assigned_date[]');?></span> 
</td> 
<td><input type="text" name="last_date[]" value="" class="last_date datetimepick" /> 
    <span class="text-danger"><?php echo form_error('last_date[]');?></span> 
</td> 
<td><input type="text" name="priority[]" value="" /> 
    <span class="text-danger"><?php echo form_error('priority[]');?></span> 
</td> 
<td><input type="text" name="frequency[]" value="" /> 
    <span class="text-danger"><?php echo form_error('frequency[]');?></span> 
</td> 
</tr> 
</table> 
<input class="btn btn-primary" type="button" value="Add Row" onclick="addRow('dataTable')" id="add_button" /> 
<input class="btn btn-primary" type="submit" name="submit" value="submit"> 

und wenn Sie Datetime Initialisierung Verwendung unter Klasse als Kennung

$('.datetimepick').datetimepicker({ 
    format:"Y-m-d H:i", 
    timepickerScrollbar:false, 
    minDate: 0 
});