Calendrier aide à la saisie

**69Pierre** · 11/06/2014, 22h16

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 html :

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
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 >

**danielhagnoul** · 11/06/2014, 22h53

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 :

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
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>

**69Pierre** · 12/06/2014, 14h33

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.

**NoSmoking** · 14/06/2014, 01h18

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

Code html :

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
<!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 ?

**69Pierre** · 14/06/2014, 13h23

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 html :

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

1
2
<!doctype html>
<html lang="en">

Le "en" ou "fr" pour la langue anglaise ou française changent quoi ?

Code html :

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

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 :

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

<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 :

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

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

Code :

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

1
2
3
$(function() {
  $( "#datepicker" ).datepicker();
});

id="datepicker", on appelle la fonction qui est à l'adresse du link... ?

Code html :

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

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 ?

Calendrier aide à la saisie

jQuery

Discussions similaires

Partager

Partager