Utiliser un datetimepicker

**Raphall** · 11/03/2018, 17h47

Bonjour

Je rencontre un problème, j'aimerais utiliser un datetimepicker avec bootstrap et jquery mais impossible de le faire fonctionner.
Je rencontre l'erreur suivante : TypeError: $(...).datetimepicker is not a function.
En fait j'aimerais juste pouvoir cliquer sur l'input afficher le calendrier sélectionner une date et voilà.

Voici ce que j'obtient, j'ai beau cliquer sur le calendrier le calendrier n’apparaît pas :
Nom : Screenshot_4.png
Affichages : 4489
Taille : 21,7 Ko

Nom : Screenshot_4.png
Affichages : 4489
Taille : 21,7 Ko

Voici les erreurs que j'obtient :
Nom : Screenshot_5.png
Affichages : 4429
Taille : 12,5 Ko

Et ça c'est mon code :

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Plan'it!</title>
	<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="./css/style.css" />
	<link rel="icon" href="./images/favicon.ico" />
</head>
<body>
 
	<!-- Ajout de la bibliothèque jQuery -->
	<script type="text/javascript" src="./javascript/jquery-3.3.1.slim.min.js"></script>
	<script type="text/javascript" src="./javascript/jquery-ui.min.js"></script>
 
<header>
	    <a href="."><img src="./images/logo.png" alt="Plan'it" id="logo"/></a>
	    	    			<form id="connex_inscr" method="post" action="index.php">
						<button class="button" name='action' type='submit' value='SIGNOUT'><span>Déconnexion </span></button>
					</form>
 
</header>
 
<script type="text/javascript" src="./javascript/script.js"></script>
<script type="text/javascript" src="./javascript/XHR.js"></script>
<script type="text/javascript" src="./javascript/AJAX_recup_events_agenda.js"></script>
 
<label for="id_select" class="rouge">Agenda courant</label>
 
<select name="select" id="id_select" required autofocus onchange="ecrire(this.options[this.selectedIndex].innerHTML, 'id_titre'); request(this);">
	<option value=1>Mon agenda</option><option value=2>Mon autre agenda</option><option value=4>test</option><option value=7>agenda</option></select>
 
 
<span id="loader" style="display: none;"><img src="./images/loader.gif" alt="loading" style="width: 30px; margin-bottom: -10px" /></span>
 
<h1 id="id_titre"></h1>
 
<form method="POST" action=".">
	<button type="submit" value="newAgenda" class="button" name="action" ><span>Nouvel agenda </span></button>
</form>
<form method="POST" action=".">
	<input type="hidden" name="agenda" id="id_agenda" value="">
	<button type="submit" value="newEvent" class="button" name="action" ><span>Ajouter </span></button>
</form>
 
<div id="events">aucun event</div>
 
<script>
        var div = document.getElementById('id_select');
        ecrire(div.options[div.selectedIndex].innerHTML, 'id_titre');
        request(div);
</script>
 
 
<!--<script>
	/* initialize modals */
 
	$('#myModal').on('shown.bs.modal', function () {
		$('#myInput').trigger('focus')
	});
 
</script>-->
<div class="container-fluid">
	<div class="row">
		<div class="col-md-3">
			<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Ajouter</button>
 
			<!-- Modal -->
			<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
			  <div class="modal-dialog" role="document">
			    <div class="modal-content">
			      <div class="modal-header">
				        <h5 for="close_button" class="modal-title col-sm-4" id="exampleModalLabel">Ajouter un évenement</h5>
				        <button type="button" id="close_button" class="close" data-dismiss="modal" aria-label="Close">
				          <span aria-hidden="true">&times;</span>
				        </button>
			      </div>
			      <div class="modal-body">
			        <p class="required" id="js_error"></p>
