Ajouter un calendrier à coté d'un formulaire

**ramzi87** · 28/08/2015, 16h15

Bonsoir,
Je veux ajouter un calendrier à coté d'un formulaire lorsque je clique sur une date et je remplie mon formulaire et je valide la date sera dans la base (tableau) sachant que je n'ai pas un champ date dans mon formulaire, en plus les journées remplies sont en rouge et les autres en gris, à partir de demain en bleu sauf dimanche qui est en gris.

Nom : Calendar.jpg
Affichages : 1380
Taille : 20,2 Ko

Voilà mon formulaire avec des div que je n'ai pas pu insérer un exemple de calendrier à droite du form et en dehors

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
       <div class="container-fluid" id="result">
			<h1 class="col-xs-12 col-md-4 col-md-offset-4 center">Prestation</h1>
			<div class="col-xs-12 col-md-12">
				 <div class="container" id="formulaire">
				 <form action="prestation.php" method="post" id="userForm" class="form-horizontal">
 
				<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
 
 
<select name="client" class="form-control">
			<option value="" disabled selected>--- Choisir le client ---</option>
			<?php
                        
                        foreach($conn as $row)
                        {
                                echo "<option>".$row['clientName']."</option>";
                        }
 ?>
 </select>
 </div>
 </div>
 	<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
 
<select name="name" class="form-control">
			<option value="" disabled selected>--- Choisir le projet ---</option>
 
			<option value="START" >START</option>
			<option value="END" >END</option>
			</p>
			<?php
                        
                        foreach($conn1 as $row)
                        {
                                echo "<option>".$row['name']."</option>";
                        }
 ?>
 </select>
 </div>
 </div>
 	<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
 
 <select name="tache" class="form-control">
 <option value="" disabled selected>--- Choisir une tâche ---</option>
							<option>Tâche matin</option>
							<option>Tâche après-midi</option>
							<option>Tâche hors-période</option>
 
</select>
 
			</div>
        </div>
		<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
 
		<input type="text" name="debut" value="" placeholder="Début" id="debut">
		<input type="button" name="nom" value="Maintenant" onClick="document.getElementById('debut').value = getDt()">
 
 
		</div>
        </div>
		<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
 
		<input type="text" name="fin" value="" placeholder="Fin" id="fin">
		<input type="button" name="nom" value="Maintenant" onClick="document.getElementById('fin').value = getDt()">
 
 
		</div>
        </div>
 
<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
 
<select name="selection" class="form-control">
	<option value="" disabled selected>--- Choisir une action ---</option>
		<option> Analyse</option>
		<option> Recherche</option>
		<option> Développement</option>
		<option> Débogage</option>
</select>
 
		</div>
 
</div>
 
<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
 
					 <select name="note" class="form-control">
 <option value="" disabled selected>--- Choisir une note ---</option>
 <option>5%</option> <option>10%</option><option>20%</option><option>30%</option>
<option>40%</option><option>50%</option><option>60%</option><option>70%</option><option>80%</option><option>90%</option><option>100%</option>
 
 
</select>
</div>
 
</div>
<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
				<center>	
					 <textarea rows="5" cols="50" name="rapport" placeholder="Rapport" ></textarea>
					 </center>
 
 
 
		</div>
		</div>
<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
						<button type="submit" class="form-control btn btn-success pull-right" name="envoyer" id="envoyer">Enregistrer</button>
					</div>
				</div>
 
 </form>
 </div>
</div>
</div>

Merci d'avance

Invité · 28/08/2015, 19h19

Bonjour,
fais une recherche

avec : "Datepicker"

**ramzi87** · 29/08/2015, 13h22

J'ai passé beaucoup de temps à rechercher mais j'ai trouvé que datepicker pour input text mais moi je veux un calendrier dans la page toujours display

Invité · 29/08/2015, 16h08

Code :

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

1
2
3
4
5
6
7
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 
<div id="calendar">
  <input type="hidden" id="calendardate" name="ladate" />
</div>

Code :

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

1
2
3
4
5
6
7
<script>
    $(function() {
        $("#calendar").datepicker({
        altField: "#calendardate"
        });
    });
