Ajouter un calendrier à coté d'un formulaire

**ramzi87** · 09/09/2015, 16h03

Bonsoir,

peut être c'est dû au main.js qui est responsable de la validation des formulaires et des types des champs (fields)

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
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
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
$(document).ready(function () {
    function randomNumber(min, max) {
		return Math.floor(Math.random() * (max - min + 1) + min);
	};
 
	function now() {
		var today = new Date();
		var jj = today.getDate();
		var mm = today.getMonth()+1; //janvier est le mois 0!
		var aaaa = today.getFullYear();
 
		if(jj<10) {
			jj='0'+jj
		} 
 
		if(mm<10) {
			mm='0'+mm
		} 
 
		today = jj+'/'+mm+'/'+aaaa;
		return (today);	
	};
 
	$('#category').select2();
	$('#captchaOperation').html([randomNumber(1, randomNumber(10, 30)), '+', randomNumber(1, randomNumber(10, 30))].join(' '));
 
	$('#birthDay').datepicker({
	    format: "dd/mm/yyyy",
		startDate: "01/01/1900",
		endDate: "today",
		startView: 2,
		clearBtn: true,
		autoclose: true
	})
	.on('changeDate', function(e) {
		// Revalidate the date field
		$('#userForm').formValidation('revalidateField', 'birthDay');
	});
	$('#encoDate').datepicker({
	    format: "dd/mm/yyyy",
		startDate: "01/01/1900",
		endDate: "today",
		startView: 2,
		clearBtn: true,
		autoclose: true
	})
	.on('changeDate', function(e) {
		// Revalidate the date field
		$('#userForm').formValidation('revalidateField', 'encoDate');
	});
	$('#dateStart').datepicker({
	    format: "dd/mm/yyyy",
		startDate: "01/01/1900",
		endDate: "today",
		startView: 2,
		clearBtn: true,
		autoclose: true
	})
	.on('changeDate', function(e) {
		// Revalidate the date field
		$('#userForm').formValidation('revalidateField', 'dateStart');
	});
	$('#dateEnd').datepicker({
	    format: "dd/mm/yyyy",
		startDate: "01/01/1900",
		endDate: "01/01/2100",
		startView: 2,
		clearBtn: true,
		autoclose: true
	})
	.on('changeDate', function(e) {
		// Revalidate the date field
		$('#userForm').formValidation('revalidateField', 'dateEnd');
	});
 
	$("#phoneform").intlTelInput({
		utilsScript: "http://jackocnr.com/lib/intl-tel-input/lib/libphonenumber/build/utils.js?2",
		autoPlaceholder: true,
		preferredCountries: [ "tn", "dz", "ma", "it", "fr", "us", "gb" ],
	});
 
	//FormValidation
    $('#userForm')
	.find('[name="colors"]')
		.select2()
		// Revalidate the color when it is changed
		.change(function(e) {
			$('#userForm').formValidation('revalidateField', 'category');
		})
		.end()
    .formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'fa fa-check fa-2x',
            invalid: 'fa fa-remove fa-2x',
            validating: 'fa fa-refresh fa-2x'
        },
        fields: {
            firstname: {
                validators: {
                    notEmpty: {
                        message: 'Required'
                    },
                    stringLength: {
                        min: 3,
                        max: 20,
                        message: '3 to 20 characters max'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z ]{3,20}$/,
                        message: 'Only Alpha-numeric are accepted'
                    }
                }
            },
            lastname: {
                validators: {
                    notEmpty: {
                        message: 'Required'
                    },
                    stringLength: {
                        min: 3,
                        max: 20,
                        message: '3 to 20 characters'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z ]{3,20}$/,
                        message: 'Only Alpha-numeric and whitespaces are accepted'
                    }
                }
            },
            pseudo: {
				threshold: 6,
				validators: {
					notEmpty: {
						message: 'Obligatoire'
					},
					stringLength: {
						min: 6,
						max: 15,
						message: '6 to 15 characters'
					},
					regexp: {
						regexp: /^[a-zA-Z0-9]{6,15}$/,
						message: 'Alpha-numeric only'
					},
					// Verification si le pseudo est dispo ou pas
					remote: {
						message: 'This pseudo is already used',
						url: 'pseudo.php',
						data: {
							type: 'pseudo'
						},
						type: 'POST'
					}
 
				}
			},
            email: {
                validators: {
                    notEmpty: {
                        message: 'Required'
                    },
                    regexp: {
                        regexp: /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i,
                        message: 'Invalid mail adress'
                    },
					remote: {
						message: 'this email is registred',
						url: 'mail.php',
						data: {
							type: 'email'
						},
						type: 'POST'
					}
                }
            },
            pass: {
                validators: {
                    notEmpty: {
                        message: 'Required'
                    },
                    stringLength: {
                        min: 8,
                        max: 20,
                        message: '8 to 20  characters'
                    }
                }
            },
            confpass: {
                validators: {
                    notEmpty: {
                        message: 'Required'
                    },
                    identical: {
                        field: 'pass',
                        message: 'The password and its confirmation are not the same'
                    }
                }
            },
			phoneform: {
                validators: {
                    callback: {
						message: 'Invalid Number',
						callback: function(value, validator, $field) {
							var isValid = $field.intlTelInput("isValidNumber");
							return (isValid);
						}
					}
                }
            },
			skype: {
                validators: {
                    notEmpty: {
                        message: 'Required'
                    }
                }
            },
			category: {
				validators: {
					callback: {
						message: 'Required',
						callback: function(value, validator, $field) {
							// Get the selected options
							var options = validator.getFieldElements('category').val();
							return (options != null);
						}
					}
				}
			},
			birthDay: {
                validators: {
                    notEmpty: {
                        message: 'Required'
                    },
                    date: {
                        format: 'DD/MM/YYYY',
                        min: '01/01/1900',
                        max: now(),
                        message: 'The date is not a valid'
                    }
                }
            },
			encoDate: {
                validators: {
                    notEmpty: {
                        message: 'Required'
                    },
                    date: {
                        format: 'DD/MM/YYYY',
                        min: '01/01/1900',
                        max: now(),
                        message: 'The date is not a valid'
                    }
                }
            },
			dateStart: {
                validators: {
                    notEmpty: {
                        message: 'Required'
                    },
                    date: {
                        format: 'DD/MM/YYYY',
                        min: '01/01/1900',
                        max: now(),
                        message: 'The date is not a valid'
                    }
                }
            },
			dateEnd: {
                validators: {
                    notEmpty: {
                        message: 'Required'
                    },
                    date: {
                        format: 'DD/MM/YYYY',
                        min: '01/01/1900',
                        max: now(),
                        message: 'The date is not a valid'
                    }
                }
            },
			captcha: {
				validators: {
					callback: {
						message: 'Wrong answer',
						callback: function(value, validator, $field) {
							var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
							return value == sum;
						}
					}
				}
			}
        }
    })
    .on('success.form.fv', function(e) {
        // Prevent form submission
        e.preventDefault();
		var phoneNumber = $("#phoneform").intlTelInput("getExtension") + $("#phoneform").intlTelInput("getNumber");
		$("#phone").val(phoneNumber);
        var $form = $(e.target),
            fv    = $form.data('formValidation');
        var submit = $('#envoyer');  // submit button
        submit.html('<i class="fa fa-refresh fa-refresh-animate"></i> Processing');
        $.ajax({
            url: './inscription.php', // form action url
            type: 'POST', // form submit method get/post
            dataType: 'html', // request type html/json/xml
            data: $form.serialize(),
            success: function(result) {
                var $message;
				var $boutton;
                if (result) {
                    $message = '<div class="alert alert-success col-xs-12 col-md-4 col-md-offset-4"><div class="row"><div class="col-xs-12 center"><i class="fa fa-check-circle fa-2x"></i> <strong>OK!</strong> vous &ecirc;tes enregistr&eacute;<br/>normalement on envoi le mail de verification</div></div></div>';
					$boutton = '<i class="fa fa-check"></i> Done';
                }
                else {
                    $message = '<div class="alert alert-danger col-xs-12 col-md-4 col-md-offset-4"><div class="row"><div class="col-xs-12 center"><i class="fa fa-times-circle fa-2x"></i> <strong>Oops!</strong> un petit probl&egrave;me avec l\'ajout d\'utilisateur</div></div></div>';
					$boutton = '<i class="fa fa-close"></i> Error';
					submit.removeClass('btn-success');
					submit.addClass('btn-danger');
                }
				submit.html($boutton);
				$form.replaceWith($message).fadeIn(10000);
				$form.destroy();
 
            },
            error: function(e) {
                console.log(e)
            }
        });
    });
});

