He creado dinámicamente cuadros de texto, y quiero que cada uno de ellos para ser capaz de mostrar un calendario en haga clic en. El código que estoy utilizando es:

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

Que sólo funcionará en el primer cuadro de texto, a pesar de todos mis cuadros de texto tienen una clase llamada datepicker_recurring_start.

Aprecio mucho su ayuda!

  • Cuando usted dice «creado dinámicamente», a qué te refieres con código-detrás, antes de la carga de la página, o con javascript después de la carga de la página? Porque si los elementos se añaden después de la carga de la página, tendrás que volver a enlazar el calendario cada vez que un nuevo cuadro de texto, se añade.
  • Yo soy de carga en el código con PHP.
  • Creo que usted podría estar recibiendo confundido, pero entonces es difícil contar con la información que has proporcionado. Tan sólo para confirmar, se puede confirmar lo que entendemos por «la creación dinámica de cuadros de texto» por favor.
  • Si se me carga la página de uno’, php se ve en la base de datos para ver cómo muchos de fecha cuadros de texto en la página de uno’ y la muestra. Así que cuando la página de una de las’ cargas, habrá 4 cuadros de texto que necesita para cargar el datepicker(). ‘página’ dos tiene 7 cuadros de texto que necesita para cargar el datepicker() función.
  • Si usted tiene un problema con el selector de datos no funciona después de una primera llamada, mira esta respuesta: stackoverflow.com/a/16283547/1329910 Tu problema puede tener que ver con datepicker la adición de su propia clase: hasDatepicker
InformationsquelleAutor steeped | 2012-05-03

