Utilisation du plugin datepicker

Résolu/Fermé

Lechiffre50 Messages postés 4 Date d'inscription lundi 3 septembre 2018 Statut Membre Dernière intervention 28 avril 2020 - 3 sept. 2018 à 16:02
Lechiffre50 - 4 sept. 2018 à 15:07

Bonjour,

Lorsque j'utilise le plugin datepicker dans une page html normale tout fonctionne bien.

J'aimerais définir une page en trois parties par des <div>
<div id="header">.....</div>
<div id="body">....</div>
<div id="footer">....</div>

Les contenus de ces <div> seront modifiés dynamiquement par du code php et javascript.

Lorsque je génère le code qui fait appel au plugin datepicker dans le <div> ça ne fonctionne plus.
i.e. si on clique sur l'élément le calendrier de s'affiche plus.

J'ai noté que certains attributs et événemets ne sont pas générés.

Y-a-t-il une solution ?

A voir également:

Utilisation du plugin datepicker
Notice d'utilisation - Guide
Utilisation chromecast - Guide
Plugin flash - Télécharger - Divers Web & Internet
Votre compte a été désactivé pour violation de nos conditions d’utilisation - Guide
Droit utilisation musique 30 secondes ✓ - Forum MacOS

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
3 sept. 2018 à 20:02

Bonjour,

Lorsque je génère le code qui fait appel au plugin datepicker dans le <div> ça ne fonctionne plus.
i.e. si on clique sur l'élément le calendrier de s'affiche plus.

Sans voir ton code .... IMPOSSIBLE de te répondre.

NB : Pour poster ton code, merci de le faire en utilisant les BALISES DE CODE.
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Réponse 2 / 2

Lechiffre50
Modifié le 3 sept. 2018 à 21:44

Voici le code HTML incluant du code javascript

<!DOCTYPE [/html/htmlintro.php3 html]>
<html>
<head>
<!--- Include the above in your HEAD tag -->
 <link rel="stylesheet" type="text/css" href="Datepicker/jquery-ui.css">
 <script src="Datepicker/jquery-1.5.1.js"></script>
 <script src="Datepicker/jquery.ui.core.js"></script>
 <script src="Datepicker/jquery.ui.widget.js"></script>
 <script src="Datepicker/jquery.ui.datepicker.js"></script>
 <script> 
  $(function() {
   $( "#datepicker" ).datepicker({
    dateFormat: 'yy-mm-dd'
   })
  });
 </script> 
 <script> 
  function change_date(date) {
   var nouveau_code = '<div style="width:500px; height:auto; font-size:small;">\
   <div class="demo">\
   <p>Select the date: <input type="text" id="datepicker" value="2099-12-12"></p>\
   </div>\
   </div>';
   alert("La date va être changée pour: "+date);
   document.getElementById('datepicker').value = date;
   alert("Le code va être changé");
   //document.getElementById("code").style.display = "block";
   document.getElementById('code').innerHTML = nouveau_code;
  };
 </script> 
</head>
<body>

 
 <div id="code">
  <div style="width:500px; height:auto; font-size:small;">
   <div class="demo">
 <p>Select the date: <input type="text" id="datepicker" value="50-06-25"></p> 
   </div>
  </div>
 </div>
 <button type="submit" onclick="change_date('2023-01-01')">Change date</button>

EDIT : Ajout des balises de code

jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
3 sept. 2018 à 21:07

Et led balises de code... tu en as fais quoi ???

jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
Modifié le 3 sept. 2018 à 21:51

Le problème c'est que tu recréés le datepicker dans ton js (dans la fonctionchange_date )
pourquoi faire ?
Il est déjà créé... si tu veux juste en changer la date il faut utiliser la bonne fonction... tout simplement
Un truc du genre


 function change_date(date) {
   alert("La date va être changée pour: "+date);
   //$('#datepicker').val(date);
  $( "#datepicker" ).datepicker('setDate', date); // pour mettre la date dans le datepicker  
  };

Lechiffre50 Messages postés 4 Date d'inscription lundi 3 septembre 2018 Statut Membre Dernière intervention 28 avril 2020 > jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024
4 sept. 2018 à 01:28

Bonjour Jordan45,

L'exemple est simplifié pour montrer ce que je veux faire. Il est évident que ce bout de code n'a aucun sens.

Voici donc en détail ce que je veux faire:

Définir une page WEB divisée en trois sections par des "div"

1) Entête
2) Corps
3) Pied de page

L'entête et le pied de page sont fixes en utilisant des proprités CSS donc ils restent toujours en haut et en bas de la page respectivement.

Dans l'entête il y a un menu pour accéder à différentes fonctions.

Exemple: Comptabilité Informatique Cinéma Budget

Quand on clique sur une de ces fonctions, le code HTML correspondant est injecté dans la section "Corps" avec
une commande semblable à celle utilisée dans mon exemple:

document.getElementById('code').innerHTML = nouveau_code;

Mais lorsque le "nouveau_code" contient des références à un plugin "datepicker", le plugin ne fonctionne pas.
Tous les autres types HTML comme "input" "button" "href" etc. fonctionnent.

En utilisant le débuggueur de Firefox j'ai remarqué que dans le code généré normalement avec le plugin datepicker
il y a des éléments qui s'ajoutent, comme (class="hasDatepicker") et des écouteurs d'événements (focus, getData, keypress, keydown, keyup, setdata). Ces élément ne sont pas générés lorsque j'injecte le code tel que décrit plus haut.

Voilà !

jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
4 sept. 2018 à 07:20

Normal..
A chaque création dynamique de dic datepicker...tu dois relancer l'initialisation du datepicker

Lechiffre50
4 sept. 2018 à 15:07

Merci Jordane45...ça fonctionne maintenant !

Discussions similaires

Ressource demandée en cours d'utilisation

a qoui sert un objectif 18-55 et un de 55-200

L'imprimante et en cours d'utilisation ou une

dossier en cour d'utilisation ?? blocage windows

Transfert de fichier via telephone au PC