Invité · 10/09/2015, 11h53

Bonjour,

sans une page en ligne, on ne peut rien faire de plus.

**ramzi87** · 11/09/2015, 09h31

Bonjour,
Alors je vous envoie ma source en privé ou bien l'adresse en ligne ou quoi faire?

Invité · 11/09/2015, 10h50

l'adresse en ligne.

**ramzi87** · 11/09/2015, 12h23

C'est envoyé en message privé

Invité · 11/09/2015, 13h03

Bonjour,
vu.

1/ Il faut SUPPRIMER :

Code :

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

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

2/ Il faut mettre DANS LE <head> :

Code :

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

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

(un update de la version serait bien)

3/

Code :

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

1
2
3
4
5
    $(function() {
        $("#calendar").datepicker({
        altField: "#calendardate"
        });
    });

Ok, mais où est le <div id="calendar"> ??
où est le <input type="hidden" id="calendardate" /> ??

=> il faut remplacer les identifiant "calendar" et "calendardate" par les bons !

Sur la page "Modifier Prestation" (en supposant que ce soit bien là) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
	<script>
	$(function() {
		$("#datepickerdebut").datepicker({
			altField: "#debutdate",
			altFormat: 'yy-mm-dd' // de la forme : YYYY-MM-DD
		});
		$("#datepickerfin").datepicker({
			altField: "#findate",
			altFormat: 'yy-mm-dd' // de la forme : YYYY-MM-DD
		});
	});
	</script>

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
        <div class="form-group" id="datepickerdebut">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
 
		<input type="text" name="debut" value="10:30:37"/>
		<input type="hidden" name="debutdate" id="debutdate" value="" />
		<input type="button" name="nom" value="Maintenant" onClick="document.getElementById('debut').value = getDt()"/>
 
 
		</div>
        </div>
		<div class="form-group" id="datepickerfin">
					<div class="col-xs-12 col-md-4 col-md-offset-4">
 
		<input type="text" name="fin" value="14:30:42" id="fin"/>
		<input type="hidden" name="findate" id="findate" value="" />
		<input type="button" name="nom" value="Maintenant" onClick="document.getElementById('fin').value = getDt()"/>
 
 
		</div>
        </div>