11 Comentarios

  1. 249

    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 detector ...selector.. (el body en nuestro ejemplo) para el caso de ..event.. (‘focus’ en nuestro ejemplo). Para todos los descendientes de los nodos coincidentes que coincide con el selector de ...another-selector... (.datepicker_recurring_start en nuestro ejemplo) , aplicar el controlador de eventos ...callback... (la función en línea en nuestro ejemplo)

    Ver http://api.jquery.com/on/ y especialmente la sección sobre «delegado eventos»

    • Esta es una solución que podría funcionar en cualquier tipo de dinámica anexar. +1 para ti.
    • Aunque me parece extraño que desea llamar .datapicker() cada vez que el cuadro de texto el enfoque de ganancias – así que usted querrá tener cuidado con este enfoque (suponiendo que yo estoy leyendo este derecho). Sin embargo, creo que estaría bien con la .datapicker() porque probablemente comprobar si un datepicker se crea antes de intentar volver a crear. Con otro código que no tengan esta gracia. También, .en( es introducido en JQuery 1.7 – así que asegúrate de que estás utilizando la versión correcta.
    • datepicker es lo suficientemente inteligente como para comprobar si ya está creado o no (todos jQueryUI componentes por cierto), si la versión de jQuery está por debajo de 1.7 usted puede simplemente utilizar live
    • totalmente de acuerdo: sin embargo, para un novato, que podría estar tentado a usar este diseño para otro código que podría no ser tan ‘inteligente’, que puede rápidamente y de forma exponencial comer-up en su navegador
    • en realidad, yo siempre uso este diseño, (inspirado directamente en el patrón de diseño singleton incluso en mi mano codificados plugins que uso, si el plugin se llama, yo pregunte primero si es la primera vez que (yo uso el de datos jQuery función para almacenar esa información)
    • funcionó muy bien para mí +1
    • El problema es cuando clon del elemento. A continuación, el foco no funciona
    • Yo no veo esto como un problema, mi respuesta es acerca de la adición de selector de fecha en la creación dinámica de los elementos no se trata de clonado elementos
    • Es posible que desee agregar un filtro :not(.hasDatepicker)
    • Esta es una solución sencilla y elegante. Exactamente lo que yo necesitaba. +1
    • trabajó para mí.. y, probablemente, puedo usar el mismo método en otros elementos demasiado.. 🙂
    • +1 para ti. He estado buscando esta solución durante un día y ya. Gracias!
    • Dar a ese hombre de una de las Campanas! 🙂
    • en mi caso no funciona . me refiero a trabajar con sólo el último elemento que ha generado . decir que si he creado el 10 de elemento que se está trabajando sólo con el último elemento
    • Se debe trabajar con todos los elementos coincidentes, puedes publicar una demo para los que no guión de trabajo?
    • Ha funcionado para mí. Gracias mucho
    • Cuidado con el uso de jQuery.clone() dentro de un área que incluye un selector de fecha. Si lo hace, agregar esto para eliminar la hasDatepicker de la clase Y el número de identificación datepicker añade a su entrada: …. encontrar(‘input.hasDatepicker’).removeClass(‘hasDatepicker’).removeAttr(‘id’);
    • Gracias Por la Ayuda. Podemos hacer esto en Bootstrap Autocompletar?
    • funcionó, pero se abre el calendario de cuando jquery validación falla coz de enfoque.
    • si usted está buscando una solución en JQuery 1.3+ ver mi respuesta a continuación, se muestra también en el primer clic/focus

  2. 42

    Para mí debajo de jquery trabajado:

    cambiar el «cuerpo» del documento

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

    Gracias a skafandri

    Nota: asegúrese de que su id es diferente para cada campo

    • Gracias! El cuerpo no estaba funcionando para mí.
    • Correcto – para mí tengo que usar $(document) y no $(‘body’) – una Especie de problema con pequeños fragmentos de código. Puedo conseguir que el ejemplo funcione sin problema, pero y cuanto me agregue en un grupo de mis javascript dentro de un violín este código ya no funciona para mí. Gracias a ambos, aunque.
  3. 13

    Excelente respuesta por skafandri +1

    Esto se acaba de actualizar para comprobar hasDatepicker clase.

    $('body').on('focus',".datepicker", function(){
    
        if( $(this).hasClass('hasDatepicker') === false )  {
            $(this).datepicker();
        }
    
    });
    • Puede que luego se acortó a $('body').on('focus',".datepicker:not(.hasDatepicker)", function(){$(this).datepicker();});?
  4. 11

    Asegúrese de que su elemento con el .date-picker clase ya NO tiene un hasDatepicker clase. Si lo hace, incluso un intento de re-inicializar con $myDatepicker.datepicker(); fallará! En su lugar usted necesita para hacer…

    $myDatepicker.removeClass('hasDatepicker').datepicker();
    • Exactamente correcto! Cargado dinámicamente elementos terminó por no ser el problema, para mí, por lo que esta solución funcionó.
  5. 5

    Usted necesita para ejecutar el .datepicker(); de nuevo después de que usted haya creado dinámicamente los otros elementos de cuadro de texto.

    Yo recomendaría hacerlo en el método de devolución de llamada de la llamada, que es la adición de los elementos al DOM.

    Así que digamos que usted está utilizando el método Load de JQuery para tirar de los elementos a partir de una fuente y la carga en el DOM, tendría que hacer algo como esto:

    $('#id_of_div_youre_dynamically_adding_to').load('ajax/get_textbox', function() {
      $(".datepicker_recurring_start" ).datepicker();
    });
    • Esto no siempre funciona en la práctica a partir de mi experiencia. Mejor de los casos es añadir Identificadores únicos a los elementos y el uso de los Identificadores de referencia y aplicar el selector de fecha. Parece internamente el plugin utiliza los selectores.
  6. 1

    El nuevo método de los elementos dinámicos es MutationsObserver .. El ejemplo siguiente se utiliza underscore.js a utilizar ( _.cada uno ) de la función.

    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
    });
  7. 0

    Ninguna de las otras soluciones que trabajó para mí. En mi aplicación, estoy añadiendo la fecha de la gama de elementos para el documento utilizando jquery y, a continuación, aplicar el selector de fecha para ellos. Así que ninguno de los eventos de soluciones trabajado por algún motivo.

    Esto es lo que finalmente se trabajó:

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

    La esperanza de que esto ayude a alguien porque esto me hizo retroceder un poco.

  8. 0

    usted puede agregar la clase .selector de fecha en una función de javascript, para ser capaz de cambiar dinámicamente el tipo de entrada de

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

    He modificado @skafandri respuesta para evitar la re-aplicar el datepicker constructor para todas las entradas con .datepicker_recurring_start clase.

    Aquí está el código 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í un demo

  10. 0

    Esto es lo que funcionó para mí en JQuery 1.3 y se está mostrando en el primer clic/focus

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

    esto necesita que su entrada tiene la clase ‘mostrar_calendario’

    Vivir es para JQuery 1.3+ para las versiones más recientes que usted necesita para adaptar esta en «on»

    Ver más acerca de la diferencia que aquí http://api.jquery.com/live/

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

Dejar respuesta

Please enter your comment!
Please enter your name here