<form method="POST" action="." id="event" onsubmit="return verifAddEventForm(this)">
 
	<!-- Type de l'evenement -->
 
	<div class="form-group row">
		<label for="id_type" class="col-sm-4 col-form-label">Nom de l'evenement<sup class='required'>*</sup></label>
		<div class="col-sm-8">
			<select name="type" form="event" id="id_type" class="form-control" required autofocus>
				<option value="" selected disabled hidden></option>
				<option value=Reunion>Reunion</option><option value=Repas>Repas</option><option value=Anniversaire>Anniversaire</option><option value=Cours>Cours</option><option value=Examen>Examen</option>			</select>
		</div>
	</div>
 
 
	<!-- Description -->
	<br />
	<label for="id_desc">Description de l'evenement </label>
	<textarea class="form-control" name="desc" id="id_desc" placeholder="Description" onblur="verifText(this)"></textarea>
 
 
	<!-- Champs de dates -->
	<br />
		<div class="container">
	    <div class='col-md-2'>
	        <div class="form-group">
	            <div class='input-group date' id='datetimepicker6'>
	                <input type='text' class="form-control" />
	                <span class="input-group-addon">
	                    <span class="glyphicon glyphicon-calendar"></span>
	                </span>
	            </div>
	        </div>
	    </div>
	    <div class='col-md-2'>
	        <div class="form-group">
	            <div class='input-group date' id='datetimepicker7'>
	                <input type='text' class="form-control" />
	                <span class="input-group-addon">
	                    <span class="glyphicon glyphicon-calendar"></span>
	                </span>
	            </div>
	        </div>
	    </div>
	</div>
	<script type="text/javascript">
            $(function () {
                $('#datetimepicker6').datetimepicker();
                $('#datetimepicker7').datetimepicker({
                    useCurrent: false //Important! See issue #1075
                });
                $("#datetimepicker6").on("dp.change", function (e) {
                    $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
                });
                $("#datetimepicker7").on("dp.change", function (e) {
                    $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
                });
            });
        </script>
 
 
	<!-- Lieu -->
	<br />
	<label for="id_lieu">Lieu </label>
	<input type="text" name="lieu" id="id_lieu" onblur="verifText(this)"/>
 
 
	<!-- Options -->
	<br />
	<label for="id_prio">Prioritaire </label>
	<input type="checkbox" name="prio" id="id_prio" value="0" />
 
	<label for="id_public">Public </label>
	<input type="checkbox" name="public" id="id_public" />
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 
							<!-- Envoi -->
 
			        <button type="submit" class="btn btn-success" name="action" value="AjouterEvent">Ajouter</button>
			      </div>
					</form> <!-- fin du formulaire d'ajout d'event -->
			    </div>
			  </div>
			</div>
 
		</div>
	</div>
</div>
		<footer>
			<h1>FOOTER</h1>
		</footer>
 
		<p class="copyrights">© Copyrights - La RATP</p>
 
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
		<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="./javascript/script.js"></script>
   </body>
</html>

Si vous avez besoin de plus d'infos je suis à votre disposition.

Merci d'avance

Raphaël.

**psychadelic** · 11/03/2018, 18h27

il n'y a nulle trace de la moindre librairie javascript relative à un datetimepicker
et de reste il existe plus de 1064 librairies traitant ce sujet => https://github.com/search?utf8=%E2%9...mepicker&type=

On fait comment pour deviner lequel tu a en tête ???

**Raphall** · 11/03/2018, 18h58

D'accord je me rend compte de ma connerie...
https://github.com/xdan/datetimepicker
disons la première, ce que je ne comprends pas c'est comment je fais pour savoir quoi importer ? le css ? le js je suis totalement perdu à ce niveau là.
J'ai essayé comme ça : (j'ai modifié la ligne 9 et 195)

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Plan'it!</title>
	<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
 
	<!-- Modification 1/2 -->
	<link rel="stylesheet" type="text/css" href="./css/jquery.datetimepicker.css" />
	<link rel="stylesheet" type="text/css" href="./css/style.css" />
	<link rel="icon" href="./images/favicon.ico" />
</head>
<body>
	<!-- Ajout de la bibliothèque jQuery -->
	<script type="text/javascript" src="./javascript/jquery-3.3.1.slim.min.js"></script>
	<script type="text/javascript" src="./javascript/jquery-ui.min.js"></script>
<header>
	    <a href="."><img src="./images/logo.png" alt="Plan'it" id="logo"/></a>
	    	    			<form id="connex_inscr" method="post" action="index.php">
						<button class="button" name='action' type='submit' value='SIGNOUT'><span>Déconnexion </span></button>
					</form>
 
</header>
 
