mettre datepicker () sur des éléments créés dynamiquement - JQuery / JQueryUI

J'ai créé des zones de texte dynamiquement et je souhaite que chacune d'elles puisse afficher un calendrier en un clic. Le code que j'utilise est:

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

Ce qui ne fonctionnera que sur la première zone de texte, même si toutes mes zones de texte ont une classe appelée datepicker_recurring_start.

Votre aide est très appréciée!

voici l'astuce:

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

DEMO

La $('...selector..').on('..event..', '...another-selector...', ...callback...);syntaxe signifie:
Ajouter un écouteur à ...selector..(le bodydans notre exemple) pour l'événement ..event..('focus' dans notre exemple). Pour tous les descendants des nœuds correspondants qui correspondent au sélecteur ...another-selector...( .datepicker_recurring_startdans notre exemple), appliquez le gestionnaire d'événements ...callback...(la fonction en ligne dans notre exemple)

Voir http://api.jquery.com/on/ et en particulier la section sur les "événements délégués"

Pour moi ci-dessous jquery a fonctionné:

changement de "corps" en document

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

Merci à skafandri

Remarque: assurez-vous que votre identifiant est différent pour chaque champ

Excellente réponse de skafandri +1

Ceci est juste mis à jour pour vérifier la classe hasDatepicker.

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

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

});

Assurez-vous que votre élément avec la .date-pickerclasse n'a PAS déjà de hasDatepickerclasse. Si c'est le cas, même une tentative de réinitialisation avec $myDatepicker.datepicker();échouera! Au lieu de cela, vous devez faire ...

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

Vous devez réexécuter le .datepicker();après avoir créé dynamiquement les autres éléments de zone de texte.

Je recommanderais de le faire dans la méthode de rappel de l'appel qui ajoute les éléments au DOM.

Supposons que vous utilisiez la méthode JQuery Load pour extraire les éléments d'une source et les charger dans le DOM, vous feriez quelque chose comme ceci:

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

La nouvelle méthode pour les éléments dynamiques est MutationsObserver .. L'exemple suivant utilise le soulignement.js pour utiliser la fonction (_.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
});

C'est ce qui a fonctionné pour moi (en utilisant jquery datepicker):

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

Aucune des autres solutions n'a fonctionné pour moi. Dans mon application, j'ajoute les éléments de la plage de dates au document à l'aide de jquery, puis je leur applique le sélecteur de date. Aucune des solutions événementielles n'a donc fonctionné pour une raison quelconque.

C'est ce qui a finalement fonctionné:

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

J'espère que cela aide quelqu'un parce que cela m'a un peu reculé.

vous pouvez ajouter la classe .datepicker dans une fonction javascript, pour pouvoir changer dynamiquement le type d'entrée

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

J'ai modifié la réponse @skafandri pour éviter de réappliquer le datepickerconstructeur à toutes les entrées avec .datepicker_recurring_startclasse.

Voici le HTML:

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

Voici le JS:

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

voici une démo fonctionnelle

C'est ce qui a fonctionné pour moi sur JQuery 1.3 et qui s'affiche au premier clic / focus

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

cela nécessite que votre entrée ait la classe 'mostrar_calendario'

Live est pour JQuery 1.3+ pour les versions plus récentes, vous devez l'adapter à "on"

En savoir plus sur la différence ici http://api.jquery.com/live/

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