Partage
  • Partager sur Facebook
  • Partager sur Twitter

DatePicker impossible avec insertAdjacentHTML

    20 avril 2019 à 17:50:24

    Bonjour à tous, 

    Je voudrais créer un form (dans un fichier JSTL) pour renseigner des dates. J'utilise Bootstrap et les glyphicons pour rendre tout cela tout beau. 

    Le truc c'est que je voudrais permettre à l'utilisateur d'ajouter des champs de date s'il le souhaite. J'ai donc créé un bouton '+' qui appelle une fonction javascript qui utilise insertAdjacentHTML() pour insérer le code nécessaire (le même code que j'utilise pour les champs de date 'classiques').

    L'affichage sur ma page est bon mais le champs ne réagit pas, j'ai beau cliquer partout sur le nouveau champ, le calendrier pour choisir la date ne s'affiche pas et je ne peux donc pas choisir de date. 

    Le champ s'affiche bien 

    <- L'affichage que je veux quand je clique sur le champ mais qui ne marche pas avec ceux ajoutés avec le javascript

    Ma fonction javascript pour insérer le code (désolé pour le formatage) :

    function addDate(divName) {
    			var divDate = document.getElementById(divName);
    			divDate.insertAdjacentHTML('beforeend', '<div class=\"input-group date form_date\" data-date=\"\" data-date-format=\"dd MM yyyy\" data-link-field=\"dateRemisePoster\" data-link-format=\"yyyy-mm-dd\"> <input class=\"form-control\" size=\"16\" type=text value=\"${dateRemisePoster}\" readonly> <span class=\"input-group-addon\"> <span class=\"glyphicon glyphicon-remove\"></span></span> <span class=\"input-group-addon\"> <span class=\"glyphicon glyphicon-calendar\"></span></span> </div> <div> <input type=\"hidden\" id=\"dateRemisePoster\" name=\"dateRemisePoster\" value=\"${dateRemisePoster}\" /> </div>');
    		}


    Le code jstl de mon champ date et de mon bouton :

    <div class="row">
    	<div class="col-lg-10 col-md-10" id="dateRemisePosterDiv">
    		<div class="input-group date form_date" data-date=""
    		        data-date-format="dd MM yyyy"
    			data-link-field="dateRemisePoster"
    			data-link-format="yyyy-mm-dd">
    		<input class="form-control" size="16" type=text
    			value="${dateRemisePoster}" readonly> <span
    			class="input-group-addon"> <span
    			class="glyphicon glyphicon-remove"></span></span> <span
    			class="input-group-addon"> <span
    			class="glyphicon glyphicon-calendar"></span></span>
    		</div>
    	        <div>
    		        <input type="hidden" id="dateRemisePoster"
    			        name="dateRemisePoster" value="${dateRemisePoster}" />
    	        </div>
            </div>
    	<div class="col-lg-2 col-md-2">
    		<input type="button" name="buttonAdd" id="addRemisePoster"
    			value="+" onClick="addDate('dateRemisePosterDiv');" />
    	</div>
    </div>



    PS : En inspectant l'élément avec chrome, le code ajouté correspond bien avec ce que je veux.

    • Partager sur Facebook
    • Partager sur Twitter

    DatePicker impossible avec insertAdjacentHTML

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
    • Editeur
    • Markdown