<script type="text/javascript" src="./javascript/script.js"></script>
<script type="text/javascript" src="./javascript/XHR.js"></script>
<script type="text/javascript" src="./javascript/AJAX_recup_events_agenda.js"></script>
 
<label for="id_select" class="rouge">Agenda courant</label>
 
<select name="select" id="id_select" required autofocus onchange="ecrire(this.options[this.selectedIndex].innerHTML, 'id_titre'); request(this);">
	<option value=1>Mon agenda</option><option value=2>Mon autre agenda</option><option value=4>test</option><option value=7>agenda</option></select>
 
 
<span id="loader" style="display: none;"><img src="./images/loader.gif" alt="loading" style="width: 30px; margin-bottom: -10px" /></span>
 
<h1 id="id_titre"></h1>
 
<form method="POST" action=".">
	<button type="submit" value="newAgenda" class="button" name="action" ><span>Nouvel agenda </span></button>
</form>
 
<div class="container-fluid">
	<div class="row">
		<div class="col-md-3">
			<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Ajouter</button>
 
			<!-- Modal -->
			<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
			  <div class="modal-dialog" role="document">
			    <div class="modal-content">
			      <div class="modal-header">
				        <h5 for="close_button" class="modal-title col-sm-4" id="exampleModalLabel">Ajouter un évenement</h5>
				        <button type="button" id="close_button" class="close" data-dismiss="modal" aria-label="Close">
				          <span aria-hidden="true">&times;</span>
				        </button>
			      </div>
			      <div class="modal-body">
			        <p class="required" id="js_error"></p>
<form method="POST" action="." id="event" onsubmit="return verifAddEventForm(this)">
 
	<!-- Type de l'evenement -->
 
	<div class="form-group row">
		<label for="id_type" class="col-sm-4 col-form-label">Nom de l'evenement<sup class='required'>*</sup></label>
		<div class="col-sm-8">
			<select name="type" form="event" id="id_type" class="form-control" required autofocus>
				<option value="" selected disabled hidden></option>
				<option value=Reunion>Reunion</option><option value=Repas>Repas</option><option value=Anniversaire>Anniversaire</option><option value=Cours>Cours</option><option value=Examen>Examen</option>			</select>
		</div>
	</div>
 
 
	<!-- Description -->
	<br />
	<label for="id_desc">Description de l'evenement </label>
	<textarea class="form-control" name="desc" id="id_desc" placeholder="Description" onblur="verifText(this)"></textarea>
 
 
	<!-- Champs de dates -->
	<br />
	<!--<p>Debut</p>
	<label for="id_Ddebut">Date<sup class='required'>*</sup> </label>
	<input type="date" name="Ddebut" id="id_Ddebut" required="true" />
	<label for="id_Hdebut">Heure </label>
	<input type="time" name="Hdebut" id="id_Hdebut" />
 
	<p>Fin</p>
	<label for="id_Dfin">Date<sup class='required'>*</sup> </label>
	<input type="date" name="Dfin" id="id_Dfin" required="true" />
	<label for="id_Hfin">Heure </label>
	<input type="time" name="Hfin" id="id_Hfin" />-->
 
 
	<div class="container">
		<div class='col-md-2'>
				<div class="form-group">
						<div class='input-group date' id='datetimepicker6'>
								<input type='text' class="form-control" />
								<span class="input-group-addon">
										<span class="glyphicon glyphicon-calendar"></span>
								</span>
						</div>
				</div>
		</div>
		<div class='col-md-2'>
				<div class="form-group">
						<div class='input-group date' id='datetimepicker7'>
								<input type='text' class="form-control" />
								<span class="input-group-addon">
										<span class="glyphicon glyphicon-calendar"></span>
								</span>
						</div>
				</div>
		</div>
</div>
<script type="text/javascript">
                $(function () {
                                $('#datetimepicker6').datetimepicker();
                                $('#datetimepicker7').datetimepicker({
                                                useCurrent: false //Important! See issue #1075
                                });
                                $("#datetimepicker6").on("dp.change", function (e) {
                                                $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
                                });
                                $("#datetimepicker7").on("dp.change", function (e) {
                                                $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
                                });
                });
