Datepicker - lier 2 scripts dateFormat et calcul entre 2 dates

**Danamel78** · 30/10/2014, 13h39

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 :

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)
	}); 
});

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

Comment faire pour assembler les deux ?

**danielhagnoul** · 31/10/2014, 12h12

Bonjour

Exemple :

Code CSS :

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

1
2
3
form { width: 300px; }
fieldset { margin: 12px; }
label { display: block; }

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<form>
    <fieldset>
        <label>
            Date de départ : <input type="text" id="dateDepart">
        </label>
         <label>
            Date de retour : <input type="text" id="dateRetour">
        </label>
        <label>
            Nombre de jours : <output id="nbJours"></output>
        </label>
    </fieldset>
</form>

Code JS :

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
$( function(){ // forme abrégée de $(document).ready(function(){
 
    $.datepicker.regional['fr'] = {
        closeText: 'Fermer',
        prevText: 'Précédent',
        nextText: 'Suivant',
        currentText: 'Aujourd\'hui',
        monthNames: ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',
            'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'],
        monthNamesShort: ['janv.', 'févr.', 'mars', 'avril', 'mai', 'juin',
            'juil.', 'août', 'sept.', 'oct.', 'nov.', 'déc.'],
        dayNames: ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
        dayNamesShort: ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
        dayNamesMin: ['D','L','M','M','J','V','S'],
        weekHeader: 'Sem.',
        dateFormat: 'dd/mm/yy',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ''
    };
 
    $.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
 
    $( "#dateDepart" ).datepicker({
        changeMonth : true,
        changeYear : true,
        showButtonPanel : true,
        minDate : "-0d", // pas dans le passé
        maxDate : "+1y", // dans un an maximum
    });
 
    $( "#dateRetour" ).datepicker({
        changeMonth : true,
        changeYear : true,
        showButtonPanel : true,
        minDate : "+1d", // aujourd'hui + 1
        maxDate : "+1y", // dans un an maximum
    });
 
    $( "#dateDepart, #dateRetour" ).on( "change", function( event ){
 
        var dateDepartStr = $.trim( $( "#dateDepart" ).val() ),
            dateRetourStr = $.trim( $( "#dateRetour" ).val() ),
            dateDepart = null,
            dateRetour = null;
 
        if ( dateDepartStr.length >= 8 && dateRetourStr.length >= 8 ){
 
            dateDepart = new Date(
                dateDepartStr.slice( 6 ), // yyyy
                parseInt( dateDepartStr.slice( 3, 5 ), 10 ) - 1, // mm - 1
                parseInt( dateDepartStr.slice( 0, 2 ), 10 )  // dd
            );
 
            dateRetour = new Date(
                dateRetourStr.slice( 6 ), // yyyy
                parseInt( dateRetourStr.slice( 3, 5 ), 10 ) - 1, // mm - 1
                parseInt( dateRetourStr.slice( 0, 2 ), 10 )  // dd
            );
 
            // différence entre deux dates en millisecondes, on veut un nombre de jours
            $( "#nbJours" ).val( ( dateRetour - dateDepart ) / ( 1000 * 60 * 60 * 24 ) );
        }
    });
 
});

**Danamel78** · 31/10/2014, 22h16

Bonsoir,

Merci beaucoup pour cette exemple, mais cela ne résout pas vraiment mon problème.
Le code que j'avais pour faire le calcul du nombre de jour fonctionnait également.

Mon premier code qui me permet d'afficher la date sous format français vendredi 31 novembre 2014 et de l'enregistrer dans la bdd mysql sous format ISO 2014-11-31
En fait ce que voudrais arriver à réaliser c'est d'intégrer dans ce code le calcul automatique du nombre de jour afin que les visiteurs ne risquent pas d'entrer une valeur erronée.

**Danamel78** · 05/11/2014, 23h19

Bonsoir,

