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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Réservation</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" media="screen" type="text/css" title="Essaireservation" href="essaireservation.css" />
<script type='text/javascript'>
function show_calendar(str_target, str_datetime) {
var arr_months = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
var week_days = ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"];
var n_weekstart = 1; // day week starts from (normally 0 or 1)
// Si la date est invalide : Initialisation avec la date du jour
var test_date = /^(\d+)\/(\d+)\/(\d+)$/;
if (!test_date.exec(str_datetime)) { var d = new Date();
var str_datetime = d.getDate()+ "/" +(d.getMonth() + 1) + "/"+ d.getFullYear();
}
var dt_datetime = (str_datetime == null || str_datetime =="" ? new Date() : str2dt(str_datetime));
/* JOUR MOIS ET ANNEE PRESENTE*/
var this_Day = new Date().getDate()
var this_Month = new Date().getMonth()
var this_Year = new Date().getFullYear()
/* MOIS PRECEDENT */
var dt_prev_month = new Date(dt_datetime);
dt_prev_month.setMonth(dt_datetime.getMonth()-1);
var dt_next_month = new Date(dt_datetime);
dt_next_month.setMonth(dt_datetime.getMonth()+1);
/* ANNEE PRECEDENTE */
var dt_prev_year = new Date(dt_datetime);
dt_prev_year.setFullYear(dt_datetime.getFullYear()-1);
var dt_next_year = new Date(dt_datetime);
dt_next_year.setFullYear(dt_datetime.getFullYear()+1);
/* PREMIER JOUR DU MOIS */
var dt_firstday = new Date(dt_datetime);
dt_firstday.setDate(1);
dt_firstday.setDate(1-(7+dt_firstday.getDay()-n_weekstart)%7);
/* DERNIER JOUR DU MOIS */
var dt_lastday = new Date(dt_next_month);
dt_lastday.setDate(0);
/* TITRE DU CALENDRIER */
var title_calendar=(str_target=='dd')?'DATE D\'ARRIVEE':'DATE DE DEPART';
// html generation (feel free to tune it for your particular application)
// ENTETE CALENDRIER
var StringYear=dt_datetime.getFullYear().toString().substring(dt_datetime.getFullYear().toString().length-2,dt_datetime.getFullYear().toString().length)
var str_buffer = new String (
"<table class=\"clsOTable\" cellspacing=\"0\" border=\"0\" width=\"100%\">\n"+
"<tr>\n<td bgcolor=\"#4682B4\">"+
"<table cellspacing=\"1\" cellpadding=\"3\" border=\"0\" width=\"100%\">\n"+
//ENTETE TABLEAU
"<tr>\n <td bgcolor=\"blue\" style='text-align:center;color:white;font-family:verdana;font-weight:bold;font-size:11px;' colspan=\"6\">"+title_calendar+"<\/td>\n"+
"<td bgcolor=\"blue\" style=\"text-align:center;color:navy;font-family:verdana;font-weight:bold;font-size:10px;background-color:silver;border:outset 2px white;cursor:pointer;\" onclick=\"document.getElementById('DivCalendar').style.display='none';\">X<\/td>\n "+
"<\/tr>\n"+
// Ligne Année précédente / suivante
"<tr>\n <td bgcolor=\"blue\"><a href=\"javascript:show_calendar('"+str_target+"', '"+
dt2dtstr(dt_prev_year)+"');\">"+
"<img src=\"Images/prev.ico\" width=\"16\" height=\"16\" border=\"0\""+
" alt=\"Année précédente\"></a></td>\n"+
" <td align=\"center\" bgcolor=\"blue\" colspan=\"5\">"+
"<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"
+" 20"+StringYear+"</font></td>\n"+
" <td bgcolor=\"blue\" align=\"right\"><a href=\"javascript:show_calendar('"
+str_target+"', '"+dt2dtstr(dt_next_year)+"');\">"+
"<img src=\"Images/next.ico\" width=\"16\" height=\"16\" border=\"0\""+
" alt=\"Année suivante\"></a></td>\n</tr>\n"+
// Ligne Mois précédent / suivant
"<tr>\n <td bgcolor=\"#4682B4\"><a href=\"javascript:show_calendar('"+
str_target+"', '"+ dt2dtstr(dt_prev_month)+"'); \">"+
"<img src=\"Images/prev.ico\" width=\"16\" height=\"16\" border=\"0\""+
" alt=\"MP\" title=\""+dt_prev_month+"\"></a></td>\n"+
" <td align=\"center\" bgcolor=\"#4682B4\" colspan=\"5\">"+
"<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"
+arr_months[dt_datetime.getMonth()]+" 20"+StringYear+"</font></td>\n"+
" <td bgcolor=\"#4682B4\" align=\"right\"><a href=\"javascript:show_calendar('"
+str_target+"', '"+dt2dtstr(dt_next_month)+"'); \">"+
"<img src=\"Images/next.ico\" width=\"16\" height=\"16\" border=\"0\""+
" alt=\"MS\" title=\""+dt_next_month+"\" ></a></td>\n</tr>\n"
); //end newstring
var dt_current_day = new Date(dt_firstday);
// print weekdays titles
str_buffer += "<tr>\n";
for (var n=0; n<7; n++)
str_buffer += " <td bgcolor=\"#87CEFA\">"+
"<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"+
week_days[(n_weekstart+n)%7]+"</font></td>\n";
// print calendar table
str_buffer += "</tr>\n";
while (dt_current_day.getMonth() == dt_datetime.getMonth() ||
dt_current_day.getMonth() == dt_firstday.getMonth()) {
// print row header
str_buffer += "<tr>\n";
for (var n_current_wday=0; n_current_wday<7; n_current_wday++) {
if (dt_current_day.getDate() == this_Day && dt_current_day.getMonth() == this_Month && dt_current_day.getFullYear()==this_Year ){
// case aujourd'hui
str_buffer += " <td bgcolor=\"#FFB6C1\" align=\"right\">";}
else {
if (dt_current_day.getDay() == 0 || dt_current_day.getDay() == 6){
// case de weekend
str_buffer += " <td bgcolor=\"#DBEAF5\" align=\"right\">";
}
else{
// jour ouvres du mois
str_buffer += " <td bgcolor=\"white\" align=\"right\">";
}
}
if( dt_current_day.getMonth() == this_Month && dt_current_day.getFullYear() == this_Year ){
// mois en cours et jours précédents grisés
if ((dt_current_day.getDate() >= dt_datetime.getDate()) && (dt_current_day.getMonth() == dt_datetime.getMonth())){
// jours du mois en cours actifs
str_buffer += "<a style=\"cursor:pointer;\" onclick=\"document.getElementById('"+str_target+"').value='"+dt2dtstr(dt_current_day)+"'; document.getElementById('DivCalendar').style.display='none'; \">"+
"<font color=\"black\" face=\"tahoma, verdana\" size=\"2\">";}
else {
// jours des mois précédents et suivants en gris
str_buffer += "<font color=\"gray\" face=\"tahoma, verdana\" size=\"2\">";}
}
else {
if( (dt_current_day.getMonth() > this_Month && dt_current_day.getFullYear() ==this_Year ) || dt_current_day.getFullYear() >this_Year ){
// mois futurs
if ( dt_current_day.getMonth() == dt_datetime.getMonth()){
// jours du mois en cours actifs
str_buffer += "<a style='cursor:pointer;' onclick=\"document.getElementById('"+str_target+"').value='"+dt2dtstr(dt_current_day)+"'; document.getElementById('DivCalendar').style.display='none';\">"+
"<font color=\"black\" face=\"tahoma, verdana\" size=\"2\">";}
else {
// jours des mois précédents et suivants en gris
str_buffer += "<font color=\"gray\" face=\"tahoma, verdana\" size=\"2\">";}
}
// mois précédents ...
else{ if( (dt_current_day.getMonth() < this_Month && dt_current_day.getFullYear() == this_Year) || ( dt_current_day.getFullYear() < this_Year)){
str_buffer += "<a><font color=\"gray\" face=\"tahoma, verdana\" size=\"2\">";
}
}
}
str_buffer += dt_current_day.getDate()+"</font></a></td>\n";
dt_current_day.setDate(dt_current_day.getDate()+1);
}
// print row footer
str_buffer += "</tr>\n";
}
// print calendar footer
str_buffer += "</tr>\n</td>\n</table>\n" ;
fenCalendrier=document.getElementById('DivCalendar');
fenCalendrier.innerHTML=str_buffer;
fenCalendrier.style.top=document.getElementById(str_target).offsetTop+"px";
fenCalendrier.style.left=Number(document.getElementById(str_target).offsetLeft)+Number(document.getElementById(str_target).offsetWidth)+200+"px";
fenCalendrier.style.display="block"
}
// datetime parsing and formatting routines. modify them if you wish other datetime format
function str2dt (str_datetime) {
var re_date = /^(\d+)\/(\d+)\/(\d+)$/;
if (!re_date.exec(str_datetime))
return alert("Invalid Datetime format: "+ str_datetime);
return (new Date (RegExp.$3, RegExp.$2-1, RegExp.$1, RegExp.$4, RegExp.$5, RegExp.$6));
}
/***********************************
* Formatage de date pour affichage *
***********************************/
function dt2dtstr (dt_datetime) {
var FormatedDate=""
FormatedDate+=(dt_datetime.getDate().toString().length==1)?"0"+dt_datetime.getDate().toString():dt_datetime.getDate().toString();
FormatedDate+="/";
FormatedDate+=((dt_datetime.getMonth()+1).toString().length==1)?"0"+(dt_datetime.getMonth()+1).toString():(dt_datetime.getMonth()+1).toString();
FormatedDate+="/";
FormatedDate+="20"+dt_datetime.getFullYear().toString().substring(dt_datetime.getFullYear().toString().length-2,dt_datetime.getFullYear()).toString()
return FormatedDate;
}
function dt2tmstr (dt_datetime) {
return (new String (dt_datetime.getHours()+":"+dt_datetime.getMinutes()+":"+dt_datetime.getSeconds()));
}
/*************************
* comparaison des dates *
*************************/
function comparedate(){
var maintenant=new Date()
maintenant=dt2dtstr(maintenant).split('\/').reverse().join('')
if(document.getElementById('da').value.length<1){
alert("Entrez une date d\'arrivee");
return false;
}
var date_arrivee=document.getElementById('da').value.split('\/').reverse().join('');
if(date_arrivee<maintenant){
alert('vous ne pourrez pas arriver avant aujourd\'hui');
return false;
}
if(document.getElementById('da').value.length<1){
alert("Entrez une date de départ");
return false;
}
var date_depart=document.getElementById('dd').value.split('\/').reverse().join('');
if(date_arrivee>date_depart){
alert("Vous devez arriver avant de repartir!");
return false;
}
else {
return true;}
}
('votre nom')
</script>
</head>
<body>
<div id="DivCalendar" style=" width:200px;height:235px; z-index:200; display:none;position:absolute; Top:1px;left:1px;"></div>
<input type='text' name='arrivee' id='arrivee' onclick="show_calendar('arrivee',10)" onfocus="show_calendar('arrivee',10)" style='text-align:right'readonly /><br />
<input type='text' name='depart' id='depart' onclick="show_calendar('depart',10)" onfocus="show_calendar('depart',10)" style='text-align:right'readonly /><br />
</body>
</html> |
calendrier javascript avec dates passées grisées
Répondre avec citation
Partager