</script>
 
 
	<!-- Lieu -->
	<br />
	<label for="id_lieu">Lieu </label>
	<input type="text" name="lieu" id="id_lieu" onblur="verifText(this)"/>
 
 
	<!-- Options -->
	<br />
	<label for="id_prio">Prioritaire </label>
	<input type="checkbox" name="prio" id="id_prio" value="0" />
 
	<label for="id_public">Public </label>
	<input type="checkbox" name="public" id="id_public" />
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 
							<!-- Envoi -->
							<input type="hidden" name="agenda" id="id_agenda" value="">
			        <button type="submit" class="btn btn-success" name="action" value="AjouterEvent">Ajouter</button>
			      </div>
					</form> <!-- fin du formulaire d'ajout d'event -->
			    </div>
			  </div>
			</div>
 
<div id="events">aucun event</div>
 
<script>
        var div = document.getElementById('id_select');
        ecrire(div.options[div.selectedIndex].innerHTML, 'id_titre');
        request(div);
</script>
 
 
<!--<script>
	/* initialize modals */
 
	$('#myModal').on('shown.bs.modal', function () {
		$('#myInput').trigger('focus')
	});
 
</script>-->
 
		</div>
	</div>
</div>
		<footer>
			<h1>FOOTER</h1>
		</footer>
 
		<p class="copyrights">© Copyrights - La RATP</p>
 
 
 
		<!-- Popper -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 
		<!-- bootstrap -->
		<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
 
		<!-- Modification 2/2 -->
		<script type="text/javascript" src="./javascript/jquery.datetimepicker.js"></script>
 
		<script type="text/javascript" src="./javascript/script.js"></script>
   </body>
</html>

J'ai encore une erreur : TypeError: t.fx is undefined

J'ai commencé à utiliser jquery et bootstrap il y a quelques jours à mon avis y'a un truc que j'ai zappé dans ma façon d'importer les bibliothèques...

Merci pour ton aide c'est déjà un grand pas puisque maintenant j'obtient le calendrier comme ceci :

Nom : Screenshot_6.png
Affichages : 4422
Taille : 22,0 Ko

Nom : Screenshot_6.png
Affichages : 4422
Taille : 22,0 Ko

J'obtient une erreur quand je clique sur le mois : TypeError: e.originalEvent.touches is undefined dans le fichier : jquery.datetimepicker.js:1:32541
De plus j'ai beau cliquer partout aucune date ne se sauvegarde dans le champ, il reste toujours vide...

**psychadelic** · 11/03/2018, 20h03

Oui, ton datetimepicker ne fait pas partie de Bootstrap.
C'est un librairie libre, faite par un certain xdan et qui la fournie gracieusement à qui voudra l'utiliser sur son site.

donc d'abord, il faut le télécharger ( bouton vert "Clone or DownLoad" puis choisir "DownLoad ZIP" en bleu )

ensuite décompresser ce fichier => il crée un dossier " datetimepicker-master " dans lequel tu trouvera un sous dossier appellé " Build "

reste à copier les 2 fichiers :
- jquery.datetimepicker.full.min.js
- jquery.datetimepicker.min.css

en lieu et place dans ton site

puis à ajouter les lignes suivantes

<link rel="stylesheet" type="text/css" href="css/jquery.datetimepicker.min.css" /> => dans le header et qui hiérarchiquement doit être apres cell de bootstrap.min.css

et
<script type="text/javascript" src="./jquery.datetimepicker.full.min.js"></script> => qui doit être hiérarchiquement placé après celle de jQuery

ensuite il y deux fois la même référence dans ta page : en ligne 25 et 197 = <script type="text/javascript" src="./javascript/script.js"></script>.

mon conseil :
place tout tes scripts ensemble et dans leur ordre hiérarchique tout en bas de ta pages html, juste avant la balise body

