Datepicker , date de départ, date de retour

**Logic_613** · 29/11/2012, 13h35

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 :

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

**danielhagnoul** · 29/11/2012, 23h15

Bonsoir

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

**Logic_613** · 30/11/2012, 11h51

Merci beaucoup!!!!

**Logic_613** · 07/12/2012, 14h13

Rebonjour

j'essaie de mettre une sorte de dropbox

Code :

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

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

**danielhagnoul** · 07/12/2012, 23h01

Bonsoir

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

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

**Logic_613** · 20/12/2012, 11h11

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 :

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

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

Datepicker , date de départ, date de retour [UI]

jQuery

Vue hybride

Discussions similaires

Partager

Partager