Calendrier aide à la saisie

Version imprimable

Bonjour.
Je souhaite mettre un calendrier d'aide à la saisie sur mon formulaire HTML. J'ai essayé de me servir de jQuery en copiant le code proposé http://jqueryui.com/datepicker/ mais j'ai du oublier quelque chose de très important car le calendrier n'apparait pas quand je clique dans mon champ Date.
Merci de me remettre sur les rails.
Pierre.

Code:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- ici le commentaire --> 
<!HTML4 étant basé sur SGML, il lui faut un fichier définissant les règles de balisages (un DTD). Exactement comme XML et XHtml. Le doctype sert à ça,> 
<html> 
 <head> 
 <title>formulaire de saisie</title > 
<!en-tête de page> 
</head >
 
<body> <!corps de la page>
<!formulaire de saisie>
<!<FORM  Pour plus tard en CGI : method=post action="cgi-bin/script.pl">
<!-- ici important : method = post + enctype   permettant un retour a la ligne des données du mail recu -->  
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
 <form name="form1" id="form1" method="post" action="mailto:PP@pp.fr" enctype="text/plain"> 
 
 Enregistrement d'une sortie <br>
<TABLE BORDER=0>
<TR>Date: <input type="text" id="datepicker"></TR>
<TR>
	<TD>Temps</TD>
	<TD>
	<INPUT type=text name="temps" id="temps">
	</TD>
</TR>
 
<TR>
	<TD>Moyenne</TD>
	<TD>
	<INPUT type=text name="moyenne" id="moyenne">
	</TD>
</TR>
 
<TR>
	<TD>Sport</TD>
	<TD>
	Vélo : <INPUT type=radio name="velo" value="V">
	<br>Course à pieds : <INPUT type=radio name="courseapieds" value="CaP">
	</TD>
</TR>
 
<TR>
	<TD>Parcours</TD>
	<TD>
	<SELECT name="parcours">
		<OPTION VALUE="boulotAR">Boulot A/R</OPTION>
		<OPTION VALUE="TL2">Toulon-Faron</OPTION>
		<OPTION VALUE="MtCaume">Toulon-Mt Caume</OPTION>
		<OPTION VALUE="TL1">Faron-MtCaume-Faron</OPTION>
		<OPTION VALUE="Serre-BauRouge">Col-Serre-Bau Rouge</OPTION>
	</SELECT>
	</TD>
</TR>
<TR>
	<TD>Commentaires</TD>
	<TD>
	<TEXTAREA rows="3" name="commentaires">
	Tapez ici vos commentaires</TEXTAREA>
	</TD>
</TR>
 
<TR>
	<TD COLSPAN=2>
	<INPUT type="submit" name="Submit" value="Envoyer">   <p>  
	</TD>
</TR>
</TABLE>
</FORM>
<footer> <!pied-de-page></footer> </body >
 
</html >

Bonsoir

Avant d'apprendre le jQuery, il faut maîtriser les bases (HTML, CSS, JS). Votre code en général et votre structure HTML en particulier est catastrophique. Voici un exemple qu'il suffit de copier-coller pour tester.

Code:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta name="author" content="Daniel Hagnoul">
    <title>Forum jQuery</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.min.js"></script>
    <link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
    <script>
        "use strict";
 
        var debugBool = true;
 
         /*
          * J'utilise head.js pour charger CSS et JS de manière asynchrone 
          * et parallèle, mais les fichiers sont exécute dans l'ordre.
          * Voir la documentation et l'API : http://headjs.com/
          * Les polices de caractères et le fichier head.js doivent être 
          * inclus manuellement.
          */
        head.load(
            "http://danielhagnoul.developpez.com/styles/dvjhRemBase.css",
            "http://code.jquery.com/ui/1.10.4/themes/sunny/jquery-ui.css",
            "http://code.jquery.com/qunit/qunit-1.13.0.css",
            { "d3" : "http://d3js.org/d3.v3.min.js" },
            { "d3Hello" : "http://danielhagnoul.developpez.com/lib/dvjh/d3Hello.js" },
            { "jquery" : "http://code.jquery.com/jquery-2.1.1.min.js" },
            { "jqueryui" : "http://code.jquery.com/ui/1.10.4/jquery-ui.min.js" },
            { "datefr" : "http://danielhagnoul.developpez.com/lib/dvjh/datefr.js" },
            { "qunit" : "http://code.jquery.com/qunit/qunit-1.13.0.js" },
            { "testsQUnit" : "http://danielhagnoul.developpez.com/lib/dvjh/testsQUnit.js" }
        );      
    </script>
    <style>
        /* Nota bene : ici 1 rem est égal à 10 px, voir dvjhRemBase.css */
 
