benoitbalon posteets tagged getElementById  [ Profile ]

Sort by: Date / Title /

  1. 9 months ago
    La fonction Javascript qui fait tout est get_mois(...) . Elle prend 5 paramètres : - l'année par défaut à l'ouverture - le mois par défaut à l'ouverture - si le calendrier doit être bloqué au dernier mois et à la dernière année écoulés, c'est à dire jusqu'à aujourd'hui mais pas au-delà (bloqué = true) - l'attribut id correspondant à la balise (idéalement un div) où le calendrier doit être construit - l'id du bouton qui permet d'afficher et cacher le calendrier
    1. <?xml version="1.0" encoding="UTF-8"?>
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3.  
    4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    5.         <head>
    6.                 <script language="javascript">
    7.                         function get_mois(annee, mois, bloquer_a_date_actuelle, emplacement, bouton)
    8.                         {
    9.                                 var today = new Date();
    10.                                 var date_a_traiter = today;
    11.                                
    12.                                 if (annee != null && mois != null)
    13.                                 {
    14.                                         if (! bloquer_a_date_actuelle)
    15.                                         {
    16.                                                 if (annee != today.getFullYear() || mois != today.getMonth())
    17.                                                 {
    18.                                                         date_a_traiter = new Date(annee, mois, 1);
    19.                                                 }
    20.                                         }
    21.                                         else
    22.                                         {
    23.                                                 if (annee < today.getFullYear() || mois < today.getMonth())
    24.                                                 {
    25.                                                         date_a_traiter = new Date(annee, mois, 1);
    26.                                                 }
    27.                                         }
    28.                                 }
    29.                                
    30.                                 var current_year = date_a_traiter.getFullYear();
    31.                                 var current_month = date_a_traiter.getMonth();
    32.                                
    33.                                 var debut_mois = new Date(current_year, current_month, 1);
    34.                                 var premier_jour_mois = debut_mois.getDay();
    35.                                
    36.                                 var fin_mois = new Date(current_year, current_month + 1, 0);
    37.                                 var derniere_date_mois = fin_mois.getDate();
    38.                                
    39.                                 var mon_code = "";
    40.                                 mon_code = "\<table\>" +
    41.                                                                 "\<tr class=\"deplace\"\>" +
    42.                                                                         "\<td\>\<a id=\"annee_precedente\" href=\"\" class=\"survol\" title=\"Ann&eacute;e pr&eacute;c&eacute;dente\"\>\<\<\</a\>\</td\>" +
    43.                                                                         "\<td\>\<a id=\"mois_precedent\" href=\"\" class=\"survol\" title=\"Mois pr&eacute;c&eacute;dent\"\>\<\</a\>\</td\>" +
    44.                                                                         "\<td\>\<span id=\"mois_annee\"\>\</span\>\</td\>" +
    45.                                                                         "\<td\>\<a id=\"mois_suivant\" href=\"\" class=\"survol\" title=\"Mois suivant\"\>\>\</a\>\</td\>" +
    46.                                                                         "\<td\>\<a id=\"annee_suivante\" href=\"\" class=\"survol\" title=\"Ann&eacute;e suivante\"\>\>\>\</a\>\</td\>" +
    47.                                                                         "\<td\>\<a id=\"fermer_calendrier\" href=\"javascript: cacher_calendrier('" + emplacement + "', '" + bouton + "');\" class=\"survol\" title=\"Fermer le calendrier\"\>x</a\>\</td\>" +
    48.                                                                 "\</tr\>" +
    49.                                                         "\</table\>";
    50.                                 mon_code = mon_code + "\<table\>\<tr class=\"titre\"\>\<td\>Lu\</td\>\<td\>Ma\</td\>\<td\>Me\</td\>\<td\>Je\</td\>\<td\>Ve\</td\>\<td\>Sa\</td\>\<td\>Di\</td\>\</tr\>";
    51.                                
    52.                                 for (var i = 1 ; i <= derniere_date_mois ; i++)
    53.                                 {
    54.                                         var ma_date = new Date(current_year, current_month, i);
    55.                                        
    56.                                         var style_today = " onclick=\"javascript: alert('" + i + "/" + current_month + "/" + current_year + "');\"";
    57.                                         if (i == date_a_traiter.getDate() && (ma_date.getDay() == 0 || ma_date.getDay() == 6) )
    58.                                         {
    59.                                                 if (date_a_traiter == today)
    60.                                                 {
    61.                                                         style_today = style_today + " class=\"today_we\"";
    62.                                                 }
    63.                                                 else
    64.                                                 {
    65.                                                         style_today = style_today + " class=\"not_today_we\"";
    66.                                                 }
    67.                                         }
    68.                                         else if (i == date_a_traiter.getDate() && (ma_date.getDay() != 0 && ma_date.getDay() != 6) )
    69.                                         {
    70.                                                 if (date_a_traiter == today)
    71.                                                 {
    72.                                                         style_today = style_today + " class=\"today_not_we\"";
    73.                                                 }
    74.                                                 else
    75.                                                 {
    76.                                                         style_today = style_today + " class=\"not_today_not_we\"";
    77.                                                 }
    78.                                         }
    79.                                         else if (i != date_a_traiter.getDate() && (ma_date.getDay() != 0 && ma_date.getDay() != 6) )
    80.                                         {
    81.                                                 style_today = style_today + " class=\"not_today_not_we\"";
    82.                                         }
    83.                                         else if (i != date_a_traiter.getDate() && (ma_date.getDay() == 0 || ma_date.getDay() == 6) )
    84.                                         {
    85.                                                 style_today = style_today + " class=\"not_today_we\"";
    86.                                         }
    87.                                        
    88.                                         if (i == 1)
    89.                                         {
    90.                                                 switch (ma_date.getDay())
    91.                                                 {
    92.                                                         case 1:
    93.                                                                         mon_code = mon_code + "\<tr\>\<td" + style_today + "\>1\</td\>";
    94.                                                                         break;
    95.                                                         case 2:
    96.                                                                         mon_code = mon_code + "\<tr\>\<td\> \</td\>\<td" + style_today + "\>1\</td\>";
    97.                                                                         break;
    98.                                                         case 3:
    99.                                                                         mon_code = mon_code + "\<tr\>\<td\> \</td\>\<td\> \</td\>\<td" + style_today + "\>1\</td\>";
    100.                                                                         break;
    101.                                                         case 4:
    102.                                                                         mon_code = mon_code + "\<tr\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td" + style_today + "\>1\</td\>";
    103.                                                                         break;
    104.                                                         case 5:
    105.                                                                         mon_code = mon_code + "\<tr\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td" + style_today + "\>1\</td\>";
    106.                                                                         break;
    107.                                                         case 6:
    108.                                                                         mon_code = mon_code + "\<tr\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td" + style_today + "\>1\</td\>";
    109.                                                                         break;
    110.                                                         case 0:
    111.                                                                         mon_code = mon_code + "\<tr\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td" + style_today + "\>1\</td\>\</tr\>";
    112.                                                                         break;
    113.                                                 }
    114.                                         }
    115.                                         else if (i == derniere_date_mois)
    116.                                         {
    117.                                                 switch (ma_date.getDay())
    118.                                                 {
    119.                                                         case 1:
    120.                                                                         mon_code = mon_code + "\<tr\>\<td" + style_today + "\>" + i + "\</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\</tr\>";
    121.                                                                         break;
    122.                                                         case 2:
    123.                                                                         mon_code = mon_code + "\<td" + style_today + "\>" + i + "\</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\</tr\>";
    124.                                                                         break;
    125.                                                         case 3:
    126.                                                                         mon_code = mon_code + "\<td" + style_today + "\>" + i + "\</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\</tr\>";
    127.                                                                         break;
    128.                                                         case 4:
    129.                                                                         mon_code = mon_code + "\<td" + style_today + "\>" + i + "\</td\>\<td\> \</td\>\<td\> \</td\>\<td\> \</td\>\</tr\>";
    130.                                                                         break;
    131.                                                         case 5:
    132.                                                                         mon_code = mon_code + "\<td" + style_today + "\>" + i + "\</td\>\<td\> \</td\>\<td\> \</td\>\</tr\>";
    133.                                                                         break;
    134.                                                         case 6:
    135.                                                                         mon_code = mon_code + "\<td" + style_today + "\>" + i + "\</td\>\<td\> \</td\>\</tr\>";
    136.                                                                         break;
    137.                                                         case 0:
    138.                                                                         mon_code = mon_code + "\<td" + style_today + "\>" + i + "\</td\>\</tr\>\</tr\>";
    139.                                                                         break;
    140.                                                 }
    141.                                         }
    142.                                         else
    143.                                         {
    144.                                                 if (ma_date.getDay() == 0)
    145.                                                 {
    146.                                                         mon_code = mon_code + "\<td" + style_today + "\>" + i + "\</td\>\</tr\>";
    147.                                                 }
    148.                                                 else if (ma_date.getDay() == 1)
    149.                                                 {
    150.                                                         mon_code = mon_code + "\<tr\>\<td" + style_today + "\>" + i + "\</td\>";
    151.                                                 }
    152.                                                 else
    153.                                                 {
    154.                                                         mon_code = mon_code + "\<td" + style_today + "\>" + i + "\</td\>";
    155.                                                 }
    156.                                         }
    157.                                 }
    158.                                
    159.                                 mon_code = mon_code + "\</table\>";
    160.                                 document.getElementById(emplacement).innerHTML = mon_code;
    161.                                 document.getElementById("mois_annee").innerHTML = get_select_month(current_month, current_year, bloquer_a_date_actuelle, emplacement) + " " + get_select_year(current_year, current_month, bloquer_a_date_actuelle, emplacement);
    162.                                
    163.                                 var annee_precedente = new Date(current_year - 1, current_month, 1);
    164.                                 var annee_suivante = new Date(current_year + 1, current_month, 1);
    165.                                 var mois_precedent = new Date(current_year, current_month - 1, 1);
    166.                                 var mois_suivant = new Date(current_year, current_month + 1, 1);
    167.                                 document.getElementById("annee_precedente").setAttribute("href", "javascript: get_mois(" + annee_precedente.getFullYear() + ", " + annee_precedente.getMonth()  + ", " + bloquer_a_date_actuelle + ", '" + emplacement + "', '" + bouton + "'" + ");");
    168.                                 document.getElementById("mois_precedent").setAttribute("href", "javascript: get_mois(" + mois_precedent.getFullYear() + ", " + mois_precedent.getMonth() + ", " + bloquer_a_date_actuelle + ", '" + emplacement + "', '" + bouton + "'" + ");");
    169.                                 if (bloquer_a_date_actuelle)
    170.                                 {
    171.                                         if (current_year >= today.getFullYear() && current_month >= today.getMonth())
    172.                                         {
    173.                                                 document.getElementById("annee_suivante").setAttribute("href", "javascript: alert(\"Vous ne pouvez pas aller au-delà de la date actuelle\");");
    174.                                                 document.getElementById("mois_suivant").setAttribute("href", "javascript: alert(\"Vous ne pouvez pas aller au-delà de la date actuelle\");");
    175.                                         }
    176.                                         else if (current_year >= today.getFullYear() && current_month < today.getMonth())
    177.                                         {
    178.                                                 document.getElementById("annee_suivante").setAttribute("href", "javascript: alert(\"Vous ne pouvez pas aller au-delà de la date actuelle\");");
    179.                                                 document.getElementById("mois_suivant").setAttribute("href", "javascript: get_mois(" + mois_suivant.getFullYear() + ", " + mois_suivant.getMonth() + ", " + bloquer_a_date_actuelle + ", '" + emplacement + "', '" + bouton + "'" + ");");
    180.                                         }
    181.                                         else
    182.                                         {
    183.                                                 document.getElementById("annee_suivante").setAttribute("href", "javascript: get_mois(" + annee_suivante.getFullYear() + ", " + annee_suivante.getMonth() + ", " + bloquer_a_date_actuelle + ", '" + emplacement + "', '" + bouton + "'" + ");");
    184.                                                 document.getElementById("mois_suivant").setAttribute("href", "javascript: get_mois(" + mois_suivant.getFullYear() + ", " + mois_suivant.getMonth() + ", " + bloquer_a_date_actuelle + ", '" + emplacement + "', '" + bouton + "'" + ");");
    185.                                         }
    186.                                 }
    187.                                 else
    188.                                 {
    189.                                         document.getElementById("annee_suivante").setAttribute("href", "javascript: get_mois(" + annee_suivante.getFullYear() + ", " + annee_suivante.getMonth() + ", " + bloquer_a_date_actuelle + ", '" + emplacement + "', '" + bouton + "'" + ");");
    190.                                         document.getElementById("mois_suivant").setAttribute("href", "javascript: get_mois(" + mois_suivant.getFullYear() + ", " + mois_suivant.getMonth() + ", " + bloquer_a_date_actuelle + ", '" + emplacement + "', '" + bouton + "'" + ");");
    191.                                 }
    192.                         }
    193.                        
    194.                         function get_nom_mois(numero)
    195.                         {
    196.                                 var nom_mois = "";
    197.                                
    198.                                 switch (numero)
    199.                                 {
    200.                                         case 0:
    201.                                                         nom_mois = "Janvier";
    202.                                                         break;
    203.                                         case 1:
    204.                                                         nom_mois = "F&eacute;vrier";
    205.                                                         break;
    206.                                         case 2:
    207.                                                         nom_mois = "Mars";
    208.                                                         break;
    209.                                         case 3:
    210.                                                         nom_mois = "Avril";
    211.                                                         break;
    212.                                         case 4:
    213.                                                         nom_mois = "Mai";
    214.                                                         break;
    215.                                         case 5:
    216.                                                         nom_mois = "Juin";
    217.                                                         break;
    218.                                         case 6:
    219.                                                         nom_mois = "Juillet";
    220.                                                         break;
    221.                                         case 7:
    222.                                                         nom_mois = "Ao&ucirc;t";
    223.                                                         break;
    224.                                         case 8:
    225.                                                         nom_mois = "Septembre";
    226.                                                         break;
    227.                                         case 9:
    228.                                                         nom_mois = "Octobre";
    229.                                                         break;
    230.                                         case 10:
    231.                                                         nom_mois = "Novembre";
    232.                                                         break;
    233.                                         case 11:
    234.                                                         nom_mois = "D&eacute;cembre";
    235.                                                         break;
    236.                                 }
    237.                                
    238.                                 return nom_mois;
    239.                         }
    240.                        
    241.                         function get_select_month(mois, annee, bloquer_a_date_actuelle, emplacement)
    242.                         {
    243.                                 var today = new Date();
    244.                                
    245.                                 var select = "\<select name=\"mois\" onchange=\"javascript: get_mois(" + annee + ", this.value, " + bloquer_a_date_actuelle + ", '" + emplacement + "'" + ");\"\>";
    246.                                
    247.                                 if (annee == today.getFullYear() && bloquer_a_date_actuelle == true)
    248.                                 {
    249.                                         for (var i = 0 ; i <= today.getMonth() ; i++)
    250.                                         {
    251.                                                 if (i != mois)
    252.                                                 {
    253.                                                         select = select + "\<option value=\"" + i + "\"\>" + get_nom_mois(i) + "\</option\>";
    254.                                                 }
    255.                                                 else
    256.                                                 {
    257.                                                         select = select + "\<option value=\"" + i + "\" selected=\"selected\"\>" + get_nom_mois(i) + "\</option\>";
    258.                                                 }
    259.                                         }
    260.                                 }
    261.                                 else
    262.                                 {
    263.                                         for (var i = 0 ; i <= 11 ; i++)
    264.                                         {
    265.                                                 if (i != mois)
    266.                                                 {
    267.                                                         select = select + "\<option value=\"" + i + "\"\>" + get_nom_mois(i) + "\</option\>";
    268.                                                 }
    269.                                                 else
    270.                                                 {
    271.                                                         select = select + "\<option value=\"" + i + "\" selected=\"selected\"\>" + get_nom_mois(i) + "\</option\>";
    272.                                                 }
    273.                                         }
    274.                                 }
    275.                                
    276.                                 select = select + "\</select\>";
    277.                                
    278.                                 return select;
    279.                         }
    280.                        
    281.                         function get_select_year(annee, mois, bloquer_a_date_actuelle, emplacement)
    282.                         {
    283.                                 var today = new Date();
    284.                                
    285.                                 var select = "\<select name=\"annee\" onchange=\"javascript: get_mois(this.value, " + mois + ", " + bloquer_a_date_actuelle + ", '" + emplacement + "'" + ");\"\>";
    286.                                
    287.                                 if (bloquer_a_date_actuelle && today.getFullYear() - annee <= 10)
    288.                                 {
    289.                                         for (var i = today.getFullYear() ; i > today.getFullYear() - 20 ; i-- )
    290.                                         {
    291.                                                 if (i == annee)
    292.                                                 {
    293.                                                         select = select + "\<option value=\"" + i + "\" selected=\"selected\"\>" + i + "\</option\>";
    294.                                                 }
    295.                                                 else
    296.                                                 {
    297.                                                         select = select + "\<option value=\"" + i + "\"\>" + i + "\</option\>";
    298.                                                 }
    299.                                         }
    300.                                 }
    301.                                 else
    302.                                 {
    303.                                         for (var i = annee + 9 ; i > annee - 10 ; i-- )
    304.                                         {
    305.                                                 if (i == annee)
    306.                                                 {
    307.                                                         select = select + "\<option value=\"" + i + "\" selected=\"selected\"\>" + i + "\</option\>";
    308.                                                 }
    309.                                                 else
    310.                                                 {
    311.                                                         select = select + "\<option value=\"" + i + "\"\>" + i + "\</option\>";
    312.                                                 }
    313.                                         }
    314.                                 }
    315.                                
    316.                                 select = select + "\</select\>";
    317.                                
    318.                                 return select;
    319.                         }
    320.                        
    321.                         function afficher_calendrier(calendrier, bouton_calendrier)
    322.                         {
    323.                                 document.getElementById(calendrier).setAttribute("style", "display: block;");
    324.                                 document.getElementById(bouton_calendrier).setAttribute("onclick", "javascript: cacher_calendrier('" + calendrier + "', '" + bouton_calendrier + "');");
    325.                         }
    326.                        
    327.                         function cacher_calendrier(calendrier, bouton_calendrier)
    328.                         {
    329.                                 document.getElementById(calendrier).setAttribute("style", "display: none;");
    330.                                 document.getElementById(bouton_calendrier).setAttribute("onclick", "javascript: afficher_calendrier('" + calendrier + "', '" + bouton_calendrier + "');");
    331.                         }
    332.                 </script>
    333.                 <style type="text/css">
    334.                         body
    335.                         {
    336.                                 background-color: black;
    337.                                 color: white;
    338.                                 font-family: sans-serif;
    339.                                 font-weight: bold;
    340.                                 font-size: 12px;
    341.                         }
    342.                        
    343.                         div.calendrier
    344.                         {
    345.                                 border: 1px solid grey;
    346.                                 width: 250px;
    347.                                 display: none;
    348.                         }
    349.                        
    350.                         td.not_today_not_we, td.today_not_we, td.not_today_we, td.today_we
    351.                         {
    352.                                 text-align: right;
    353.                                 border: 1px solid transparent;
    354.                         }
    355.                        
    356.                         td.not_today_not_we:hover, td.today_not_we:hover, td.not_today_we:hover, td.today_we:hover
    357.                         {
    358.                                 cursor: pointer;
    359.                                 border: 1px solid white;
    360.                         }
    361.                        
    362.                         td.not_today_not_we, td.today_not_we
    363.                         {
    364.                                 background-color: black;
    365.                         }
    366.                        
    367.                         td.not_today_we, td.today_we
    368.                         {
    369.                                 color: grey;
    370.                         }
    371.                        
    372.                         td.today_we, td.today_not_we
    373.                         {
    374.                                 color: red;
    375.                         }
    376.                        
    377.                         tr.titre
    378.                         {
    379.                                 text-align: center;
    380.                                 color: white;
    381.                                 background-color: grey;
    382.                         }
    383.                        
    384.                         table
    385.                         {
    386.                                 width: 100%;
    387.                         }
    388.                        
    389.                         tr.deplace
    390.                         {
    391.                                 text-align: center;
    392.                         }
    393.                        
    394.                         tr.deplace span
    395.                         {
    396.                                 border: 1px solid transparent;
    397.                                 padding-left: 2px;
    398.                                 padding-right: 2px;
    399.                                 font-size: 10px;
    400.                                 margin: 0px;
    401.                                 color: white;
    402.                         }
    403.                        
    404.                         tr.deplace a.survol
    405.                         {
    406.                                 border: 1px solid transparent;
    407.                                 padding-left: 2px;
    408.                                 padding-right: 2px;
    409.                                 font-size: 10px;
    410.                                 margin: 0px;
    411.                                 color: white;
    412.                                 text-decoration: none;
    413.                         }
    414.                        
    415.                         a#fermer_calendrier
    416.                         {
    417.                                 color: red;
    418.                         }
    419.                        
    420.                         tr.deplace a.survol:hover
    421.                         {
    422.                                 cursor: pointer;
    423.                                 border: 1px solid white;
    424.                         }
    425.                        
    426.                         select, option
    427.                         {
    428.                                 background-color: black;
    429.                                 color: white;
    430.                                 font-family: sans-serif;
    431.                                 font-weight: bold;
    432.                                 font-variant: small-caps;
    433.                                 font-size: 10px;
    434.                                 margin: 0px;
    435.                                 border: 1px solid transparent;
    436.                         }
    437.                        
    438.                         option:hover
    439.                         {
    440.                                 background-color: black;
    441.                                 border: 1px solid white;
    442.                         }
    443.                 </style>
    444.         </head>
    445.         <body onload="javascript: get_mois(null, null, true, 'calendrier', 'bouton_calendrier');">
    446.                 <input type="button" name="afficher_calendrier" value="Calendrier" onclick="javascript: afficher_calendrier('calendrier', 'bouton_calendrier');" id="bouton_calendrier"/>
    447.                 <div class="calendrier" id="calendrier"></div>
    448.         </body>
    449. </html>

First / Previous / Next / Last / Page 1 of 1 (1 posteets)