Utilisation datepicker jQuery

**Arendelle** · 24/05/2015, 20h06

Bonsoir tout le monde,

Voila j'essaie d'utiliser la librairie datepicker de jquery mais je rencontre un soucis, en faites il me met que un champ texte et pas le calendrier.

je l'utilise d'après ce lien: http://jqueryui.com/datepicker/#method-getDate

Pouvez vous m'aider s'il vous plait ? Voici mon code:

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
29
 
<html lang="en">
<head>
<link rel="stylesheet" href="jquery-ui.css">
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
</head>
 
<script>
 
 
  $(function() {
    $( "#datepicker" ).datepicker();
  });
 
</script>
<div style="float:left;width:100%;height:100%;">
 
<body>
 
   <p>Date: <input type="text" id="datepicker" value=""></p>
 
 
        <p>Un peu de texte pour ne rien dire</p>
 
</body>
 
</div>
</html>

Je vous remercie d'avance pour votre aide

**Bovino** · 26/05/2015, 09h11

La première des choses, ce serait déjà d'apprendre les bases du HTML...
Que fait ta balise <script> en dehors des balises <head> ou <body> ?
Depuis quand on englobe la balise <body> dans une <div> ?

Ensuite

en faites il me met que un champ texte et pas le calendrier

C'est normal, le champ texte reste un champ texte, le calendrier apparait quand tu cliques dessus.

**thunder75** · 27/05/2015, 11h50

C'est vrai que le code html n'est pas très joli...

Pour voir apparaitre directement un calendrier il ne faut pas utilisé un input mais une div (voir exemple sur le site jquery ui http://jqueryui.com/datepicker/#inline)

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
<html lang="en">
<head>
<link rel="stylesheet" href="jquery-ui.css">
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script>
 
 
  $(function() {
    $( "#datepicker" ).datepicker();
  });
 
</script>
</head>
<body>
   <p>Date: <div id="datepicker"></div>
 
 
        <p>Un peu de texte pour ne rien dire</p>
 
</body>
</html>

Utilisation datepicker jQuery

jQuery

Discussions similaires

Partager

Partager