affichage de calendrier

**nico9275** · 18/06/2012, 16h08

Bonjour,
j’essaie en vain d'insérer un calendrier qui permet d'afficher lorsqu'on sélectionne une date, des données d'un graphique dynamique. J'ai téléchargé le datepicker sur jquery ui, j'ai pris celui de la démo par défaut: http://jqueryui.com/demos/datepicker/
La je veux juste effectuer des tests sur une page vierge voir si ça marche bien. Bref, j'ai trouvé un tuto qui m'expliquait comment l'insérer sauf que les fichiers js sont différents. Je suis très mauvais en anglais et ne comprend rien a la doc donc je ne sais pas ce que je dois rajouter comme js dans mon script pour que ça fonctionne correctement.
Voici le lien pour télécharger le datepicker: http://jqueryui.com/download

et enfin voici le script que j'ai trouvé et que j'ai légèrement modifié au niveau des chemins:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<head>
 
<title>Default jQuery Datepicker</title>
<link rel="stylesheet" type="text/css" href="demos.css">
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.21.custom/css/ui-lightness/jquery-ui-1.8.21.custom.css">
<script src="jquery-ui-1.8.21.custom/development-bundle/jquery-1.7.2.js"></script>
<script src="jquery-ui-1.8.21.custom/development-bundle/ui/jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery-ui-1.8.21.custom/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
 
</head>
 
<body>
 
<div style="width:500px; height:auto; font-size:small;">
<div class="demo">
<p>Sélectionner une date : <input type="text"></p>
</div>
</div>
 
</body>
</html>

Une derniere chose, j'ai trouvé tout les fichiers dans mon datepicker sauf un: jquery.ui.widget.js Je ne sais pas ou il est donc peut être qu'il faut en rajouter un autre a la place, je ne sais pas. Donc si vous avez des idées pour que ça fonctionne, dites le moi plz.
Dsl pr ce post un peu long, merci déjà de l'avoir lu.

Bonne journée

**Benjamin Delespierre** · 18/06/2012, 18h10

Étrange que tu aies autant de scritps JS à inclure. Normalement, pour inclure jQuery UI y'en a que deux.

Ton problème vient sûrement du fait que tu n'as pas d'ID sur ton input or ta requête de sélection sélectionne l'id datepicker.

**nico9275** · 19/06/2012, 09h43

effectivement j'ai oublié l'id mais je l'ai corrigé et malgré ça, ça ne fonctionne toujours pas...
Concernant les scripts js a inclure comme je l'ai di c'était dans un tuto, je ne savais même pas qu'il fallait en inclure que 2 lol. Tu peux me dire lesquels du coup stpl ?

**Benjamin Delespierre** · 19/06/2012, 11h57

Normalement jquery-<version>.min.js et jquery-ui-<version>.custom.min.js et c'est bon.

Au passage, pense à regarder la console javascript pour voir les erreurs éventuelles (F12 sur tous les navigateurs).

**nico9275** · 19/06/2012, 12h26

rien a faire, j'ai fais comme tu m'a dis mais rien ne s'affiche...

je rebalance le code avec les corrections pour que tu vois:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<title>Default jQuery datePicker</title>
<link rel="stylesheet" type="text/css" href="demos.css">
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.21.custom/css/ui-lightness/jquery-ui-1.8.21.custom.css">
<script src="jquery-ui-1.8.21.custom/js/jquery-1.7.2.min.js"></script>
<script src="jquery-ui-1.8.21.custom/js/jquery-ui-1.8.21.custom.min.js"></script>
<script>
$(function() {
$( "#datePicker" ).datePicker();
});
</script>
</head>
<body>
<div style="width:500px; height:auto; font-size:small;">
<div class="demo">
<p>Sélectionner une date : <input id="datePicker" type="text"></p>
</div>
</div>
</body>
</html>