exemple :

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
	<footer>
		<h1>FOOTER</h1>
	</footer>
 
	<p class="copyrights">© Copyrights - La RATP</p>
 
 
	<!-- Ajout de la bibliothèque jQuery -->
	<script type="text/javascript" src="./javascript/jquery-3.3.1.slim.min.js"></script>
	<script type="text/javascript" src="./javascript/jquery-ui.min.js"></script>
	<!-- Popper -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"></script>
 
	<script type="text/javascript" src="./javascript/XHR.js"></script>
	<script type="text/javascript" src="./javascript/AJAX_recup_events_agenda.js"></script>
 
	<!-- bootstrap -->
	<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
 
	<!-- Modification 2/2 -->
  <!-- script type="text/javascript" src="./javascript/jquery.datetimepicker.js"></script -->
 
  <script type="text/javascript" src="./jquery.datetimepicker.full.min.js"></script>
 
	<script type="text/javascript" src="./javascript/script.js"></script>
  <script>
    var div = document.getElementById('id_select');
    ecrire(div.options[div.selectedIndex].innerHTML, 'id_titre');
    request(div);
  </script>
 
 
  <!--<script>
/* initialize modals */
 
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
});
 
</script>-->
</body>
</html>

**Raphall** · 11/03/2018, 23h32

Tout d'abord encore merci pour ton aide j'ai modifié mon code et changé de datetimepicker, j'ai utilisé celui-ci : https://github.com/Eonasdan/bootstrap-datetimepicker merci à lui.
Pour les autres je tiens à préciser que ce picker a besoin de ce script : https://momentjs.com/downloads/moment.min.js pour fonctionner.

Je ne sais pas pourquoi celui de xdan n'a pas fonctionné...

bref voici mon code :

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Plan'it!</title>
	<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="./css/bootstrap-datetimepicker.min.css" />
	<link rel="stylesheet" type="text/css" href="./css/style.css" />
	<link rel="icon" href="./images/favicon.ico" />
</head>
<body>
 
	<!-- Ajout de la bibliothèque jQuery -->
	<script type="text/javascript" src="./javascript/jquery-3.3.1.slim.min.js"></script>
 
<header>
	    <a href="."><img src="./images/logo.png" alt="Plan'it" id="logo"/></a>
	    	    			<form id="connex_inscr" method="post" action="index.php">
						<button class="button" name='action' type='submit' value='SIGNOUT'><span>Déconnexion </span></button>
					</form>
 
</header>
 
<script type="text/javascript" src="./javascript/script.js"></script>
<script type="text/javascript" src="./javascript/XHR.js"></script>
<script type="text/javascript" src="./javascript/AJAX_recup_events_agenda.js"></script>
 
<label for="id_select" class="rouge">Agenda courant</label>
 
<select name="select" id="id_select" required autofocus onchange="ecrire(this.options[this.selectedIndex].innerHTML, 'id_titre'); request(this);">
	<option value=1>Mon agenda</option><option value=2>Mon autre agenda</option><option value=4>test</option><option value=7>agenda</option></select>
 
 
<span id="loader" style="display: none;"><img src="./images/loader.gif" alt="loading" style="width: 30px; margin-bottom: -10px" /></span>
 
<h1 id="id_titre"></h1>
 
<form method="POST" action=".">
	<button type="submit" value="newAgenda" class="button" name="action" ><span>Nouvel agenda </span></button>
</form>
 
<div class="container-fluid">
	<div class="row">
		<div class="col-md-3">
			<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Ajouter</button>
 
			<!-- Modal -->
			<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
			  <div class="modal-dialog" role="document">
			    <div class="modal-content">
			      <div class="modal-header">
				        <h5 for="close_button" class="modal-title col-sm-4" id="exampleModalLabel">Ajouter un évenement</h5>
				        <button type="button" id="close_button" class="close" data-dismiss="modal" aria-label="Close">
				          <span aria-hidden="true">&times;</span>
				        </button>
			      </div>
			      <div class="modal-body">
			        <p class="required" id="js_error"></p>
