datetimepicker date debut date fin

Version imprimable

Bonjour a tous
Je souhaite utiliser datetimepicker pour faire deux input de date (date_depart, date_fin) le deuxime dependant du premier.
Je galaer terrible
J'ai trouve des sources qui fonctionnent bien avec datepicker, mais j'ai besoin de l'heure, du coup j'utilise datetime picker et la la date d'arrivee ne depent plus de celle du depart.
Avez vous une idee pour que je trouve la solution ?
merci de votre aide.

Voici mes sources

Code:

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
 
 
<script type="text/javascript" src="librairies-js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="librairies-js/jquery-ui-1.8.6.custom.min.js"></script>
 
<script type="text/javascript" src="librairies-js/jquery.validate.js"></script>
<script type="text/javascript" src="librairies-js/cmxforms.js"></script>
<script type="text/javascript" src="librairies-js/jquery.metadata.js"></script>
<script type="text/javascript" src="librairies-js/jquery-ui-timepicker-addon.min.js"></script>
 
 
 
 
<script type="text/javascript">
$(function () {
$('#date_depart').datetimepicker({
    	 //beforeShow: customRange, appel de la fonction AVANT
		duration: '',
        showTime: true,
		time24h: true, 
        constrainInput: true,
		formatDate: 'dd-mm-yy',
		stepMinute: 5,
		timeText: 'horaire',
		hourText: 'heures',
		minuteText: 'minutes',
		hourGrid: 4,
		minuteGrid: 10,
		minDate: +1, maxDate: '+1Y +1M'  //mindate = ajourd'hui ET maxDate = dans un an + 1 mois
 
     });
            var checkInDate = $('#date_depart');
            var checkOutDate = $('#date_retour');
 
            checkInDate.datetimepicker({ onClose: clearEndDate });
            checkOutDate.datetimepicker({ beforeShow: setMinDateForEndDate });
 
            function setMinDateForEndDate() {
                var d = checkInDate.datetimepicker('getDate');
                if (d) return { minDate: d }
            }
 
            function clearEndDate(dateText, inst) {
                checkOutDate.val('');
            }
        });
 
 
</script>
</head>
<body>
 
    <form name="form1" method="post" action="jquery-datepicker-end-date-greater-than-start-date.aspx" id="form1">
<div>
 
        <input name="date_depart" type="text" id="date_depart" />
        <input name="date_retour" type="text" id="date_retour" />
    </form>
 
</body>
</html>

27/11/2010, 21h47
danielhagnoul

Bonsoir

Je connais jQuery UI Datepicker, mais pas Datetimepicker.
Pourriez-vous nous donner un lien vers ce widget s'il vous plaît ?
28/11/2010, 12h17
monlio

Datetimepicker

Bonjour
Merci de ta reponse
Voila ou j'ai trouve le fameux Datetimepicker.
http://trentrichardson.com/examples/timepicker/
N'arrivant pas a utiliser un popup avec la date et l'heure dans mon cas d'une date de fin dependant de la date de debut, j'envisage maintenant de faire un input avec la date et un avec l'heure. En utilisant cette meme widget.
A plus tard
Monlio

Bonsoir

Désolé pour le délai, mais j'ai eu beaucoup d'occupations urgentes ces derniers jours.

Cela n'a pas été simple, mais je pense y être arrivé avec le calendrier en français et la date au format "dd-mm-yy". Pour la date de fin, le minimum est bien fixé par rapport à la date de début, mais l'heure peut toujours être inférieure à celle du début.

Code:

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
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" type="text/css" href="../lib/jqueryui/css/humanity/jquery-ui-1.8.6.custom.css">	
	<style>
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
 
		/* css for timepicker */
		.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
		.ui-timepicker-div dl{ text-align: left; }
		.ui-timepicker-div dl dt{ height: 25px; }
		.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
		.ui-timepicker-div td { font-size: 90%; }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
 
<div>
	<input id="date_depart" name="date_depart" type="text" />
	<input id="date_retour" name="date_retour" type="text" />
</div> <!-- balise de fin absente dans le fichier original -->
 
	</div>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-ui-1.8.6.custom.min.js"></script>
	<script charset="utf-8" src="../lib/jquery-ui-timepicker-addon.js"></script>
	<script>
		$(function(){
 
/* French initialisation for the jQuery UI date picker plugin. */
/* Written by Keith Wood (kbwood{at}iinet.com.au) and Stéphane Nahmani (sholby@sholby.net). */
$.datepicker.regional['fr'] = {
	closeText: 'Fermer',
	prevText: '&#x3c;Préc',
	nextText: 'Suiv&#x3e;',
	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',
	dateFormat: 'dd-mm-yy',
	firstDay: 1,
	isRTL: false,
	showMonthAfterYear: false,
	yearSuffix: ''
};
 
$.datepicker.setDefaults($.datepicker.regional['fr']);
 
var checkInDate = $('#date_depart'),
	checkOutDate = $('#date_retour');
 
checkOutDate.datetimepicker({
	"duration": "",
	"showTime": true,
	"time24h": true, 
	"constrainInput": true,
	"stepMinute": 5,
	"timeText": "horaire",
	"hourText": "heures",
	"minuteText": "minutes",
	"hourGrid": 4,
	"minuteGrid": 10
});
 
checkInDate.datetimepicker({
	"duration": "",
	"showTime": true,
	"time24h": true, 
	"constrainInput": true,
	"stepMinute": 5,
	"timeText": "horaire",
	"hourText": "heures",
	"minuteText": "minutes",
	"hourGrid": 4,
	"minuteGrid": 10,
	"minDate": +1, // "mindate" = ajourd'hui ET "maxDate" = dans un an + 1 mois
	"maxDate": '+1Y +1M',
	"onClose": function(dateText, inst){
		var tabDateTime = dateText.split(" "),
			tabDate = tabDateTime[0].split("-"),
			tabTime = tabDateTime[1].split(":"),
			year = tabDate[2],
			month = parseInt(tabDate[1], 10) - 1,
			day = parseInt(tabDate[0], 10),
			h = parseInt(tabTime[0], 10),
			m = parseInt(tabTime[1], 10),
			s = 0,
			date = new Date(year, month, day, h, m, s);
 
		//console.log(dateText);
		//console.log(year, day, month, h, m, s);
 
		checkOutDate.datetimepicker("setDate", date);
		checkOutDate.datetimepicker("option", "minDate", date);
 
		//console.log(checkOutDate.datetimepicker("getDate"));
	}
});
 
		});
	</script>
</body>  
</html>