poner datepicker () en elementos creados dinámicamente - JQuery/JQueryUI

He creado cuadros de texto dinámicamente y quiero que cada uno de ellos pueda mostrar un calendario al hacer clic. El código que estoy usando es:

$(".datepicker_recurring_start" ).datepicker();

Lo cual solo funcionará en el primer cuadro de texto, aunque todos mis cuadros de texto tienen una clase llamada datepicker_recurring_start.

¡Su ayuda es muy apreciada!

preguntado el 03 de mayo de 12 a las 15:05

Cuando dice "creado dinámicamente", ¿quiere decir con código subyacente antes de que se cargue la página o con javascript después de que se cargue la página? Porque si los elementos se agregan después de cargar la página, deberá volver a vincular el calendario cada vez que se agregue un nuevo cuadro de texto. -

Lo estoy cargando en el código subyacente con PHP. -

Creo que podría estar confundido, pero es difícil saberlo con la información que ha proporcionado. Entonces, solo para confirmar, ¿puede confirmar lo que quiere decir con 'cuadros de texto creados dinámicamente', por favor? -

Si estoy cargando la 'página uno', php mira la base de datos para ver cuántos cuadros de texto de fecha hay en la 'página uno' y lo muestra. Entonces, cuando se carga la 'página uno', habrá 4 cuadros de texto que deben cargar el selector de fecha (). 'página dos' tiene 7 cuadros de texto que necesitan cargar la función datepicker(). -

Si tiene un problema con el selector de datos que no funciona después de una primera llamada, consulte esta respuesta: stackoverflow.com/a/16283547/1329910 Su problema puede tener que ver con datepicker agregando su propia clase: hasDatepicker -

13 Respuestas

aquí está el truco:

$('body').on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});​

DEMO

La $('...selector..').on('..event..', '...another-selector...', ...callback...); sintaxis significa:
Añadir un oyente a ...selector.. (El body en nuestro ejemplo) para el evento ..event.. ('foco' en nuestro ejemplo). Para todos los descendientes de los nodos coincidentes que coincidan con el selector ...another-selector... (.datepicker_recurring_start en nuestro ejemplo), aplique el controlador de eventos ...callback... (la función en línea en nuestro ejemplo)

Vea http://api.jquery.com/on/ y especialmente el apartado de "eventos delegados"

contestado el 07 de mayo de 15 a las 16:05

Esta es una solución que funcionaría en cualquier tipo de adición dinámica. +1 para ti. - PeligroMono

Aunque me parece raro que quieras llamar .datapicker() cada vez que el cuadro de texto se enfoca, por lo que debe tener cuidado con este enfoque (suponiendo que esté leyendo esto correctamente). Sin embargo, creo que estarías bien con el .datapicker() porque probablemente verificará si se crea un selector de fechas antes de intentar recrear. Con otro código es posible que no tenga esta gracia. Además, .on( solo se presenta en JQuery 1.7, así que asegúrese de estar usando la versión correcta. - Tr1stan

datepicker es lo suficientemente inteligente como para verificar si ya está creado o no (por cierto, todos los componentes de jQueryUI) si la versión de jQuery es inferior a 1.7, simplemente puede usar para vivir - ilyes kooli

Es posible que desee agregar un filtro :not(.hasDatepicker) - salman a

Tenga cuidado con el uso de jQuery.clone() dentro de un área que incluye un selector de fecha. Si lo hace, agregue esto para eliminar la clase hasDatepicker Y el id datepicker se agrega a su entrada: .... find('input.hasDatepicker').removeClass('hasDatepicker').removeAttr('id'); - yahermann

Para mí a continuación, jquery funcionó:

cambiando "cuerpo" a documento

$(document).on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});

Gracias a skafandri

Nota: asegúrese de que su identificación sea diferente para cada campo

contestado el 23 de mayo de 17 a las 13:05

Correcto: para mí, tengo que usar $ (documento) y no $ ('cuerpo'). Una especie de problema con pequeños fragmentos de código. Puedo hacer que el ejemplo funcione sin problemas, pero tan pronto como agrego un montón de mi javascript en un violín, este código ya no funciona para mí. Aunque gracias a los dos. - tom stickel

Excelente respuesta de skafandri +1

Esto solo se actualiza para verificar la clase hasDatepicker.

$('body').on('focus',".datepicker", function(){

    if( $(this).hasClass('hasDatepicker') === false )  {
        $(this).datepicker();
    }

});

Respondido el 17 de diciembre de 15 a las 12:12

¿Podría entonces acortarse a $('body').on('focus',".datepicker:not(.hasDatepicker)", function(){$(this).datepicker();});? - lucas stevenson