N.B. Les balises <input> sont auto-fermantes :

Code :

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

<input ......... />

**ramzi87** · 11/09/2015, 16h34

Bonsoir,
Tout d'abord je vous remercie d'avoir testé ma page,

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
<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">
 
 
	<select name="client" class="form-control">
			<option value="" disabled selected>--- Choisir le client ---</option>

J'ai mis div calendar au début de mon formulaire comme ci-dessus mais rien n'est changé!!

Pour le début et la fin je veux qu'il soit horaire pas plus car la date sera enregistré automatiquement avec la requête insert et la tâche sera pour une journée et non plus d'un jour.

Voici mon exemple que je veux dans la pièce jointe.

Invité · 11/09/2015, 18h42

Je ne le vois pas sur ta page en ligne...

Et les modifications que j'ai conseillées n'ont pas été faites non plus.

**ramzi87** · 12/09/2015, 09h29

Bonjour,
le calendrier s'est affiché mais le formulaire devient au dessus et le calendrier à gauche!!

De plus, comment le rendre en français?

Comment faire ceci?
--> Cet encodage est repris sous une forme de tableau récapitulatif par jour appelable depuis un calendrier dont les dates en couleur bleue sont vides et en rouges. On a un encodage en mémoire. Il n’est pas possible pour l’utilisateur de procéder à un encodage s’il n'a pas été effectué dans les temps ! Quand le jour n'a pas été encodé d’action, il devient gris

Nom : Sans titre.jpg
Affichages : 100
Taille : 41,3 Ko

Nom : Sans titre.jpg
Affichages : 100
Taille : 41,3 Ko

Invité · 12/09/2015, 10h08

Bonjour,

Datepicker Widget
"Datepicker en français"

**ramzi87** · 12/09/2015, 10h44

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
    $(function() {
        $("#calendar").datepicker({
        altField: "#calendardate"
        });
		$("#calendar").datepicker({
	dayNamesMin: [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ]
	});
		$("#calendar").datepicker({
  monthNames: [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juilliet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" ]
});
    });
	</script>

Pas de changement!!

Invité · 12/09/2015, 11h08

Tu peux mettre autant de "!!!" que tu veux, ça ne changera rien...

Ta syntaxe est fausse.

Code javascript :

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

1
2
3
4
5
6
7
8
9
	$(function() {
		$("#calendar").datepicker({
			altField: "#calendardate",
			altFormat: 'yy-mm-dd', // de la forme : YYYY-MM-DD
			dayNamesMin: [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ],
			dayNames: [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ],
			monthNames: [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" ]
		});
	});

**ramzi87** · 12/09/2015, 11h59

ça fonctionne très bien.. Désolé pour les '!!!'
A propos de la mise forme des div pour que les calendrier soit à gauche du formulaire et au même niveau, comment ferais-je?

Invité · 12/09/2015, 12h07

CSS.

**ramzi87** · 12/09/2015, 12h19

Je ne suis pas top en CSS. Je modifie le fichier .css relative à cette page ou bien c'est une libriaire <src=...>

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

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style type="text/css">
			.container-fluid {
				margin-top: 50px;
				min-width: 400px;
			}
 
            .center {
                text-align: center;
            }
 
			td {
				text-align: center;
			}
        </style>

Ici on modifie??

**ramzi87** · 13/09/2015, 18h52

Bonsoir,

Alors que ferais-je?? c'est vraiment pénible de différencier entre les div en CSS.
Toute la page est mise en forme sous un div center et je ne peux le diviser en deux un div pour le calendrier et l'autre pour le formulaire.

Cordialement.

**NoSmoking** · 13/09/2015, 19h00

Ton problème est dorénavant un problème de CSS alors merci de clore cette discussion et de poser clairement ta question sur le forum CSS.

Merci.

**ramzi87** · 13/09/2015, 22h01

Bonsoir,
C'est fait merci.

Ajouter un calendrier à coté d'un formulaire

jQuery

Discussions similaires

Partager

Partager