Sélection d'une date dans un calendrier

**navis84** · 15/03/2006, 10h55

Bonjour,

j'ai créé un formulaire avec une zone de texte et une image (désignant un calendrier).
Lorsque l'utilisateur clique sur l'image, une nouvelle fenêtre apparait avec un calendrier. L'utilisateur choisit sa date, le calendrier se ferme, et la date est placée dans la zone de texte.

Or, le format de la date renvoyée est 02-03-2006, et je voudrais remplacer les tirets par des slashs. J'ai essayé dans la fonction set_datetime ci dessous, sans succès.

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
function set_datetime(n_datetime, b_close) {
if (!obj_caller) return;
var dt_datetime = obj_caller.prs_time(
(document.cal ? document.cal.time.value : ''),
new Date(n_datetime)
);
if (!dt_datetime) return;
if (b_close) {
window.close();
obj_caller.target.value = (document.cal
? obj_caller.gen_tsmp(dt_datetime)
: obj_caller.gen_date(dt_datetime)
);
}
else {
obj_caller.popup(dt_datetime.valueOf());
}
}

Auriez-vous une idée ?
Merci d'avance pour votre aide.

**javatwister** · 15/03/2006, 11h04

à quel endroit de cette fonction demandes-tu la conversion en slashes?

**navis84** · 15/03/2006, 11h11

Au moment où le script affecte la date à la zone de texte.

**navis84** · 17/03/2006, 10h35

Quelqu'un aurait-il déjà utilisé cette fonctionnalité et remarqué à quel moment les tirets sont dans la date ?

**AurelBUD** · 17/03/2006, 10h57

Moi j'utilise le calendrier de phpmyadmin.
Et j'ai modifier le code pour avoir la date au format francais.

Le code HTML :

Code :

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

1
2
3
4
5
6
 
<td>
  <input value="2006-03-17" name="date" id="date" type="hidden">
  <input name="affi_date" id="affi_date" size="10" maxlength="10"  readonly="readonly" type="text">
  &nbsp;<img src="../img/b_calendar.png" alt="Calendrier" onclick="javascript:openCalendar('', 'formulaire', 'date', 'date')" style="cursor: pointer;" align="absmiddle">
</td>

J'ai donc 2 champs : un champ caché ou je stocke ma date en anglais et un champ visible ou j'affiche la date en francais.

La fonction opencalendar :

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
 
/*--------------- Fonction openCalendar ---------------
		Fonction permettant d'afficher le calendrier
		et de choisir la date pour la galerie photo
	-------------------------------------------------------*/
	function openCalendar(params, form, field, type)
	{
		//On affiche le claendrier
		window.open("./calendar/calendar.php?" + params, "calendar", "width=600,height=250,modal");
		//On definit le champs du formulaire a remplir
		dateField_en = document.getElementById('date');
		dateField_fr = document.getElementById('affi_date');
		//On definit le type de date (date ou datetime ou timestamp)
		dateType = 'date';
	}
	/*-----------------------------------------------------*/

Le code de calendar.php

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<title>Calendrier</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="./calendar.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/javascript">
<!--
    /* added 2004-06-10 by Michael Keck
     *       we need this for Backwards-Compatibility and resolving problems
     *       with non DOM browsers, which may have problems with css 2 (like NC 4)
    */
    var isDOM      = (typeof(document.getElementsByTagName) != 'undefined'
                      && typeof(document.createElement) != 'undefined')
                   ? 1 : 0;
    var isIE4      = (typeof(document.all) != 'undefined'
                      && parseInt(navigator.appVersion) >= 4)
                   ? 1 : 0;
    var isNS4      = (typeof(document.layers) != 'undefined')
                   ? 1 : 0;
    var capable    = (isDOM || isIE4 || isNS4)
                   ? 1 : 0;
    // Uggly fix for Opera and Konqueror 2.2 that are half DOM compliant
    if (capable) {
        if (typeof(window.opera) != 'undefined') {
            var browserName = ' ' + navigator.userAgent.toLowerCase();
            if ((browserName.indexOf('konqueror 7') == 0)) {
                capable = 0;
            }
        } else if (typeof(navigator.userAgent) != 'undefined') {
            var browserName = ' ' + navigator.userAgent.toLowerCase();
            if ((browserName.indexOf('konqueror') > 0) && (browserName.indexOf('konqueror/3') == 0)) {
                capable = 0;
            }
        } // end if... else if...
    } // end if