</script>

Tu appliques la fonction datepicker sur le div : le calendrier reste affiché. (voir ici)
Il faut ajouter un input caché, puisque tu veux pouvoir enregistrer ensuite la date en BdD.

N.B. Il est possible de formater la date : datepicker options

**ramzi87** · 30/08/2015, 19h21

Bonsoir,
Le calendrier est 100% fonctionnel dans une nouvelle page mais non pour mon formulaire.
Cordialement.

**ramzi87** · 05/09/2015, 10h39

Bonjour, je pense qu'il y a un conflits dans CSS ou JQuery (j'affiche un calendrier sans aucune mise en forme)

Invité · 05/09/2015, 11h14

As-tu telecharge le fichier CSS du calendrier datepicker jQuery-UI ?

(Déplacé dans le forum jQuery)

**ramzi87** · 05/09/2015, 12h02

Bonjour, non j'ai mis ça c tout

Code :

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

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

Invité · 05/09/2015, 12h27

Alors ça devrait être bon...

Il faut voir ton code (= une page en ligne) pour t'en dire plus.

N.B. On peut définir le format de la date : http://codepen.io/jreaux62/pen/epmQgj

Code javascript :

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

1
2
3
4
5
6
    $(function() {
        $("#calendar").datepicker({
          altField: "#calendardate",
          altFormat: 'yy-mm-dd' // de la forme : YYYY-MM-DD
        });
    });

**ramzi87** · 05/09/2015, 13h24