<form method="POST" action="." id="event" onsubmit="return verifAddEventForm(this)">
 
	<!-- Type de l'evenement -->
 
	<div class="form-group row">
		<label for="id_type" class="col-sm-4 col-form-label">Nom de l'evenement<sup class='required'>*</sup></label>
		<div class="col-sm-8">
			<select name="type" form="event" id="id_type" class="form-control" required autofocus>
				<option value="" selected disabled hidden></option>
				<option value=Reunion>Reunion</option><option value=Repas>Repas</option><option value=Anniversaire>Anniversaire</option><option value=Cours>Cours</option><option value=Examen>Examen</option>			</select>
		</div>
	</div>
 
 
	<!-- Description -->
	<br />
	<label for="id_desc">Description de l'evenement </label>
	<textarea class="form-control" name="desc" id="id_desc" placeholder="Description" onblur="verifText(this)"></textarea>
 
 
	<!-- Champs de dates -->
	<br />
	<!--<p>Debut</p>
	<label for="id_Ddebut">Date<sup class='required'>*</sup> </label>
	<input type="date" name="Ddebut" id="id_Ddebut" required="true" />
	<label for="id_Hdebut">Heure </label>
	<input type="time" name="Hdebut" id="id_Hdebut" />
 
	<p>Fin</p>
	<label for="id_Dfin">Date<sup class='required'>*</sup> </label>
	<input type="date" name="Dfin" id="id_Dfin" required="true" />
	<label for="id_Hfin">Heure </label>
	<input type="time" name="Hfin" id="id_Hfin" />-->
 
 
	<div class="container">
		<div class='col-md-3'>
				<div class="form-group">
						<div class='input-group date' id='datetimepicker1'>
								<input type='text' class="form-control" />
								<span class="input-group-addon">
										<span class="glyphicon glyphicon-calendar"></span>
								</span>
						</div>
				</div>
		</div>
		<div class='col-md-3'>
				<div class="form-group">
						<div class='input-group date' id='datetimepicker2'>
								<input type='text' class="form-control" />
								<span class="input-group-addon">
										<span class="glyphicon glyphicon-calendar"></span>
								</span>
						</div>
				</div>
		</div>