//-->
</script>
<script type="text/javascript" src="./calendar.js"></script>
<script type="text/javascript">
<!--
var month_names = new Array("Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");
var day_names = new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");
//-->
</script>
</head>
<body onload="initCalendar();">
<div id="calendar_data"></div>
</body>
</html>

C'est donc le fichier calendar.js qui va generer le calendrier dans la balise div.

Puis le fichier calendar.js :

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
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
 
var day;
var month;
var year;
var hour;
var minute;
var second;
var clock_set = 0;
 
/**
 * Initializes calendar window.
 */
function initCalendar() {
    if (!year && !month && !day) {
        /* Called for first time */
        if (window.opener.dateField_en.value) {
            value = window.opener.dateField_en.value;
            if (window.opener.dateType == 'datetime' || window.opener.dateType == 'date') {
                if (window.opener.dateType == 'datetime') {
                    parts   = value.split(' ');
                    value   = parts[0];
 
                    if (parts[1]) {
                        time    = parts[1].split(':');
                        hour    = parseInt(time[0],10);
                        minute  = parseInt(time[1],10);
                        second  = parseInt(time[2],10);
                    }
                }
                date        = value.split("-");
                day         = parseInt(date[2],10);
                month       = parseInt(date[1],10) - 1;
                year        = parseInt(date[0],10);
            } else {
                year        = parseInt(value.substr(0,4),10);
                month       = parseInt(value.substr(4,2),10) - 1;
                day         = parseInt(value.substr(6,2),10);
                hour        = parseInt(value.substr(8,2),10);
                minute      = parseInt(value.substr(10,2),10);
                second      = parseInt(value.substr(12,2),10);
            }
        }
        if (isNaN(year) || isNaN(month) || isNaN(day) || day == 0) {
            dt      = new Date();
            year    = dt.getFullYear();
            month   = dt.getMonth();
            day     = dt.getDate();
        }
        if (isNaN(hour) || isNaN(minute) || isNaN(second)) {
            dt      = new Date();
            hour    = dt.getHours();
            minute  = dt.getMinutes();
            second  = dt.getSeconds();
        }
    } else {
        /* Moving in calendar */
        if (month > 11) {
            month = 0;
            year++;
        }
        if (month < 0) {
            month = 11;
            year--;
        }
    }
 
    if (document.getElementById) {
        cnt = document.getElementById("calendar_data");
    } else if (document.all) {
        cnt = document.all["calendar_data"];
    }
 
    cnt.innerHTML = "";
 
    str = "";
 
    //heading table
    str += '<table class="calendar"><tr><th width="50%">';
    str += '<a href="javascript:month--; initCalendar();">&laquo;</a>&nbsp;&nbsp;';
    str += '<select id="select_month" name="monthsel" onchange="month = parseInt(document.getElementById(\'select_month\').value); initCalendar();">';
    for (i =0; i < 12; i++) {
        if (i == month) selected = ' selected="selected"';
        else selected = '';
        str += '<option value="' + i + '" ' + selected + '>' + month_names[i] + '</option>';
    }
    str += '</select>';
    str += '&nbsp;&nbsp;<a href="javascript:month++; initCalendar();">&raquo;</a>';
    str += '</th><th width="50%">';
    str += '<a href="javascript:year--; initCalendar();">&laquo;</a>&nbsp;&nbsp;';
    str += '<select id="select_year" name="yearsel" onchange="year = parseInt(document.getElementById(\'select_year\').value); initCalendar();">';
    for (i = year - 25; i < year + 25; i++) {
        if (i == year) selected = ' selected="selected"';
        else selected = '';
        str += '<option value="' + i + '" ' + selected + '>' + i + '</option>';
    }
    str += '</select>';
    str += '&nbsp;&nbsp;<a href="javascript:year++; initCalendar();">&raquo;</a>';
    str += '</th></tr></table>';
 
    str += '<table class="calendar"><tr>';
    for (i = 0; i < 7; i++) {
        str += "<th>" + day_names[i] + "</th>";
    }
    str += "</tr>";
 
    var firstDay = new Date(year, month, 1).getDay();
    var lastDay = new Date(year, month + 1, 0).getDate();
 
    str += "<tr>";
 
    dayInWeek = 0;
    for (i = 0; i < firstDay; i++) {
        str += "<td>&nbsp;</td>";
        dayInWeek++;
    }
    for (i = 1; i <= lastDay; i++) {
        if (dayInWeek == 7) {
            str += "</tr><tr>";
            dayInWeek = 0;
        }
 
        dispmonth = 1 + month;
 
        if (window.opener.dateType == 'datetime' || window.opener.dateType == 'date') {
            actVal_en = formatNum4(year) + "-" + formatNum2(dispmonth, 'month') + "-" + formatNum2(i, 'day');
			actVal_fr = formatNum2(i, 'day') + "/" + formatNum2(dispmonth, 'month') + "/" + formatNum4(year);
        } else {
            actVal_en = "" + formatNum4(year) + formatNum2(dispmonth, 'month') + formatNum2(i, 'day');
			actVal_fr = "" + formatNum4(year) + formatNum2(dispmonth, 'month') + formatNum2(i, 'day');
        }
        if (i == day) {
            style = ' class="selected"';
        } else {
            style = '';
        }
        str += "<td" + style + "><a href=\"javascript:returnDate('" + actVal_en + "','" + actVal_fr + "');\">" + i + "</a></td>"
        dayInWeek++;
    }
    for (i = dayInWeek; i < 7; i++) {
        str += "<td>&nbsp;</td>";
    }
 
    str += "</tr></table>";
 
    cnt.innerHTML = str;
 
    // Should we handle time also?
    if (window.opener.dateType != 'date' && !clock_set) {
 
        if (document.getElementById) {
            cnt = document.getElementById("clock_data");
        } else if (document.all) {
            cnt = document.all["clock_data"];
        }
 
        str = '';
        str += '<form class="clock">';
        str += '<input id="hour"    type="text" size="2" maxlength="2" onblur="this.value=formatNum2(this.value, \'hour\')" value="' + formatNum2(hour, 'hour') + '" />:';
        str += '<input id="minute"  type="text" size="2" maxlength="2" onblur="this.value=formatNum2(this.value, \'minute\')" value="' + formatNum2(minute, 'minute') + '" />:';
        str += '<input id="second"  type="text" size="2" maxlength="2" onblur="this.value=formatNum2(this.value, \'second\')" value="' + formatNum2(second, 'second') + '" />';
        str += '</form>';
 
        cnt.innerHTML = str;
        clock_set = 1;
    }
 
}
 
 
/**
 * Formats number to two digits.
 *
 * @param   int number to format.
 */