EDIT: lol je viens de m'apercevoir j'ai mis 2 css, bon j'ai enlevé le premier mais pareil ça ne fonctionne toujours pas nn plus, en plus je crois pas que ça gêne de toute façon...

**Benjamin Delespierre** · 19/06/2012, 12h30

C'est datepicker et pas datePicker. Regarde ta console d'erreur

**nico9275** · 19/06/2012, 12h34

Envoyé par Benjamin Delespierre

C'est datepicker et pas datePicker. Regarde ta console d'erreur

Bah justement dans d'autres forum certains ont dis que c'est un P majuscule qu'il faut mettre et non pas un p minuscule. Bref du coup j'ai testé les 2 et toujours rien non plus de ce coté la^^

**nico9275** · 19/06/2012, 12h40

C'est bon fianlement ça marche. En fait en corrigant je rajoutait toujours une erreur a par. La j'ai enfin pu tout trouver, et ça fonctionne

Merci encore pour ton aide

**Benjamin Delespierre** · 19/06/2012, 14h21

Qu'est ce qui allait pas ?

**nico9275** · 20/06/2012, 10h28

Bah comme je l'ai dis plus haut en fait yavait une histoire de chemin qui allait pas au niveau du css bref manip vrmt bête quoi, je suis deg de pas l'avoir vu plus tot... Concernant les js a intégrer par contre j'avais pas les bon la t'avais raison c'était bien ces 2 la qu'il fallait mettre. Ensuite il manquait l'id. C'est bien datepicker et non pas datePicker

bref une successions de petites erreurs...
Pour ceux que ça intéresse, je vous passe le code: j'ai reglé le datepicker en français en ajoutant un autre js et une autre fonction. Et faites pas comme moi si vous placez votre fichier dans un autre dossier pensez a modifier le chemin^^

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<title>Default jQuery datepicker</title>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.21.custom/css/ui-lightness/jquery-ui-1.8.21.custom.css">
<script src="jquery-ui-1.8.21.custom/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.21.custom/js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.21.custom/development-bundle/ui/i18n/jquery.ui.datepicker-fr.js" type="text/javascript"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
$(function() {
$( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );
});
</script>
</head>
<body>
<p>Sélectionner votre date: <input id="datepicker" name="datepicker" type="text"></p></form>
</body>
</html>

**Benjamin Delespierre** · 20/06/2012, 11h18

je suis deg de pas l'avoir vu plus tot...

Si tu avait utilisé la console tu l'aurais vu tout de suite

Au passage, la façon dont tu initialise n'est pas la meilleure qui soit, je te recommande de regrouper toutes les initiliatisations dans une seule fonction _init et de donner un contexte, et si possible, de mettre tout le JS dans des fichiers JS et non dans le code HTML de la page:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function _init () {
  var context = arguments[0] || document;
  if (typeof $ == "undefined")
    throw "jQuery must be loaded before initialization";
 
  $('.datepicker', context).datepicker();
}
 
jQuery(function () {
  _init();
});

Pourquoi utiliser un contexte ? Tout simplement parce que tu voudra sans doute un jour faire de l'ajout de contenu avec Ajax, à ce moment là, tu voudra évidement appliquer les comportements JS définis dans _init à ce que tu viens d'ajouter à ton document non ? Mais si tu appelles _init, tu vas ajouter des trigger là où ils étaient définis, ce qui peut être source d'erreurs. Donc, tu spécifie à ce moment là le contexte pour ne cibler que ce que tu viens d'ajouter et ça va l'initialiser.

**nico9275** · 22/06/2012, 15h12

Ok, moi j'utilise firebug pour voir mes erreurs mais ce jours la j'étais un peu fatigué je n'y est pas pensé xD
je suis un grand débutant, j'ai encore bcp a apprendre de ce coté la.
Sinon merci pour la fonction, je prend note.
Ravi d'avoir bossé avec toi,
bonne journée

affichage de calendrier

jQuery

Discussions similaires

Partager

Partager