Código de selector de fecha dinámico de JQuery

Question

Necesito crear un filtro dinámico que agregue/elimine filas dinámicamente.

Contiene un cuadro desplegable. Según el valor del cuadro desplegable seleccionado, creo un <TD> dinámico que puede tener un campo de texto o una lista desplegable.

Si se trata de un campo de texto, entonces tengo que agregar el selector de fecha para ese campo de texto.

He hecho esto, excepto el selector de fecha para el campo de texto generado dinámicamente.
Si está creando 100 filas, los nombres de los campos de texto deben ser iguales para todas las filas.

¿Cómo agregar datepicker para el campo de texto generado dinámicamente?

Answer 1

Utilice JQuery Live para acceder al DOM creado dinámicamente.

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

El que puede adjunta el selector.

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

Answer 2

Tirst añadir un atributo de clase como "fecha" a su entrada o div.

Después de agregar dinámicamente una entrada de texto para tener que recuperar $('.date').datePicker() nuevamente para vincular datePicker a nuevas entradas o div.

Answer 3

Tuve el mismo problema. Debería volver a vincular el DatePicker a la fila añadida dinámicamente. El selector de fecha asocia una clase hadDatePicker a la fila dinámica.

Así que tendrías que eliminar eso y volver a enlazar.

Algo como esto -

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

Saludos, Tina Agrawal

Answer 4

En realidad hice uso de la solución aportada por @Tina Agrawal Pero desde ahora, cuando seleccione una fecha en el calendario, hago clic de nuevo y vuelva a seleccionar. Si hago clic en el próximo mes, irá a 1900-01-01.

Bueno, fue tan extraño ...

Después de dos horas de ensayo y error y la investigación.

i simplemente lo hicieron:

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

bien que funciona.

Answer 5

Tuve un problema similar cuando al agregar dinámicamente nuevas filas a mi tabla, los campos del Selector de Fecha en las filas nuevas (cualquier fila agregada al DOM dinámicamente) actualizaban todos mis filas iniciales en los campos Selector de Fecha.

Eliminar la clase hasDatepicker como se sugirió anteriormente no fue suficiente para resolver mi problema, probablemente porque estaba usando .clone() para crear las filas agregadas dinámicamente.

La solución cuando las filas de clonación fue eliminar los campos de entrada clonados, re-crearlos, añadirlos a mi fila de la tabla recién clonado y volver a iniciar el Selector de fecha

Por ejemplo:

//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

uno debe utilizar ".En" en lugar de en vivo - ver http://api.jquery.com/on/

Answer 7

que tenía el mismo problema y lo resolvió de una manera diferente. Aunque no estoy muy seguro de por qué funciona, ya que soy muy nuevo en jquery. Escribí lo siguiente e itera el conjunto completo de controles que tienen la clase "class_date" y vuelve a vincular el control datepicker.

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