function formatNum2(i, valtype) {
    f = (i < 10 ? '0' : '') + i;
    if (valtype && valtype != '') {
        switch(valtype) {
            case 'month':
                f = (f > 12 ? 12 : f);
                break;
 
            case 'day':
                f = (f > 31 ? 31 : f);
                break;
 
            case 'hour':
                f = (f > 24 ? 24 : f);
                break;
 
            default:
            case 'second':
            case 'minute':
                f = (f > 59 ? 59 : f);
                break;
        }
    }
 
    return f;
}
 
 
 
/**
 * Formats number to four digits.
 *
 * @param   int number to format.
 */
function formatNum4(i) {
    return (i < 1000 ? i < 100 ? i < 10 ? '000' : '00' : '0' : '') + i;
}
 
 
 
 
/**
 * Returns date from calendar.
 *
 * @param   string     date text
 */
function returnDate(d_en, d_fr) {
    txt_en = d_en;
	txt_fr = d_fr;
    if (window.opener.dateType != 'date') {
        // need to get time
        h = parseInt(document.getElementById('hour').value,10);
        m = parseInt(document.getElementById('minute').value,10);
        s = parseInt(document.getElementById('second').value,10);
        if (window.opener.dateType == 'datetime') {
            txt_en += ' ' + formatNum2(h, 'hour') + ':' + formatNum2(m, 'minute') + ':' + formatNum2(s, 'second');
			txt_fr += ' ' + formatNum2(h, 'hour') + ':' + formatNum2(m, 'minute') + ':' + formatNum2(s, 'second');
        } else {
            // timestamp
            txt_en += formatNum2(h, 'hour') + formatNum2(m, 'minute') + formatNum2(s, 'second');
			txt_fr += formatNum2(h, 'hour') + formatNum2(m, 'minute') + formatNum2(s, 'second');
        }
    }
 
    window.opener.dateField_en.value = txt_en;
	window.opener.dateField_fr.value = txt_fr;
    window.close();
}

