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

affichage de calendrier

jQuery

Vue hybride

Discussions similaires

Partager

Partager