Bonjour, j'ai mis comme ça et je n'ai pas pu afficher le calendrier!!

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
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
<?php
session_start();
if (isset($_SESSION['email'])) {
?>
<?php
          include 'db.inc.php';
          $req="select distinct clientName from project";
          $conn = $connexion->prepare($req);
          $conn->execute();
          
          $email = $_SESSION['email'];
                $req1="select distinct p.name from inscription i, project p where i.pseudo= p.affectation and i.email = '".$email."'";
                $conn1 = $connexion->prepare($req1);
                $conn1->execute();
                
                
?>
 
<!DOCTYPE html>
 
<html lang="en">
        <head>
		<title>Ajout prestation</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta charset="utf-8">
        <meta name="description" content="">
 
        <!-- Bootstrap core CSS -->
        <link  rel="stylesheet" href="./css/bootstrap.min.css">
        <!-- FONT AWSOME -->
        <link rel="stylesheet" href="./css/font-awesome.min.css" media="all" />
        <!-- Datagrid -->
		<link rel="stylesheet" href="./css/jquery.bootgrid.min.css" media="all" />
		<!-- FormValidation -->
		<link rel="stylesheet" href="./css/formValidation.css" media="all" />
		<!-- Select2 -->
		<link rel="stylesheet" href="./css/select2.min.css" media="all" />
 
		<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 
 
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 10]>
        <div style='text-align:center'>
            <a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode">
                <img src="http://www.theie6countdown.com/img/upgrade.jpg"border="0"alt=""/>
            </a>
        </div>
        <![endif]-->
 
        <!-- un style pour centrer les bloc et rendre le code plus simple et visible -->
        <style type="text/css">
                        .container-fluid {
                                margin-top: 50px;
                                min-width: 400px;
                        }
                        
            .center {
                text-align: center;
            }
                        
                        td {
                                text-align: center;
                        }
        </style>
		<script>
 $(function() {
        $("#calendar").datepicker({
          altField: "#calendardate",
          altFormat: 'yy-mm-dd' // de la forme : YYYY-MM-DD
        });
    });
        </script>
 
    </head>
    <body>
		<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
 
					    <li>
                            <a href="identif.php">Identifiants</a>
                        </li>
						<li>
                            <a href="projet.php">Projet</a>
                        </li>
						<li class="active">
                            <a href="prestation.php">Prestation</a>
                        </li>
						<li>
                            <a href="statistique.php">Statistique</a>
                        </li>
                        <li>
                            <a href="contact.php">Contacter</a>
                        </li>
						<li>
						<a href="logout.php">Déconnecter</a>
						</li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </div>
 
        <div class="container-fluid" id="result">
			<h1 class="col-xs-12 col-md-4 col-md-offset-4 center">Prestation</h1>
			<div id="calendar">
					<input type="hidden" id="calendardate" name="ladate" />
				</div>
			<div class="col-xs-12 col-md-12">
				 <div class="container" id="formulaire">
				 <form action="prestation.php" method="post" id="userForm" class="form-horizontal">
 
				<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
 
 
	<select name="client" class="form-control">
			<option value="" disabled selected>--- Choisir le client ---</option>
			<?php
                        
                        foreach($conn as $row)
                        {
                                echo "<option>".$row['clientName']."</option>";
                        }
                        ?>
	</select>
	</div>
	</div>
 	<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
 
	<select name="name" class="form-control">
			<option value="" disabled selected>--- Choisir le projet ---</option>
			<?php
                        
                        foreach($conn1 as $row)
                        {
                                echo "<option>".$row['name']."</option>";
                        }
                        ?>
	</select>
	</div>
	</div>
 	<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
 
	<select name="tache" class="form-control">
		<option value="" disabled selected>--- Choisir une tâche ---</option>
							<option>Tâche matin</option>
							<option>Tâche après-midi</option>
							<option>Tâche hors-période</option>
 
	</select>
 
			</div>
        </div>
		<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
 
		<input type="text" name="debut" value="" placeholder="Début" id="debut">
		<input type="button" name="nom" value="Maintenant" onClick="document.getElementById('debut').value = getDt()">
 
 
		</div>
        </div>
		<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
 
		<input type="text" name="fin" value="" placeholder="Fin" id="fin">
		<input type="button" name="nom" value="Maintenant" onClick="document.getElementById('fin').value = getDt()">
 
 
		</div>
        </div>
 
		<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
 
	<select name="selection" class="form-control">
		<option value="" disabled selected>--- Choisir une action ---</option>
			<option> Analyse</option>
			<option> Recherche</option>
			<option> Développement</option>
			<option> Débogage</option>
	</select>
 
		</div>
 
		</div>
 
		<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
 
		<select name="note" class="form-control">
		<option value="" disabled selected>--- Choisir une note ---</option>
		<option>5%</option> <option>10%</option><option>20%</option><option>30%</option>
		<option>40%</option><option>50%</option><option>60%</option><option>70%</option><option>80%</option><option>90%</option><option>100%</option>
 
 
		</select>
		</div>
 
	</div>
	<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
				<center>	
					 <textarea rows="5" cols="50" name="rapport" placeholder="Rapport" ></textarea>
					 </center>
 
 
 
			</div>
		</div>
	<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
						<button type="submit" class="form-control btn btn-success pull-right" name="envoyer" id="envoyer">Enregistrer</button>
					</div>
				</div>
 
 </form>
 </div>
</div>
</div>
 
		<div id="footer">
            <div class="container center">
                <p>Copyright &copy; 2015 - FTW Group Corporate</p>
            </div>
        </div>
 
        <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="./js/bootstrap.min.js"></script>
        <script type="text/javascript" src="./js/formValidation.min.js"></script>
        <script type="text/javascript" src="./js/validation.min.js"></script>
        <script type="text/javascript" src="./js/bootstrap-datepicker.min.js"></script>
		<script type="text/javascript" src="./js/select2.full.min.js"></script>
		<script type="text/javascript" src="./js/main.js"></script>
		<script src="//code.jquery.com/jquery-1.10.2.js"></script>
		<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 
		<script type="text/javascript">
                function getDt(){
                dt=new Date();
                hrs=dt.getHours();
                min=dt.getMinutes();
                sec=dt.getSeconds();
                tm=" "+((hrs<10)?"0":"") +hrs+":";
                tm+=((min<10)?"0":"")+min+":";
                tm+=((sec<10)?"0":"")+sec+" ";
                return (tm);
        }
                </script>		
 
    </body>
</html>
 
<?php
} else {
         
header('Location: index.php');
}
?>