Si tu as besoin de conseil ou d'informations n'hésite pas.

**Oui-Oui MB** · 17/03/2006, 11h08

Et pourquoi ne pas bêtement faire un String.replace() de tes tirets par des slashs ???

**navis84** · 20/03/2006, 09h00

Merci AurelBUD pour avoir posté tout ce code concernant le calendrier de PhpMyAdmin. Je pense m'y pencher bientôt car je ne suis jamais arrivée à le ré-adapter.

Envoyé par Oui-Oui MB

Et pourquoi ne pas bêtement faire un String.replace() de tes tirets par des slashs ???

Et à quel niveau mettrais-tu ce code ?
Car j'ai déjà essayé au niveau de la fonction set_datetime, sans succès... donc si tu as une idée plus précise...

Merci !! @+

**navis84** · 20/03/2006, 09h38

Finalement en utilisant une fonction Remplace, j'arrive à remplacer les tirets par des slashes. J'ai trouvé le bon niveau d'insertion dans la fonction postée précédemment :

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
 
function set_datetime(n_datetime, b_close) {
	if (!obj_caller) return;
 
	var dt_datetime = obj_caller.prs_time(
		(document.cal ? document.cal.time.value : ''),
		new Date(n_datetime)
	);
 
	if (!dt_datetime) return;
	if (b_close) {
		window.close();
		obj_caller.target.value = (document.cal
			? obj_caller.gen_tsmp(dt_datetime)
			: Remplace(obj_caller.gen_date(dt_datetime), '-', '/')
		);
	}
	else obj_caller.popup(dt_datetime.valueOf());
}

Et voici la fonction Remplace utilisée :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function Remplace(expr,a,b) {
      var i=0
      while (i!=-1) {
         i=expr.indexOf(a,i);
         if (i>=0) {
            expr=expr.substring(0,i)+b+expr.substring(i+a.length);
            i+=b.length;
         }
      }
      return expr
   }

Merci de votre aide !

@+

**SpaceFrog** · 20/03/2006, 10h03

Code :

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

1
2
3
4
function Remplace(expr,a,b) {
      expr=expr.split(a).join(b)
      return expr
   }

**navis84** · 20/03/2006, 11h40

Merci pour cet allègement de code. J'avais trouvé la fonction initiale sur le net.

**doudi1404** · 18/05/2010, 19h07

c'est pour le script de " AurelBUD" , je l'ai utilisé il est bien mais en tant que débutante j'ai pas réussi à commencer le calendrier du lundi au lieu du dimanche svp si quelqu'un peut m'aider dans ce sens ; merci

**mamine00** · 17/04/2012, 17h12

j'ai copier ton code mai lorsque je test le code il ne marche pas stp tu peut envoie ton code l'origine

Sélection d'une date dans un calendrier

JavaScript

Discussions similaires

Partager

Partager