Asegúrese de que su elemento con el .date-picker la clase NO tiene ya un hasDatepicker clase. Si lo hace, incluso un intento de reinicializar con $myDatepicker.datepicker(); ¡fallará! En su lugar, tienes que hacer...

$myDatepicker.removeClass('hasDatepicker').datepicker();

Respondido el 25 de enero de 17 a las 16:01

¡Exactamente correcto! Los elementos cargados dinámicamente terminaron sin ser un problema para mí, por lo que esta solución funcionó. - Beason esterlina

Necesitas ejecutar el .datepicker(); nuevamente después de haber creado dinámicamente los otros elementos del cuadro de texto.

Recomendaría hacerlo en el método de devolución de llamada de la llamada que agrega los elementos al DOM.

Entonces, digamos que está utilizando el método JQuery Load para extraer los elementos de una fuente y cargarlos en el DOM, haría algo como esto:

$('#id_of_div_youre_dynamically_adding_to').load('ajax/get_textbox', function() {
  $(".datepicker_recurring_start" ).datepicker();
});

contestado el 03 de mayo de 12 a las 15:05

Esto no siempre funciona en la práctica desde mi experiencia. El mejor de los casos es agregar ID únicos a sus elementos y usar esos ID para hacer referencia a ellos y aplicar el selector de fechas. Parece que internamente el complemento usa esos selectores. - wes johnson

El nuevo método para elementos dinámicos es MutacionesObservador .. El siguiente ejemplo utiliza underscore.js para usar la función ( _.each ).

MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;    

var observerjQueryPlugins = new MutationObserver(function (repeaterWrapper) {

    _.each(repeaterWrapper, function (repeaterItem, index) {

        var jq_nodes = $(repeaterItem.addedNodes);

        jq_nodes.each(function () {

            // Date Picker
            $(this).parents('.current-repeateritem-container').find('.element-datepicker').datepicker({
                dateFormat: "dd MM, yy",
                showAnim: "slideDown",
                changeMonth: true,
                numberOfMonths: 1
            });

        });

    });

});

observerjQueryPlugins.observe(document, {
    childList: true,
    subtree: true,
    attributes: false,
    characterData: false
});

Respondido 04 Abr '16, 17:04

Esto fue lo que funcionó para mí (usando jquery datepicker):

$('body').on('focus', '.datepicker', function() {
 $(this).removeClass('hasDatepicker').datepicker();
});

Respondido el 02 de Septiembre de 19 a las 21:09

Ninguna de las otras soluciones funcionó para mí. En mi aplicación, agrego los elementos del rango de fechas al documento usando jquery y luego les aplico el selector de fecha. Entonces, ninguna de las soluciones de eventos funcionó por alguna razón.

Esto es lo que finalmente funcionó:

$(document).on('changeDate',"#elementid", function(){
    alert('event fired');
});

Espero que esto ayude a alguien porque esto me retrasó un poco.

respondido 22 mar '16, 17:03

puede agregar la clase .datepicker en una función de javascript, para poder cambiar dinámicamente el tipo de entrada

 $("#ddlDefault").addClass("datepicker");
 $(".datepicker").datetimepicker({ timepicker: false, format: 'd/m/Y', });

Respondido 23 Abr '17, 13:04

He modificado la respuesta de @skafandri para evitar volver a aplicar el datepicker constructor a todas las entradas con .datepicker_recurring_start clase.

Aquí está el HTML:

<div id="content"></div>
<button id="cmd">add a datepicker</button>

Aquí está el JS:

$('#cmd').click(function() {
  var new_datepicker = $('<input type="text">').datepicker();
  $('#content').append('<br>a datepicker ').append(new_datepicker);
});

Aquí está un demostración de trabajo

Respondido 31 ago 17, 20:08

Esto es lo que funcionó para mí en JQuery 1.3 y se muestra en el primer clic/enfoque

function vincularDatePickers() {
    $('.mostrar_calendario').live('click', function () {
        $(this).datepicker({ showButtonPanel: true, changeMonth: true, changeYear: true, showOn: 'focus' }).focus();
    });
}

esto necesita que tu entrada tenga la clase 'mostrar_calendario'

Live es para JQuery 1.3+ para versiones más nuevas, debe adaptar esto a "on"

Vea más sobre la diferencia aquí http://api.jquery.com/live/

Respondido el 11 de enero de 18 a las 21:01

$( ".datepicker_recurring_start" ).each(function(){
    $(this).datepicker({
        dateFormat:"dd/mm/yy",
        yearRange: '2000:2012',
        changeYear: true,
        changeMonth: true
    });
});

Respondido 11 Jul 18, 08:07

 $('body').on('focus',".my_date_picker", function(){
            $(this).datepicker({
                minDate: new Date(),
            });
        });

Respondido 22 Oct 21, 11:10

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.