Utilisation du plugin datepicker
Résolu
Lechiffre50
Messages postés
4
Date d'inscription
Statut
Membre
Dernière intervention
-
Lechiffre50 -
Lechiffre50 -
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 ?
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
- Utilisation chromecast - Guide
- Télécharger gratuitement notice d'utilisation - Guide
- La ressource demandée est en cours d'utilisation ✓ - Forum Logiciels
- Family link temps d'utilisation ne fonctionne pas - Forum Contrôle parental
- Dossier en cours d'utilisation - Forum Windows 8 / 8.1
2 réponses
Bonjour,
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
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
Voici le code HTML incluant du code javascript
EDIT : Ajout des balises de code
<!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
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
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
};
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à !
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à !
