Bonjour,
J'ai créer un formulaire de réservation où j'ai 2 inputs date d'arrivée et date de départ en utilisant datepicker.
j'ai un troisième input qui m'affiche le nombre de jours. Je voudrais que le calcul s'affiche automatiquement dans ce champ.
En faisant des recherches j'ai trouvé des scripts. Un pour pouvoir afficher les dates au format français et l'enregistrer dans la base au format ISO et l'autre script qui fait le calcul.
Utilisés, séparément ils fonctionnent tous les 2 mais je n'arrive pas à les faire fonctionner ensemble.
Voici le code que j'ai pour enregistrer en Iso :
Et le code qui fait le calcul (très complexe pour mon niveau) :
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 $(function() { $.datepicker.setDefaults( $.datepicker.regional[ "fr" ] ); $( "#date_startFR" ).datepicker({ dateFormat: "yy-mm-dd", showOn: "button", buttonImageOnly: true, buttonImage: "images/calendar-green.gif", minDate: +1, changeMonth: true, changeYear: true, numberOfMonths: 2, dateFormat: 'DD dd MM yy', // de la forme : Vendredi 27 Janvier 2012 firstDay:1, altFormat: 'yy-mm-dd', altField: '#date_start' // (champ caché) format yy-mm-dd (ISO) }); $( "#date_endFR" ).datepicker({ dateFormat: "yy-mm-dd", showOn: "button", buttonImageOnly: true, buttonImage: "images/calendar-green.gif", minDate: +1, changeMonth: true, changeYear: true, numberOfMonths: 2, dateFormat: 'DD dd MM yy', // de la forme : Vendredi 27 Janvier 2012 firstDay:1, altFormat: 'yy-mm-dd', altField: '#date_end' // (champ caché) format yy-mm-dd (ISO) }); });
Comment faire pour assembler les deux ?
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 function days() { var a = $("#date_start").datepicker('getDate').getTime(), b = $("#date_end").datepicker('getDate').getTime(), c = 24*60*60*1000, diffDays = Math.round(Math.abs((a - b)/(c))); $("#totaldays").val(diffDays) } $(document).ready(function () { $.datepicker.setDefaults($.extend({dateFormat: "yy-mm-dd",showOn: "button",buttonImageOnly: true,buttonImage: "images/calendar-green.gif",minDate: +1,changeMonth: true,changeYear: true,numberOfMonths: 2,},$.datepicker.regional['fr'])); var selector = function (dateStr) { var d1 = $('#date_start').datepicker('getDate'); var d2 = $('#date_end').datepicker('getDate'); var diff = 0; if (d1 && d2) { diff = Math.floor((d2.getTime() - d1.getTime()) / 86400000); // ms par jour } $('#totaldays').val(diff); } $('#date_start').datepicker({ onSelect: function(selectedDate) { var minDate = $(this).datepicker('getDate'); if (minDate) {minDate.setDate(minDate.getDate() + 1);}// jours min requis $('#date_end').datepicker('option', 'minDate', minDate || 1); // Date + 1 ou demain par défaut days(); }}); $('#date_end').datepicker({minDate: 1, onSelect: function(selectedDate) { var maxDate = $(this).datepicker('getDate'); if (maxDate) {maxDate.setDate(maxDate.getDate() - 1);} $('#date_start').datepicker('option', 'maxDate', maxDate); // Date - 1 days(); }}); $('#date_start,#date_end').change(selector) }); </script>
Partager