Finalement en persévérant j'ai trouvé la solution tout seul.
Si cela peut servir voici le code qui me permet d'afficher les dates d'arrivée et de départ au format "DD dd MM yy" en français et de les enregistrer dans des inputs hidden au format ISO "yy-mm-dd" dans une base SQL.
Et de faire le calcul du nombre de jours entre les 2 dates :

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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Populate alternate field</title>
	<link rel="stylesheet" href="jquery-ui.css" />
	<link rel="stylesheet" href="jquery-ui.structure.css" />
	<link rel="stylesheet" href="jquery-ui.theme.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
<script>
$(function() {
 
   $.datepicker.regional['fr'] = {
      closeText: 'Fermer',
      prevText: '<Préc',
      nextText: 'Suiv>',
      currentText: 'Courant',
      monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin',
      'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
      monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jun',
      'Jul','Aoû','Sep','Oct','Nov','Déc'],
      dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
      dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
      dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'],
      weekHeader: 'Sm',
      isRTL: false,
      showMonthAfterYear: false,
      yearSuffix: ''};
   $.datepicker.setDefaults($.datepicker.regional['fr']);
 
$( "#DateStartFR" ).datepicker({
dateFormat: 'DD dd MM yy',
showOn: "button",
buttonImageOnly: true,
buttonImage: "calendar-green.gif",
minDate: +1,
changeMonth: true,
changeYear: true,
numberOfMonths: 2,
firstDay:1,
altField: "#DateStartISO",
altFormat: "yy-mm-dd"
});
$( "#DateEndFR" ).datepicker({
dateFormat: 'DD dd MM yy',
showOn: "button",
buttonImageOnly: true,
buttonImage: "calendar-green.gif",
minDate: +1,
changeMonth: true,
changeYear: true,
numberOfMonths: 2,
firstDay:1,
altField: "#DateEndISO",
altFormat: "yy-mm-dd"
});
// Calcul nombre de jours
function days() {
            var a = $("#DateStartFR").datepicker('getDate').getTime(),
                b = $("#DateEndFR").datepicker('getDate').getTime(),
                c = 24*60*60*1000,
                diffDays = Math.round(Math.abs((a - b)/(c)));
            $("#nbnuits").val(diffDays)
}
 
$(document).ready(function () {
        var selector = function (dateStr) {
            var d1 = $('#DateStartFR').datepicker('getDate');
            var d2 = $('#DateEndFR').datepicker('getDate');
            var diff = 0;
            if (d1 && d2) {
                diff = Math.floor((d2.getTime() - d1.getTime()) / 86400000); // ms per day
            }
            $('#nbnuits').val(diff);
        }
$('#DateStartFR').datepicker({
            onSelect: function(selectedDate) {
    var minDate = $(this).datepicker('getDate');
    if (minDate) {minDate.setDate(minDate.getDate() + 3);} //min days requires
    $('#DateEndFR').datepicker('option', 'minDate', minDate || 1); // Date + 1 or tomorrow by default
    days();
}});
$('#DateEndFR').datepicker({minDate: 1, onSelect: function(selectedDate) {
    var maxDate = $(this).datepicker('getDate');   
    if (maxDate) {maxDate.setDate(maxDate.getDate() - 1);}
    $('#DateStartFR').datepicker('option', 'maxDate', maxDate); // Date - 1   
    days();
}});
    $('#DateStartFR,#DateEndFR').change(selector)
        });
});
</script>
 
</head>
<body>
<p>Date d'arrivée : <input type="text" id="DateStartFR" style="width:200px"><br><br>
Champ caché : <input type="text" id="DateStartISO" size="30"></p>
<p>Date de départ : <input type="text" id="DateEndFR" style="width:200px"><br><br>
Champ caché : <input type="text" id="DateEndISO" size="30"></p>
<p>Nombre de nuits : <input type="text" id="nbnuits" size="30"></p>
</body>
</html>

Datepicker - lier 2 scripts dateFormat et calcul entre 2 dates [Plugin]

jQuery

Vue hybride

Discussions similaires

Partager

Partager