calendrier en javascript

Version imprimable

20/05/2006, 11h15
graphicsxp

calendrier en javascript

Bonjour,
je ne m'y connais pas trop mais ce que j'essaye de faire est a priori assez simple, j'espere que vous pourrez m'aider.

J'ai 3 input box en html sur une page (c'est de l'asp.net mais peu importe)
une permet de selectionner un mois de l'année, l'autre le jour, et enfin la 3eme l'année.
Ce que je cherche a faire c'est mettre a jour celle des jours en fonction du mois choisis par l'utilisateur (30, 31 ou 29). Comment faire ca ?

Merci
20/05/2006, 11h54
Sheriff

salut !
tu peut faire 31 por tous les mois et ecrire une fonction qui affiche ou qui cache le dernier, les deux derniers ou les trois derniers, et ce en fonction du mois...
mais au fait, tes input box, c des select ou bien ?
@+
20/05/2006, 12h18
graphicsxp

oui c des select.

Tu peux me dire comment faire pour cacher les jours ? exemple de code stp ;)

salut !
voici un petit truc que j'ai écrit... en 2k ça marche très bien chez moi, sous ie.

Code:

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
<html>
 <head>
  <title>date</title>
  <script type=text/javascript language=javascript>
   function verifierjours(){
    var idx=document.nomduformulaire.mois.selectedIndex;
    if (idx==1) //Si on choisit février
     document.nomduformulaire.jours.length=29;
     else if (idx==3||idx==5||idx==8||idx==10) // si on choisit avril ou juin ou septembre ou novembre
      { document.nomduformulaire.jours.length=30;
       document.nomduformulaire.jours.options[29].text='30';
      }
      else { // si on choisit les autes mois
       document.nomduformulaire.jours.length=31;
       document.nomduformulaire.jours.options[29].text='30';
       document.nomduformulaire.jours.options[30].text='31';
       }
   }
  </script>
 </head>
 <body>
  <form name=nomduformulaire>
   <select name=mois onchange=verifierjours()>
    <option>janvier</option><option>fevrier</option><option>mars</option><option>avril</option>
    <option>mai</option><option>juin</option><option>juillet</option><option>aout</option>
    <option>septembre</option><option>octobre</option><option>novembre</option><option>decembre</option>
   </select>
   <select name=jours>
    <option>01</option><option>02</option><option>03</option><option>04</option><option>05</option>
    <option>06</option><option>07</option><option>08</option><option>09</option><option>10</option>
    <option>11</option><option>12</option><option>13</option><option>14</option><option>15</option>
    <option>16</option><option>17</option><option>18</option><option>19</option><option>20</option>
    <option>21</option><option>22</option><option>23</option><option>24</option><option>25</option>
    <option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option>
   </select>
  </form>
 </body>
</html>

Comme tu peux le constaté, j'ai pu me passer des attributs visibility ou display qui allaient rendre le code plus lourd...
Tu pourras bien sur gérer les années bissextiles et tout ce qui te passe à l'esprit...
@+, en espérant que ça contribuera à résolver ton pb !

21/05/2006, 14h22
graphicsxp

Un grand merci a toi ! Ca marche tres bien et c'est propre. Merci !:D

dans le genre simple, j'avais mis un truc du genre aussi, dans les sources:

Code:

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
 
<form id="quand" action="">
 <div>
  <strong>Saisissez votre date sous la forme jj-mm-aaaa</strong>
  <p>
   <input name="j" type="text" size="1" maxlength="2" /> 
   <input name="m" type="text" size="1" maxlength="2" /> 
   <input name="a" type="text" size="1" maxlength="4"  /> 
   <input type="submit" value="valider" />
   </p>
 </div>
</form>
 
<script type="text/javascript">
 
 document.getElementById("quand").onsubmit=function(){
  return verif(this.elements["a"].value,this.elements["m"].value,this.elements["j"].value)
 }
 
 function verif(a,m,j){ 
  var d=new Date(a,m-1,j);
   return (d.getFullYear()==a && d.getMonth()==m-1);
 } 
 
</script>