composant heure et date

**john_wili** · 06/02/2009, 00h14

bonsoir

j'ai une petite question :
je veux avoir dans ma jsp un composant qui me permet de choisir
la date et l'heure dans un champ

j'utilise actualement "layout date"

Code :

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

1
2
 
  <layout:date property="dat" key="Date limite :" endYear="2020" startYear="1999" patternKey="dd/MM/y" calendarTooltip="Choisir la date fin" ></layout:date>

mais il me permet pas de choisir l'heure
est ce que qlq'un a une idée ??

merci de me répondre

**benneb** · 10/02/2009, 11h36

tu peux utiliser des composants en javascript comme ceux de jquery

**john_wili** · 10/02/2009, 13h55

Est-ce que tu peux me donner plus de précision

Merci

**benneb** · 10/02/2009, 14h20

j'utilise celui là par exemple

http://www.oakcitygraphics.com/jquer...k.cfm#download

il doit y en avoir d'autre :

http://plugins.jquery.com/

**OButterlin** · 10/02/2009, 16h39

Sinon, tu as la possibilité de modifier les script de struts-layout.
En l'occurrence, il s'agit du fichier "javascript.js" dans le répertoire "config" de struts-layout.
Ci-joint un exemple (basic)

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
243
244
245
246
247
248
249
250
251
252
253
254
function printCalendar(day1, day2, day3, day4, day5, day6, day7, first, month1, month2, month3, month4, month5, month6, month7, month8, month9, month10, month11, month12, day, month, year) {
    document.write('<div id="caltitre" style="z-index:10;">');    
    document.write('<table cellpadding="0" cellspacing="0" border="0" width="267">');
    document.write('<tr><td colspan="15" class="CALENDARBORDER"><img src="' + imgsrc + 'shim.gif" width=1 height=1></td></tr>');
    document.write('<tr>');
    document.write('    <td class="CALENDARBORDER" width="1"><img src="' + imgsrc + 'shim.gif" width=1 height=20></td>');
    document.write('    <td class="CALENDARTITLE" colspan="3" align="right"><img src="' + imgsrc + 'previous.gif" onclick="cal_before(' + day + ');"></td>');
    document.write('    <td colspan=7 align="center" class="CALENDARTITLE" nowrap>');
    
    // month
    document.write('<select id="calmois" name="calmois" onchange="cal_chg(' + day + ');"><option value=0>...</option>');    
    
    // use the good day for week start.
    // store the day the week start for later.
    calweekstart = first;    
    // compute an array of the days, starting from Sunday.
    caldays = new Array(7);
    caldays[0] = day1;
    caldays[1] = day2;
    caldays[2] = day3;
    caldays[3] = day4;
    caldays[4] = day5;
    caldays[5] = day6;
    caldays[6] = day7;
    // compute an array of the days, starting at the good day.
    computedcaldays = new Array(7);
    for (i=0; i<7; i++) {        
        computedcaldays[(i+1-calweekstart+7)%7] = caldays[i];
    }
            
    for(i=1;i<=12;i++) {
        var str='<option value=' + i + '>';
        monthIndex = i-1;
        switch (monthIndex) {
            case 0: str += month1; break;
            case 1: str += month2; break;
            case 2: str += month3; break;
            case 3: str += month4; break;
            case 4: str += month5; break;
            case 5: str += month6; break;
            case 6: str += month7; break;
            case 7: str += month8; break;
            case 8: str += month9; break;
            case 9: str += month10; break;
            case 10: str += month11; break;
            case 11: str += month12; break;
        }
        document.write(str);
    }    

    document.write('</select>');
    
    // year
    document.write('<select id="calyear" name="calyear" onchange="cal_chg('+ day + ');">');    
    document.write("</select>");
    
    document.write('    </td>');
    document.write('    <td class="CALENDARTITLE" align="left" colspan="3"><img src="' + imgsrc + 'next.gif" onclick="cal_after(' + day + ');">&nbsp;&nbsp;<img src="' + imgsrc + 'close.gif" onclick="hideCalendar()"></td>');
    document.write('    <td class="CALENDARBORDER" width=1><img src="' + imgsrc + 'shim.gif" width="1" height="1"></td>');
    document.write('</tr>');
    
    document.write('<tr id="caltimeline"><td colspan=15 class="CALENDARBORDER"><font style="color:#ffffff;font-size:8pt;padding-left:10px">Choix d\'une heure</font> <input id="caltime" type="text" style="text-align:center" size="8" maxlength="8" onkeypress="return timeKeysAllowed(event)"/> <font style="color:#ffffff;font-size:8pt">(hh:mm:ss)</font></td></tr>');

    document.write('<tr><td colspan=15 class="CALENDARBORDER"><img src="' + imgsrc + 'shim.gif" width=1 height=1></td></tr>');
    document.write('<tr>');
    document.write('    <td class="CALENDARBORDER" width="1"><img src="' + imgsrc + 'shim.gif" width=1 height=1></td>');
    document.write('    <td class="CALENDRIER" width="38">' + computedcaldays[0] + '</td>');
    document.write('    <td class="CALENDRIER" width="1"><img src="' + imgsrc + 'shim.gif" width=1 height=1></td>');
    document.write('    <td class="CALENDRIER" width="38">' + computedcaldays[1] + '</td>');
    document.write('    <td class="CALENDRIER" width="1"><img src="' + imgsrc + 'shim.gif" width=1 height=1></td>');
    document.write('    <td class="CALENDRIER" width="38">' + computedcaldays[2] + '</td>');
    document.write('    <td class="CALENDRIER" width="1"><img src="' + imgsrc + 'shim.gif" width=1 height=1></td>');
    document.write('    <td class="CALENDRIER" width="38">' + computedcaldays[3] + '</td>');
    document.write('    <td class="CALENDRIER" width="1"><img src="' + imgsrc + 'shim.gif" width=1 height=1></td>');
    document.write('    <td class="CALENDRIER" width="38">' + computedcaldays[4] + '</td>');
    document.write('    <td class="CALENDRIER" width="1"><img src="' + imgsrc + 'shim.gif" width=1 height=1></td>');
    document.write('    <td class="CALENDRIER" width="38">' + computedcaldays[5] + '</td>');
    document.write('    <td class="CALENDRIER" width="1"><img src="' + imgsrc + 'shim.gif" width=1 height=1></td>');
    document.write('    <td class="CALENDRIER" width="38">' + computedcaldays[6] + '</td>');
    document.write('    <td class="CALENDARBORDER" width="1"><img src="' + imgsrc + 'shim.gif" width=1 height=1></td>');
    document.write('</tr>');
    document.write('<tr><td colspan=15 class="CALENDARBORDER"><img src="' + imgsrc + 'shim.gif" width=1 height=1></td></tr>');
    document.write('</table>');
    document.write('</div>');
    document.write('<div id="caljour" style="z-index:10;"></div>');    
}