Invité · 05/09/2015, 13h33

Tu as plusieurs fichiers jQuery (css et js).

Vois s'ils ne sont pas redondants.

**NoSmoking** · 05/09/2015, 13h38

Bonjour,

en absence de protocole c'est celui de ta page qui est utilisé, donc si tu testes en local avec le protocole file://.

Essaie avec <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

**ramzi87** · 05/09/2015, 13h58

Merci mais rien n'est changé, j'ai testé les 2 liens sur la barre d'adresse du navigateur et ils me donnent le même contenu du fichier CSS.

Invité · 05/09/2015, 14h30

Sauf erreur, ce fichier doit être dans le <head> :

Code :

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

        <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>

Quant au CSS :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
        <!-- Bootstrap core CSS -->
        <link  rel="stylesheet" href="./css/bootstrap.min.css">
        <!-- FONT AWSOME -->
        <link rel="stylesheet" href="./css/font-awesome.min.css" media="all" />
        <!-- Datagrid -->
		<link rel="stylesheet" href="./css/jquery.bootgrid.min.css" media="all" />
		<!-- FormValidation -->
		<link rel="stylesheet" href="./css/formValidation.css" media="all" />
		<!-- Select2 -->
		<link rel="stylesheet" href="./css/select2.min.css" media="all" />
 
		<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

Vérifie que tous ces fichiers existent (liens correct).

N.B. NOUS N'avons PAS accès à ton ordinateur, ni à ton code, ni à une page en ligne.

Donc fais un effort pour :

EXPLIQUER plus précisément les problèmes
MONTRER les messages d'erreur éventuels
FAIRE DES TESTS (en JS : alert(...); ) pour AFFICHER et contrôler si les données sont correctes.

On ne peut pas le faire à ta place.

**danielhagnoul** · 05/09/2015, 20h12

@jreaux62 : Dans son code (message n° 10) :

C'est la pagaille dans les chargements de codes externes.

Il y a tentative d'utilisation de jQuery avant de l'avoir chargé.

Et je vois du Bootstrap : <script type="text/javascript" src="./js/bootstrap-datepicker.min.js"></script>.

**ramzi87** · 07/09/2015, 12h38

Que ferais-je donc?

Invité · 07/09/2015, 12h45

Bonjour,

Envoyé par danielhagnoul

Et je vois du Bootstrap : <script type="text/javascript" src="./js/bootstrap-datepicker.min.js"></script>.

En effet !

Le code que j'ai donné est pour le datepicker jQuery !

Que fait donc ce bootstrap-datepicker.min.js dans ton code ?

N.B. il faudrait voir une page en ligne pour pouvoir t'en dire plus...

**ramzi87** · 07/09/2015, 13h24

Je l'ai utilisé pour le test des champs input date dans des autres pages et j'ai copié tous les includes.

Je pense que le problème vient d'ici

Format des div et balise html et CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container-fluid" id="result">
			<h1 class="col-xs-12 col-md-4 col-md-offset-4 center">Prestation</h1>
 
			<div class="col-xs-12 col-md-12">
				 <div class="container" id="formulaire">
				 <form action="prestation.php" method="post" id="userForm" class="form-horizontal">
			<div id="calendar">
					<input type="hidden" id="calendardate" name="ladate" />
				</div>	 
				<div class="form-group">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
.........
.........

**ramzi87** · 08/09/2015, 17h52

Bonsoir,
Est ce qu'il fallait que je supprime tous les codes CSS et JS afin de trouver ma solution??!!!

Invité · 08/09/2015, 20h17

Bonjour,
non.

1/ Une méthode de débogage consiste à les commenter (= désactiver) UN A LA FOIS, et l'un après l'autre, et TESTER à chaque fois.
2/ La méthode inverse est de les commenter TOUS, et de les rajouter, UN à UN.

Cela permet de voir celui(ceux) qui pose(nt) problème, ou celui(ceux) qui est(sont) mal placé(s) ou en trop.

Ajouter un calendrier à coté d'un formulaire

jQuery

Discussions similaires

Partager

Partager