script calendrier pour la saisie des champs dates

**s.mustapha86** · 15/07/2008, 20h39

bonjour,
j'ai un formulaire dans lequel j'ai un champs pour la saisie d'une date, et je cherche le script qui permet de faciliter la saisie de ce champ ainsi que la facon d'utilisation de ce script.
remarque: j'utilise le sgbd mysql qui accepte les dates de la forme
AAAA-MM-JJ
c urgent
merci d'avance.

**Sun03** · 16/07/2008, 10h03

Tu peux utiliser Ajax?

**s.mustapha86** · 16/07/2008, 10h11

comment faire?
est ce que vous expliquer + ?

**Sun03** · 16/07/2008, 10h19

Voire ça

Code :

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

http://dev.base86.com/scripts/vista-like_ajax_calendar_version_2.html#download

**s.mustapha86** · 16/07/2008, 10h30

et concernant l'utilisation de ce calendrier comment doit je faire?
merci.

**reverse_engineer** · 16/07/2008, 10h38

je pense pas que c'est la bonne section

mais bon!!

je vois une solution en javascript,tiens ce code te servira bcp.
c'est le code d'une page html ,essaye le !!

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
 
sous firefox 
 
 
JavaScript
Pour pouvoir le télécharger, connectez-vous ! ;)<html>
<head>
 
<style>
input   {border:1px blue solid;width:80px;}
body   {font-family:Tahoma;font-size:12px}
td      {font-family:Tahoma;font-size:12px}
</style>
 
<script language="javascript">
moisX=["","Janvier","Fevrier","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Decembre"];
JourM=["Di","Lu","Ma","Me","Je","Ve","Sa"];
 
var fermable_microcal=true;
var select_old= null;
 
var startWeek=0;//debut de la semaine 0=dim,1=lun,...
var jourPause={0:true,6:true}; //jour de pause de la semaine
var jourFeriee={"1-1":"jour an","1-5":"fête du travail","8-5":"armistice","14-7":"fête nationale","15-8":"ascencion","1-11":"armistice","11-11":"toussain","25-12":"noel"};
 
//structure la date 
function strucDate(dateX) 
{return {"pos":dateX.getDay(),"jour":dateX.getDate(),"mois":dateX.getMonth()+1,"annee":dateX.getFullYear()};}
 
 
var dateS= strucDate(new Date());//date Selectionné
var dnow= strucDate(new Date());//date actuelle
 
 
//retourne le ième jour du 1er du mois
function premJourMois(mois,annee) 
{return (new Date(annee,mois-1,1).getDay());}
//retourne le jour max du mois
function JmaxMois(mois,annee) 
{return (new Date(annee,mois,0).getDate());}
 
 
/* Test une date si elle est correct...spécial killer*/
function testTypeDate(dateEntree)
{
tst=false;
try
{rc=dateEntree.split("/");nd=new Date(rc[2],(rc[1]-1),rc[0]);
tst=(rc[2]>1800&&rc[2]<2200&&rc[2]==nd.getFullYear()&&rc[1]==(nd.getMonth()+1)&&rc[0]==nd.getDate());
} catch(e) {}
return tst;
}
 
//selection de la zone avec la souris
function choix(koi,code)
{
if (code) 
{  select_old= koi.style.background;
   koi.style.background ='#c0c0FF';
}
else 
{
koi.style.background =select_old;
}
}
 
 
function testTravail(oldX,xx,jj,mm,aa)
{
styleX="font-family:Tahoma;font-size:10px;text-align:center;";
styleX+=(oldX)?"":"color:#e0e0e0;";
styleX+="cursor:hand;border-right:1px #e0e0e0 solid;border-bottom:1px #e0e0e0 solid;";
if (jourPause[xx]||jourFeriee[jj+"-"+mm]!=null) styleX+="background:#f0f0f0;";
if (jj==dnow.jour&&mm==dnow.mois&&aa==dnow.annee) styleX+="border:2px red solid;";
return styleX;
}
 
//test si année bissextile
function bissextile(annee) {
return (annee%4==0 && annee %100!=0 || annee%400==0);
}
 
//Retourne le nombre de jour depuis le 1er janvier (num de semaine)
function nbJAnnee(dateX){
var nb_mois=[,0,31,59,90,120,151,181,212,243,273,304,334];
j=dateX.jour ; m=dateX.mois ; a=dateX.annee;
nb=nb_mois[m]+j-1 ;
if (bissextile(a) && m>2) nb++;
return nb;
}
 