/**
 * Show the calendar
 */
function showCalendar(year, month, day, pattern, formName, formProperty, event, startYear, endYear) 
{
    try
    {
        if (document.forms[formName].elements[formProperty].disabled) 
        {
            return;
        }
    }
    catch (e)
    {
        
    }
    
    if (startYear!=null) {
        var calyear = document.getElementById("calyear");
        for (i = startYear; i <= endYear; i++) {            
            calyear.options[i - startYear] = new Option(i,i);
        }
        calyear.options.length = endYear - startYear + 1;
        if ( startYear == endYear ) calyear.style.display="none";
    }

    if(document.all) {
        // IE.
        var ofy=document.body.scrollTop;
        var ofx=document.body.scrollLeft;
        document.all.slcalcod.style.left = event.clientX+ofx+10;
        document.all.slcalcod.style.top = event.clientY+ofy+10;
        document.all.slcalcod.style.visibility="visible";
        document.all.calmois.selectedIndex= month;
    } else if(document.layers) {
        // Netspace 4
        document.slcalcod.left = e.pageX+10;
        document.slcalcod.top = e.pageY+10;
        document.slcalcod.visibility="visible";
        document.slcalcod.document.caltitre.document.forms[0].calmois.selectedIndex=month;
    } else {
        // Mozilla
        var calendrier = document.getElementById("slcalcod");
        var ofy=document.body.scrollTop;
        var ofx=document.body.scrollLeft;
        calendrier.style.left = event.clientX+ofx+10;
        calendrier.style.top = event.clientY+ofy+10;
        calendrier.style.visibility="visible";
        document.getElementById("calmois").selectedIndex=month;
    }
    
    if (document.forms[formName].elements[formProperty].stlayout) 
    {
        var lc_day = document.forms[formName].elements[formProperty].stlayout.day;
        var lc_month = document.forms[formName].elements[formProperty].stlayout.month;
        var lc_year = parseInt(document.forms[formName].elements[formProperty].stlayout.year);
        
        cal_chg(lc_day, lc_month, lc_year);
    } else {
        cal_chg(day, month, year);    
    }
    
    // Traitement de la partie heure
    // =============================
    try
    {
        var field = document.forms[formName].elements[formProperty];
        var dateTimeValue = field.value;
        if ( field.size > 10 )
        {
            if ( dateTimeValue != null )
            {
                var dt = dateTimeValue.split(" ");
                if ( dt.length > 1 )
                {
                    document.getElementById("caltime").value = dt[1];
                }
            }
        }
        else document.getElementById("caltimeline").style.display = "none";
    }
    catch (e) 
    {
        try
        {
            document.getElementById("caltimeline").style.display = "none";
        }
        catch (e) { alert(e.message); }
    }
        
    if (document.all) {
        hideElement("SELECT");
    }
    calformname = formName;
    calformelement = formProperty;
    calpattern = pattern;
}