</div>
<script type="text/javascript">
                $(function () {
                                $('#datetimepicker1').datetimepicker();
                                $('#datetimepicker2').datetimepicker({
                                                useCurrent: false //Important! See issue #1075
                                });
                                $("#datetimepicker1").on("dp.change", function (e) {
                                                $('#datetimepicker2').data("DateTimePicker").minDate(e.date);
                                });
                                $("#datetimepicker2").on("dp.change", function (e) {
                                                $('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
                                });
                });
</script>
 
 
	<!-- Lieu -->
	<br />
	<label for="id_lieu">Lieu </label>
	<input type="text" name="lieu" id="id_lieu" onblur="verifText(this)"/>
 
 
	<!-- Options -->
	<br />
	<label for="id_prio">Prioritaire </label>
	<input type="checkbox" name="prio" id="id_prio" value="0" />
 
	<label for="id_public">Public </label>
	<input type="checkbox" name="public" id="id_public" />
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 
							<!-- Envoi -->
							<input type="hidden" name="agenda" id="id_agenda" value="">
			        <button type="submit" class="btn btn-success" name="action" value="AjouterEvent">Ajouter</button>
			      </div>
					</form> <!-- fin du formulaire d'ajout d'event -->
			    </div>
			  </div>
			</div>
 
<div id="events">aucun event</div>
 
<script>
        var div = document.getElementById('id_select');
        ecrire(div.options[div.selectedIndex].innerHTML, 'id_titre');
        request(div);
</script>
 
		</div>
	</div>
</div>
		<footer>
			<h1>FOOTER</h1>
		</footer>
 
		<p class="copyrights">© Copyrights - La RATP</p>
 
 
 
 
	<!--<script type="text/javascript" src="./javascript/jquery-ui.min.js"></script>-->
	<!-- Popper -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"></script>
 
	<script type="text/javascript" src="./javascript/XHR.js"></script>
	<script type="text/javascript" src="./javascript/AJAX_recup_events_agenda.js"></script>
 
	<!-- bootstrap -->
	<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
 
	<script type="text/javascript" src="./javascript/moment.min.js"></script>
  <script type="text/javascript" src="./javascript/bootstrap-datetimepicker.min.js"></script>
 
	<script type="text/javascript" src="./javascript/script.js"></script>
   </body>
</html>

J'ai vu plusieurs fois qu'il fallait placer la ligne :

Code :

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

1
2
<!-- Ajout de la bibliothèque jQuery -->
	<script type="text/javascript" src="./javascript/jquery-3.3.1.slim.min.js"></script>

juste avant le body mais lorsque j'effectue cela, la variable $ n'est pas définie (erreur dans la console) à la ligne $(function () {.

Logiquement je trouve cela normal car la variable $ d'après ce que j'ai compris est bien définie dans le jquery donc il faut charger ce script avant.

Donc es-ce que mon code est anormal par rapport à la norme utilisée ? C'est la dernière question que je me pose.

En tout cas merci à toi, sujet résolu et bonne codinuation.

Nom : Screenshot_7.png
Affichages : 4423
Taille : 42,8 Ko

Nom : Screenshot_7.png
Affichages : 4423
Taille : 42,8 Ko

**psychadelic** · 12/03/2018, 00h54

oui, je ne sais pas si le mot anormal est celui que je choisirai, mais effectivement ton code est effectivement très bizarre

déjà je ne comprends pas pourquoi tu à besoin de placer 2 fois

<script type="text/javascript" src="./javascript/script.js"></script> => ligne 24
et
<script type="text/javascript" src="./javascript/script.js"></script> => ligne 192

????

sinon oui utilisation du $ est privilégiée en jQuery;
elle se substitue à l'objet jQuery et on peu écrire indifféremment $('#Id_Truc).--- ou jQuery('#Id_Truc).---

et le principe de l'utilisation de l'un ou de l'autre est bien d'avoir la librairie chargée en mémoire pour pouvoir l'utiliser ensuite.

ce qui n'est pas orthodoxe, c'est de mettre du script au milieu du body :

ligne 24, 25,26 :

Code :

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

1
2
3
<script type="text/javascript" src="./javascript/script.js"></script>
<script type="text/javascript" src="./javascript/XHR.js"></script>
<script type="text/javascript" src="./javascript/AJAX_recup_events_agenda.js"></script>

devraient se retrouver à la fin du body

pareil pour les lignes 116 à 129, elles n'ont rien a faire à cet endroit, il faut les placer à la fin.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
		$(function () {
				$('#datetimepicker1').datetimepicker();
				$('#datetimepicker2').datetimepicker({
						useCurrent: false //Important! See issue #1075
				});
				$("#datetimepicker1").on("dp.change", function (e) {
						$('#datetimepicker2').data("DateTimePicker").minDate(e.date);
				});
				$("#datetimepicker2").on("dp.change", function (e) {
						$('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
				});
		});
</script>

et le touti justement te permettrai aussi de mettre la référence à la librairie jQuery un peu avant.

et au passage, inutile de mettre des src="./--- ou des href="./--- la suite ./ désigne le répertoire courant et ne sont véritablement utiles que dans des lignes de commande.

ce qui au final devrait ressembler à ça :

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Plan'it!</title>
  <link rel="icon" href="images/favicon.ico" />
  <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.min.css" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
  <header>
    <a href=".">
      <img src="images/logo.png" alt="Plan'it" id="logo" />
    </a>
    <form id="connex_inscr" method="post" action="index.php">
      <button class="button" name='action' type='submit' value='SIGNOUT'>
        <span>Déconnexion </span>
      </button>
    </form>
  </header>
 
  <label for="id_select" class="rouge">Agenda courant</label>
 
  <select name="select" id="id_select" required autofocus onchange="ecrire(this.options[this.selectedIndex].innerHTML, 'id_titre'); request(this);">
    <option value=1>Mon agenda</option>
    <option value=2>Mon autre agenda</option>
    <option value=4>test</option>
    <option value=7>agenda</option>
  </select>
 
  <span id="loader" style="display: none;">
    <img src="images/loader.gif" alt="loading" style="width: 30px; margin-bottom: -10px" />
  </span>
 
  <h1 id="id_titre"></h1>
 
  <form method="POST" action=".">
    <button type="submit" value="newAgenda" class="button" name="action">
      <span>Nouvel agenda </span>
    </button>
  </form>
 
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Ajouter</button>
 
        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 for="close_button" class="modal-title col-sm-4" id="exampleModalLabel">Ajouter un évenement</h5>
                <button type="button" id="close_button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <p class="required" id="js_error"></p>
                <form method="POST" action="." id="event" onsubmit="return verifAddEventForm(this)">
 
                  <!-- Type de l'evenement -->
 
                  <div class="form-group row">
                    <label for="id_type" class="col-sm-4 col-form-label">Nom de l'evenement
                      <sup class='required'>*</sup>
                    </label>
                    <div class="col-sm-8">
                      <select name="type" form="event" id="id_type" class="form-control" required autofocus>
                        <option value="" selected disabled hidden></option>
                        <option value=Reunion>Reunion</option>
                        <option value=Repas>Repas</option>
                        <option value=Anniversaire>Anniversaire</option>
                        <option value=Cours>Cours</option>
                        <option value=Examen>Examen</option>
                      </select>
                    </div>
                  </div>
 
                  <!-- Description -->
                  <br />
                  <label for="id_desc">Description de l'evenement </label>
                  <textarea class="form-control" name="desc" id="id_desc" placeholder="Description" onblur="verifText(this)"></textarea>
 
                  <!-- Champs de dates -->
                  <br />
                  <!--<p>Debut</p>
<label for="id_Ddebut">Date<sup class='required'>*</sup> </label>
<input type="date" name="Ddebut" id="id_Ddebut" required="true" />
<label for="id_Hdebut">Heure </label>
<input type="time" name="Hdebut" id="id_Hdebut" />
 
<p>Fin</p>
<label for="id_Dfin">Date<sup class='required'>*</sup> </label>
<input type="date" name="Dfin" id="id_Dfin" required="true" />
<label for="id_Hfin">Heure </label>
<input type="time" name="Hfin" id="id_Hfin" />-->
 
                  <div class="container">
                    <div class='col-md-3'>
                      <div class="form-group">
                        <div class='input-group date' id='datetimepicker1'>
                          <input type='text' class="form-control" />
                          <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                          </span>
                        </div>
                      </div>
                    </div>
                    <div class='col-md-3'>
                      <div class="form-group">
                        <div class='input-group date' id='datetimepicker2'>
                          <input type='text' class="form-control" />
                          <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
 
                  <!-- Lieu -->
                  <br />
                  <label for="id_lieu">Lieu </label>
                  <input type="text" name="lieu" id="id_lieu" onblur="verifText(this)" />
 
                  <!-- Options -->
                  <br />
                  <label for="id_prio">Prioritaire </label>
                  <input type="checkbox" name="prio" id="id_prio" value="0" />
 
                  <label for="id_public">Public </label>
                  <input type="checkbox" name="public" id="id_public" />
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 
                <!-- Envoi -->
                <input type="hidden" name="agenda" id="id_agenda" value="">
                <button type="submit" class="btn btn-success" name="action" value="AjouterEvent">Ajouter</button>
              </div>
              </form>
              <!-- fin du formulaire d'ajout d'event -->
            </div>
          </div>
        </div>
 
        <div id="events">aucun event</div>
 
      </div>
    </div>
  </div>
  <footer>
    <h1>FOOTER</h1>
  </footer>
 
  <p class="copyrights">© Copyrights - La RATP</p>
 
  <!--<script type="text/javascript" src="javascript/jquery-ui.min.js"></script>-->
  <script type="text/javascript" src="javascript/jquery-3.3.1.slim.min.js"></script>
  <script type="text/javascript" src="javascript/moment.min.js"></script>
 
  <!-- bootstrap -->
  <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="javascript/bootstrap-datetimepicker.min.js"></script>
 
  <!-- Popper -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
 
  <script type="text/javascript" src="javascript/XHR.js"></script>
  <script type="text/javascript" src="javascript/AJAX_recup_events_agenda.js"></script>
 
  <script type="text/javascript" src="javascript/script.js"></script>
 
  <script type="text/javascript">
    $(function () {
      var div = document.getElementById('id_select');
      ecrire(div.options[div.selectedIndex].innerHTML, 'id_titre');
      request(div);
 
      $('#datetimepicker1').datetimepicker();
      $('#datetimepicker2').datetimepicker({
        useCurrent: false //Important! See issue #1075
      });
      $("#datetimepicker1").on("dp.change", function (e) {
        $('#datetimepicker2').data("DateTimePicker").minDate(e.date);
      });
      $("#datetimepicker2").on("dp.change", function (e) {
        $('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
      });
    });
  </script>
</body>
</html>

Utiliser un datetimepicker

jQuery

Vue hybride

Discussions similaires

Partager

Partager