Utilisation du calendrier "dynarch"

**franculo_caoulene** · 05/02/2008, 11h12

Salut,

J'utilise un calendrier tout fait en javascript récupéré de http://www.dynarch.com/projects/calendar/. Il fonctionne plutôt bien d'ailleurs.
Mais, j'essaie de l'utiliser afin de délimiter une recherche avec une date de début et une date de fin. Le but étant de rendre des dates d'un caldendrier non-cliquable selon la date précédemment choisie dans l'autre calendrier. Malheureusement, mon script bug curieusement.

Lorsque je sélectionne une date de début, la calendrier de date de fin n'est pas cliquable. Pourtant les dates sont correctement mises en forme. Si je change de mois ou d'année les dates redeviennent cliquables quand il le faut. Seul le mois en cours bug.
Par contre, si je saisie la date de fin d'abord, tout fonctionne correctement!
Voici le code exemple :

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
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
	<title>test html</title>
	<style type="text/css">
		img {cursor: pointer; background-color:#ffffff; border: 1px solid red;}
		img:hover {cursor: pointer; background-color:#ff0000; border: 1px solid red;}
 	</style>
	<link rel="stylesheet" type="text/css" media="all" href="calendar/aqua/theme.css" title="Aqua" />
	<script type="text/javascript" src="calendar/js/calendar.js"></script><!-- main calendar program -->
	<script type="text/javascript" src="calendar/lang/calendar-fr.js"></script><!-- language for the calendar -->
	<script type="text/javascript" src="calendar/js/calendar-setup.js"></script><!-- the following script defines the Calendar.setup helper function, which makes adding a calendar a matter of 1 or 2 lines of code. -->
</head>
<body>
	<div>
	<input id="iDateDebut" type="text" name="DateDebut" />
	<img src="calendar/img/calendar.gif" id="trigger_d" alt="Choisir la date de début" />
	</div>
	<div>
	<input id="iDateFin" type="text" name="DateFin" />
	<img src="calendar/img/calendar.gif" id="trigger_f" alt="Choisir la date de fin" />
	</div>
	<script type="text/javascript">
	var dateDebut = Calendar.setup({
				inputField		: "iDateDebut",	// id of the input field
				ifFormat		: "%d/%m/%Y",	// format of the input field
				button			: "trigger_d",	// trigger for the calendar (button ID)
				singleClick		: true,
				dateStatusFunc	: function(dDeb) {
									if (document.getElementById("iDateFin").value.length==10) {
										var dateFin	= document.getElementById("iDateFin").value.split("/");
										var oDateFin = new Date();
										oDateFin.setDate(dateFin[0]);
										oDateFin.setMonth(dateFin[1]-1);
										oDateFin.setFullYear(dateFin[2]);
										if (dDeb>=oDateFin)
											return true;
										else
											return false;
									}
								}
			});
			var dateFin = Calendar.setup({
				inputField		: "iDateFin",	// id of the input field
				ifFormat		: "%d/%m/%Y",	// format of the input field
				button			: "trigger_f",	// trigger for the calendar (button ID)
				singleClick		: true,
				dateStatusFunc	: function(dFin) {
									if (document.getElementById("iDateDebut").value.length==10) {
										var dateDeb	= document.getElementById("iDateDebut").value.split("/");
										var oDateDeb = new Date();
										oDateDeb.setDate(dateDeb[0]);
										oDateDeb.setMonth(dateDeb[1]-1);
										oDateDeb.setFullYear(dateDeb[2]);
										//alert(dFin +" <= "+ oDateDeb);
										if (dFin<=oDateDeb)
											return true;
										else
											return false;
									}
								}
			});
	</script>
</body>
</html>

Et le nécessaire pour tout faire fonctionner se trouve en pièce jointe.

Voyez-vous d'où cela vient?

Merci par avance pour votre aide et votre lecture.

**franculo_caoulene** · 05/02/2008, 11h30

Pourquoi je trouve souvent la réponse tout de suite après avoir posté?! J'ai juste rajouté un paramètre cache à true.

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
	var dateFin = Calendar.setup({
				inputField		: "iDateFin",	// id of the input field
				ifFormat		: "%d/%m/%Y",	// format of the input field
				button			: "trigger_f",	// trigger for the calendar (button ID)
				singleClick		: true,
				cache			: true,
				dateStatusFunc	: function(dFin) {
									if (document.getElementById("iDateDebut").value.length==10) {
										var dateDeb	= document.getElementById("iDateDebut").value.split("/");
										var oDateDeb = new Date();
										oDateDeb.setDate(dateDeb[0]);
										oDateDeb.setMonth(dateDeb[1]-1);
										oDateDeb.setFullYear(dateDeb[2]);
										if (dFin<=oDateDeb) {
											//alert(dFin +" <= "+ oDateDeb);
											return true;
										}
										else
											return false;
									}
								}
			});

Utilisation du calendrier "dynarch"

JavaScript

Partager

Partager