function formatDate(day, month, year) 
{
    var date = "";
    var pos = 0;
    var pattern;
    var previousPattern;
    var patternLength = 0;
    if (calpattern!=null && calpattern.length>0) {        
        previousPattern = calpattern.charAt(0);
        while (pos <= calpattern.length) {
            if (pos < calpattern.length) {
                pattern = calpattern.charAt(pos);
            }  else {
                pattern = "";
            }
            if (pattern != previousPattern) {            
                switch (previousPattern) {
                    case 'y':
                        date += padYear(year, patternLength);                
                        break;
                    case 'M':
                        date += padNumber(month, patternLength);
                        break;
                    case 'd':
                        date += padNumber(day, patternLength);
                        break;
                    case '\'':
                        // PENDING
                        break;
                    default:
                        date += previousPattern;
                }
                previousPattern = pattern;
                patternLength = 0;
            }
            patternLength++;
            pos++;
        }
    }

    try
    {
        var valueTime = document.getElementById("caltime").value;
        if ( valueTime.length > 0 )
        {
            valueTime += ":00:00:00";
            var h = valueTime.split(":");
            
            var msg = "";
            if ( h[0] > 23 ) msg += "Heures incorrectes";
            if ( h[1] > 59 ) msg += "Minutes incorrectes";
            if ( h[2] > 59 ) msg += "Secondes incorrectes";
            if (msg.length > 0)
            {
                alert(msg);
                return null;
            }
            date += " ";
            date += h[0];
            date += ":" + h[1];
            date += ":" + h[2];
        }
    }
    catch (e)
    {
    }
    return date;
}

Je n'ai mis que les méthodes modifiées (en espérant n'avoir rien oublié)

Au niveau de la balise <layout:date>, la seule chose à faire est de spécifier un formateur (attribut "editType") qui tienne compte de l'heure et de mettre une longeur maximale de 19 (size="19" maxlength="19") correspondant au format dd/MM/yyyy HH:mm:ss

A+

**john_wili** · 10/02/2009, 17h19

merci "OButterlin " pour la réponse mais je mis quoi dans "attribut "editType"
??

composant heure et date

Struts 1 Java

Vue hybride

Discussions similaires

Partager

Partager