/*-- Début code du test --*/
 
/*-- Fin code du test --*/
 
    </style>
</head>
<body>
    <header>
        <h1>Forum jQuery</h1>
        <h2>
            <a href="">Lien</a>
        </h2>
    </header>
    <section class="conteneur">
        <nav>
 
<!-- Début code du test -->
 
 
<!-- Fin code du test -->
 
        </nav>
        <article>
 
<!-- Début code du test -->
 
<form>
    <table>
        <tbody>
            <td>
                Date : <input type="text" id="datepicker">
            </td>
        </tbody>
    </table>
</form>
 
<!-- Fin code du test -->
 
        </article>
        <article class="qunit">
            <div id="qunit"></div>
            <div id="qunit-fixture"></div>
        </article>
    </section>
    <footer class="h-entry">
        <time class="dt-published" datetime="2014-01-22T10:36:43.443+0100">2014-01-22T10:36:43.443+0100</time>
        <a class="p-author h-card" href="http://www.developpez.net/forums/u285162/danielhagnoul/">Daniel Hagnoul</a>
        <a class="u-url" href="http://danielhagnoul.developpez.com/">Mon cahier d’exercices</a>
        <a class="u-url" href="http://javascript.developpez.com/faq/jquery/">FAQ</a>
        <a class="u-url" href="http://javascript.developpez.com/cours/?page=frameworks#jquery">Tutoriels</a>
    </footer>
    <script>
        "use strict";
 
        /*
         * Chargeur de code head.js, document ready et fichiers chargés.
         */
        head.ready( [ 
                "d3", "d3Hello", 
                "jquery", "jqueryui", "datefr",
                "qunit", "testsQUnit"
            ], function(){
 
/* Début code du test */
 
$( function(){
 
    $( "#datepicker" ).datepicker();
 
});
 
/* Fin code du test */
 
            if ( debugBool ){
               console.log( ISOformat( new Date() ) );
 
                $( ".qunit" ).show();
 
                testQUnitSelector( "App", [ 
                    ".conteneur"
                ] );
 
                testQUnitID( "App", [ 
                    "qunit", "qunit-fixture"
                ] );
            }
 
        });
    </script>
</body>
</html>

12/06/2014, 14h33
69Pierre

Calendrier aide à la saisie

Bonjour et merci.
Effectivement, je vais essayer de mettre de l'ordre dans tout ça.
Mon soucis c'est le calendrier jQuery qui n'apparait pas même sur le scriprt que tu me propose et que j'ai copier-coller.
Je me doute que pour que ça marche il faut déclarer quelque chose, une bibliothèque ou des package (comme sous latex).
Pierre.

Bonjour,
- est ce que le code minimum de la documentation fonctionne ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
  $( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

- sous quel navigateur testes tu ?

14/06/2014, 13h23
69Pierre

Calendrier aide à la saisie
Bonjour.

euh...Je suis un peu confus. Ton script fonctionne, merci, et celui de danielhagnoul aussi. Pourquoi pas la dernière fois ?
Je teste sous firefox et IE.

Je souhaiterai quelques détails sur ce premier contact avec jquery :
Code:

1 2 <!doctype html> <html lang="en">
Le "en" ou "fr" pour la langue anglaise ou française changent quoi ?
Code:

1 2 3 4 <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Default functionality</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
CE code fait référence à des feuilles de style : faut il être connecter à internet pour que la partie jquery fonctionne.

Code:

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

src = fichier externe sur internet ?
On peut le mettre sur notre serveur, à côté des scripts HTML-PHP ?

Code:

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
Code:

1 2 3 $(function() { $( "#datepicker" ).datepicker(); });
id="datepicker", on appelle la fonction qui est à l'adresse du link... ?
Code:

1 2 3 4 5 </head> <body> <p>Date: <input type="text" id="datepicker"></p> </body> </html>
Où peut on voir le srcipt javascript qu'utilise jquery ?