//affiche le calendrier
function view_microcal(actif,ki,source,mxS,axS)
{
if (actif)
{
//decalage du mois su on clique sur -/+
if (mxS!=-1) 
{
clearTimeout(cc);
ki.focus();
fermable_microcal=true;
dateS.mois=mxS;
dateS.annee=axS;
if (dateS.mois<1) {dateS.annee--;dateS.mois+=12;}
if (dateS.mois>12) {dateS.annee++;dateS.mois-=12;}
}
//init
Dstart=(premJourMois(dateS.mois,dateS.annee)+7-startWeek)%7;
jmaxi=JmaxMois(dateS.mois,dateS.annee);
jmaxiAvant=JmaxMois((dateS.mois-1),dateS.annee);
//si on veux ajouter le numero de la semaine ...
//idxWeek=parseInt(nbJAnnee(strucDate(new Date(dateS.mois+'-01-'+dateS.annee)))/7,10)+1;
 
ymaxi=parseInt((jmaxi+Dstart+1)/7,10);
 
//generation du tableau
//--entête
htm="<table><tr style='font-size:10px;font-family:Tahoma;text-align:center;'>";
htm+="<td style='cursor:hand;' onclick=\"view_microcal(true,"+ki.id+","+source.id+","+(dateS.mois-1)+","+dateS.annee+");\">-</td>";
htm+="<td colspan='5'> <b> "+moisX[dateS.mois]+"</b>&nbsp;"+dateS.annee+"</td>";
htm+="<td  style='cursor:hand;' onclick=\"view_microcal(true,"+ki.id+","+source.id+","+(dateS.mois+1)+","+dateS.annee+")\">+</td></tr>";
//--corps
htm+="<tr>";
//affichage des jours DLMMJVS
for (x=0;x<7;x++) 
htm+="<td  style='font-size:10px;font-family:Tahoma;'><b>"+JourM[(x+startWeek)%7]+"</b></td>";
htm+="</tr>"
 
 
//------------------------
for (y=0;y<=ymaxi;y++)
{
htm+="<tr>";
for (x=0;x<7;x++)
{
idxP=y*7+x-Dstart+1;   //numero du jour
aa=dateS.annee;
xx=(x+startWeek)%7;
//jour du mois précedent
if (idxP<=0)
{
jj=idxP+jmaxiAvant;mm=dateS.mois-1;
if (mm==0)
{mm=12;aa--;}
htm+="<td style='"+testTravail(false,xx,jj,mm,aa)+"' onmouseover='choix(this,true)' onmouseout='choix(this,false)'  onclick=\""+(ki.id)+".value='"+((jj<10)?"0":"")+jj+"/"+((mm<10)?"0":"")+mm+"/"+aa+"';"+(ki.id)+".style.color='black';\">"+jj+"</td>";
}
else if (idxP>jmaxi) //jour du mois suivant
{
jj=idxP-jmaxi;mm=dateS.mois+1;
if (mm==13)
{mm=1;aa++;}
 
htm+="<td style='"+testTravail(false,xx,jj,mm,aa)+"' onmouseover='choix(this,true)' onmouseout='choix(this,false)'  onclick=\""+(ki.id)+".value='"+((jj<10)?"0":"")+jj+"/"+((mm<10)?"0":"")+mm+"/"+aa+"';"+(ki.id)+".style.color='black';\">"+jj+"</td>";}
else //jour du mois en cours
{
jj=idxP;mm=dateS.mois;
htm+="<td style='"+testTravail(true,xx,jj,mm,aa)+"' onmouseover='choix(this,true)' onmouseout='choix(this,false)'  onclick=\""+(ki.id)+".value='"+((jj<10)?"0":"")+jj+"/"+((mm<10)?"0":"")+mm+"/"+aa+"';"+(ki.id)+".style.color='black';\">"+jj+"</td>";}
}
htm+="</tr>"
}//-------------------------
htm+="</table>"
//affiche le tableau
source.innerHTML=htm;
source.style.visibility="";
} else
{
//ferme le calendrier
if (fermable_microcal) 
   cc=setTimeout(source.id+".style.visibility='hidden'",500);
}
}
 
</script>
 
</head>
<body style="margin:0px">
<center>
<br><br><b>micro-calendrier <i>par MaSTeR-KiLLeR (A. Selim)</i><b><br><a href="http://www.crew.free.fr">http://www.crew.free.fr</a><br><br>
Saisissez une date au format JJ/MM/AAAA
<table cellpadding="0" cellspacing="0">
<tr><td ><input type="text" maxlength="10" id="dateDebut" onfocus="view_microcal(true,dateDebut,microcal,-1,0);" onblur="view_microcal(false,dateDebut,microcal,-1,0);" onkeyup="this.style.color=testTypeDate(this.value)?'black':'red'"></td></tr>
<tr><td><div id="microcal" style="visibility:hidden;position:absolute;border:2px red dashed;background:#ffffff;"></div></td></tr>
</table>
<center>
</body>
</html>

Bonne journée!!!

**s.mustapha86** · 16/07/2008, 10h41

merci pour votre aide.

**Sun03** · 16/07/2008, 10h47

Sur la meme page tu trouve toute la description

**Sun03** · 16/07/2008, 10h59

Oui Ssi mustapha, c'est claire olala?

**c_nvy** · 16/07/2008, 11h24

Il y aussi le tag date de Struts-Layout qui donne ceci.

**s.mustapha86** · 16/07/2008, 12h18

mais dans ce cas comment faire pour que la date saisie soit de la forme AAAA-MM-JJ car je travaille avec mysql qui n'accepte que les dates de cette forme.

**c_nvy** · 16/07/2008, 12h56

Tu peux ajouter l'attribut patternKey="yyyy-MM-dd" au tag layout:date.

**s.mustapha86** · 16/07/2008, 15h18

merci pour votre aide.

script calendrier pour la saisie des champs dates

Struts 1 Java

Discussions similaires

Partager

Partager