datetimepicker date debut date fin

**monlio** · 24/11/2010, 19h10

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 :

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

**danielhagnoul** · 27/11/2010, 22h47

Bonsoir

Je connais jQuery UI Datepicker, mais pas Datetimepicker.
Pourriez-vous nous donner un lien vers ce widget s'il vous plaît ?

**monlio** · 28/11/2010, 13h17

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

**danielhagnoul** · 03/12/2010, 00h46

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 :

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

datetimepicker date debut date fin

jQuery

Discussions similaires

Partager

Partager