web-dev-qa-db-fra.com

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

J'ai créé des zones de texte de manière dynamique 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 tres apprecie!

javascriptjqueryjquery-uidatepicker
108
steeped

voici le truc:

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

DEMO

La syntaxe $('...selector..').on('..event..', '...another-selector...', ...callback...); signifie:
Ajoutez un écouteur à ...selector.. (la body dans 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_start dans notre exemple), appliquez le gestionnaire d'événements ...callback... (la fonction inline dans notre exemple).

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

241
ilyes kooli

Pour moi ci-dessous jQuery a travaillé:

changer de "corps" pour documenter

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

Merci à skafandri

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

38
Tapash

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();
    }

});
13
pleshy

Assurez-vous que votre élément avec la classe .date-picker N'A PAS déjà une classe hasDatepicker. 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();
11
wintondeshong

Vous devez réexécuter le .datepicker(); après avoir créé dynamiquement les autres éléments de la 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 donc que vous utilisiez la méthode JQuery Load pour extraire les éléments d'une source et les charger dans le DOM. Pour ce faire, procédez comme suit:

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

La nouvelle méthode pour les éléments dynamiques est MutationsObserver .. L'exemple suivant utilise underscore.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
});
1
Hady Shaltout

C’est ce qui a fonctionné pour moi sur JQuery 1.3 et s’affiche dès le premier clic/focus

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

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

0
Mauricio Gracia Gutierrez

Aucune des autres solutions n'a fonctionné pour moi. Dans mon application, j'ajoute les éléments de plage de dates au document à l'aide de jQuery, puis leur applique Datepicker. Donc, aucune des solutions d’événement n’a 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 retardé.

0
Chris

J'ai modifié @skafandri answer pour éviter de réappliquer le constructeur datepicker à toutes les entrées avec la classe .datepicker_recurring_start.

Voici le code 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 de travail

0
c0x6a

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', });
0
Nada N. Hantouli
$( ".datepicker_recurring_start" ).each(function(){
    $(this).datepicker({
        dateFormat:"dd/mm/yy",
        yearRange: '2000:2012',
        changeYear: true,
        changeMonth: true
    });
});
0
Siya Qalistic