datetimepicker date debut date fin [Résolu]

monlio · 24/11/2010, 18h10

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, 21h47

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, 12h17

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 · 02/12/2010, 23h46

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>

27/11/2010, 21h47	#2
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Bonsoir Je connais jQuery UI Datepicker, mais pas Datetimepicker. Pourriez-vous nous donner un lien vers ce widget s'il vous plaît ? __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

28/11/2010, 12h17	#3
monlio Invité de passage Inscription : janvier 2009 Messages : 10 Détails du profil Informations forums : Inscription : janvier 2009 Messages : 10 Points : 0 Points : 0	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
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email