Datepicker , date de départ, date de retour

Version imprimable

Bonjour

je suis débutant.

j'aimerais avoir 2 champs de calendrier.

le 1er champs est la date de départ.
le second champ est la date de retour qui est "date de départ + 7 jours) (une semaine)

(mon programme a 2 possibilité: 1: 1 semaine
2: weekend) (mais cela c'est pour plus tard)

donc j'aimerais pouvoir afficher sur mon 2em champ ("from") la date de retour. (je ne sait vraiment pas comment faire..)

voici mon code

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
 
 
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="contextPath" value="${pageContext.servletContext.contextPath}"/>
<!DOCTYPE html>
<html>
    <head>
 
        <title>JSP Page</title>       
 
        <script type="text/javascript" src="${contextPath}/scripts/jquery-1.8.3.js"></script>
        <script type="text/javascript" src="${contextPath}/scripts/jquery-ui-1.9.2.custom.min.js"></script>
 
        <link rel="stylesheet" href="${contextPath}/scripts/css/smoothness/jquery-ui-1.9.2.custom.min.css"/>
 
        <script>   
 
            $(document).ready(function(){   
 
                $("#to").datepicker({
                    showOn: "button", 
                       buttonImage: "${contextPath}/scripts/css/smoothness/images/calendar.gif",            
                    buttonImageOnly: true ,  
                    dateFormat: 'dd-mm-yy',
                    minDate : 0,
                    maxDate : '+1y',
 
                    beforeShowDay: function(date) { 
                        return [(date.getDay() == 1  )];
                        } ,
 
                    onClose: function(){
                        alert($(this).datepicker("getDate"));
                    }
                }); 
 
            })
 
        </script>
    </head>
    <body>
 
        <h1>RESERVATION</h1>
 
        <p>to</p>
        <div>
            <input type="text"  id="to"  />
        </div>
        <p>from</p>
        <div>
            <input type="text" id="from"   />
        </div>
 
    </body>
</html>

Merci

Bonsoir

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
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/overcast/jquery-ui.css">
	<style>
		/* TEST */
		form { width: 30rem; }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<h2>Titre 2</h2>
	<section class="conteneur">
 
<form>
	<fieldset>
		<label>Date de départ : </label><input type="text" id="dateDepart" />
		<br/>
		<span>Date de retour : </span><span id="dateRetour"></span>
	</fieldset>
</form>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2012-11-29T22:59:44.883+01:00" pubdate>2012-11-29T22:59:44.883+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/i18n/jquery-ui-i18n.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
	<script>	
		"use strict";
 
		$(function(){
 
			$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
 
            $( "#dateDepart" ).datepicker({
                showOn: "button", 
                buttonImage: "http://danielhagnoul.developpez.com/images/calendar.gif",            
                buttonImageOnly: true,
                minDate : "-0d", // pas dans le passé
                maxDate : "+1y", // dans un an maximum
                beforeShowDay: function( date ){
                	/*
                	 * Départ, toujours un lundi !
                	 */
                    return [ ( date.getDay() == 1 ) ];
                } ,
                onClose: function(  dateStr, ObjPicker ){
                	/*
                	 * Date de retour = date de départ + 7 jours !
                	 */
                    $( "#dateRetour" ).text( 
                    	new Date( 
                    		dateStr.slice( 6 ), // yyyy
                    		parseInt( dateStr.slice( 3, 5 ), 10 ) - 1, // mm - 1
                    		parseInt( dateStr.slice( 0, 2 ), 10 ) + 7  // dd + 7
                    	).toLocaleDateString()
                    );
                }
            });
 
    	});
	</script>
</body>  
</html>

30/11/2012, 11h51
Logic_613

Merci beaucoup!!!!:ccool::ccool:

Rebonjour

j'essaie de mettre une sorte de dropbox
Code:

1 2 3 4 5 6 7 8 <label>durée</label> <select id="durée" > <option value="weekend">weekend</option> <option value="midweek">midweek</option> <option value="semaine">semaine</option> </select>
lorsqu'on visite cet page, il est mis sur "weekend", donc le calendrier doit montrer que le jours vendredi (arrivé), lundi (départ)

lorque après, je veux mettre semaine il me montre que les jours départ(lundi), retour (vendredi) (je donne des examples)

si on part du code que "danielhagnoul" a écrit.

parce que je ne connais pas bien le javascript, je ne sait pas bien comment faire.

j'ai mis une "alert($('#durée :selected').text());

et il me montre dans le début du chargement la durée standard (weekend), mais si je choisi une autre periode, il dois me montrer l'autre periode en donc aussi les date possibles (datepicker) , et cela ne fonctionne pas chez moi.

Est-ce qu'il y a quelqu'un qui pourrait m'aider?

Merci!!

Bonsoir

Nouvel exemple, on peut choisir la durée du séjour. Départ toujours un lundi.

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
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/overcast/jquery-ui.css">
	<style>
		/* TEST */
		form { width: 30rem; }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<h2>Titre 2</h2>
	<section class="conteneur">
 
<form>
	<fieldset>
		<label>Durée du séjour (départ, toujours un lundi) : </label>
        <select id="nbJour" >
            <option value="7" selected="selected">7 jours</option>
            <option value="10">10 jours</option>
            <option value="14">14 jours</option>
        </select>
	</fieldset>
	<fieldset>
		<label>Date de départ (toujours un lundi) : </label><input type="text" id="dateDepart" />
		<br/>
		<span>Date de retour : </span><span id="dateRetour"></span>
	</fieldset>
</form>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2012-11-29T22:59:44.883+01:00" pubdate>2012-11-29T22:59:44.883+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/i18n/jquery-ui-i18n.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
	<script>	
		"use strict";
 
		$(function(){
 
			$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
 
            $( "#dateDepart" ).datepicker({
                showOn: "button", 
                buttonImage: "http://danielhagnoul.developpez.com/images/calendar.gif",            
                buttonImageOnly: true,
                minDate : "-0d", // pas dans le passé
                maxDate : "+1y", // dans un an maximum
                beforeShowDay: function( date ){
                	/*
                	 * Départ, toujours un lundi !
                	 */
                    return [ ( date.getDay() == 1 ) ];
                } ,
                onClose: function(  dateStr, ObjPicker ){
                	/*
                	 * Date de retour = date de départ + durée du séjour (7 jours par défaut) !
                	 * 
                	 * Impossible d'utiliser toLocaleDateString ou autre, Chrome donne la date en anglais !
                	 */
                	var jours = [ "Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi" ],
                		dateRetour = new Date( 
	                		dateStr.slice( 6 ), // yyyy
	                		parseInt( dateStr.slice( 3, 5 ), 10 ) - 1, // mm - 1
	                		parseInt( dateStr.slice( 0, 2 ), 10 ) + parseInt( $( "#nbJour" ).val(), 10)  // dd + durée du séjour
	                	);
 
                    $( "#dateRetour" ).text( 
                    	jours[ dateRetour.getDay() ] + ", " + 
                    	dateRetour.getDate() + "/" + 
                    	( dateRetour.getMonth() + 1 ) + "/" + dateRetour.getFullYear()
                    );
                }
            });
 
    	});
	</script>
</body>  
</html>

20/12/2012, 11h11
Logic_613
Rebonjour

(et merci pour vos codes)

est ce que c'est possible de diminuer la grandeur du calendrier?

j'ai mis ce code apart dans une page JSP.
est ce possible, au lieu de copier tout le code (pour le mettre dans un autre page jsp) , de le faire par "import" ou "include". (j'ai essayé avec include) mais il n'a pas pris tout le code (je pense qu'il n'a pas repris les codes de javascript.)

Merci

edit: j'ai trouvé:
Code:

1 2 3 4 5 6 7 8 <style type="text/css"> .ui-datepicker { font-family:Garamond; font-size: 11px; margin-left:10px } </style>
20/12/2012, 15h44
Logic_613

Bonjour

j'ai mis le code de datepicker (voir code de danielhagnoul (encore un grand merci!) dans une page JSP, pas de problème.

au lieu de mettre ce code dans la page JSP de reservation, j'ai fait un import du page jsp du code de datepicker

Code:

<c:import url="/WEB-INF/JSP/parcs/testDates.jsp"/>

mais la je ne comprends pas pourquoi le calendrier me donnent des erreurs d'affichage (voir lien) tandis que si je vais sur le jsp de testDates, tout est parfait.. ou est ce que <import> n'accepte pas certain fichiers de javascripts?
http://i46.tinypic.com/11hwb48.png

encore une autre question, si je ne choisi pas de date, le texte "undefined, NaN/NaN/NaN" apparaît, comment supprimer ceci
21/12/2012, 09h38
Logic_613

l'erreur se trouve dans mon code CSS qui se trouve dans la page JSP ou la date dois apparaître..