month selector


<h2>Selecteur de mois en javascript / javascript month selector :</h2>
<style type="text/css">
#MoisExcep {
  border-collapse:collapse;
}
#MoisExcep td {
  border:1px solid gray;
  padding:2px;
  font-size:12px;
  cursor:pointer
}
</style>

<table id="MoisExcep">
<tr>
  <td id="M01">jan</td><td id="M02">fév</td><td id="M03">mar</td>
  <td id="M04">avr</td><td id="M05">mar</td><td id="M06">jui</td>
</tr><tr>
  <td id="M07">jui</td><td id="M08">âou</td><td id="M09">sep</td>
  <td id="M10">oct</td><td id="M11">nov</td><td id="M12">déc</td>
</tr>
</table>
<input type="text" name="copo_reglement_exception" id="copo_reglement_exception" value="copo_reglement_exception">

<script type="text/javascript">

var MoisExcep = "03/05/12";
document.getElementById("copo_reglement_exception").value = MoisExcep;

var Mois, TMoisExcep = MoisExcep.split("/");
for (var i=0; i<TMoisExcep.length; ++i) {
  Mois = TMoisExcep[i];
  if (Mois.length==1) Mois = "0"+Mois;
  document.getElementById("M"+Mois).style.backgroundColor = "red";
}
var tds = document.getElementById("MoisExcep").getElementsByTagName('td');
for (i=0; i<tds.length; ++i) {
  tds[i].onclick = function(){selMoisExc(this)}
}
function selMoisExc(td) {
  var input_copo_r = document.getElementById("copo_reglement_exception");
  var numMois = td.id.substr(1); // "M05" => "05"
  if (td.style.backgroundColor=="red") {
    var moisTxt = "/" + input_copo_r.value + "/" // "/xx/yy/../zz/"
    var numMoisSans0 = (numMois.charAt(0)=="0" ? numMois.substr(1) : numMois);
    var exp = new RegExp("/0?"+numMoisSans0+"/");
    moisTxt = moisTxt.replace(exp, "/"); // remplace "/<mois>/" par "/"
    moisTxt = moisTxt.substr(1, moisTxt.length-2); // vire les "/" de debut et fin
    input_copo_r.value = moisTxt
    td.style.backgroundColor="";
  } else {
    td.style.backgroundColor="red";
    input_copo_r.value += (input_copo_r.value!="" ? "/"+numMois : numMois);
  }
}
</script>