Blog du grouik

Edit, 13/11/2011 La version 0.3 du sélecteur de date est disponible sur ce billet. Je garde celui-ci publié juste parcequ'un blogueur n'aime pas mettre offline son travail, mais je vous invite à préférer la version 0.3 du sélecteur de dates.

Mise à jour du billet 2/11/2011: possibilité de déplier ou non le datePicker.

A la 15ème fois que j'ai du insérer un sélecteur de date, bah ça m'a gonflé de réécrire les boucles etc... pour donner ça:

Je me suis donc imposé d'écrire une function pour ne plus jamais avoir à le refaire, et tant qu'à coder, autant faire plus sexy. le voici en full javascript:

En mode plié (il suffit de passer la souris dessus pour pouvoir le dérouler).

En mode déplié en permanence

Il peut s'intégrer dans un formulaire web en méthode POST ou GET. Il contient un <input type="hidden" ... qui a pour valeur la date sélectionnée au format mySql: AAAA-MM-JJ.

Intégration / Code source:

Créez ou ajoutez ceci à votre CSS:

.dateTimePicker {width: 170px; font-size: 10px;}
.dateTimePicker table tr td{  	
  text-align: center;
  border: none;
}
.dateTimePicker table tr td.dayUnSelected{
  background-color: #A3AED3;
  cursor:  pointer;
}
.dateTimePicker table tr td.daySelected{
  color : #666;
  background-color: #DDDDDD;
  cursor:  pointer;
}
.dateTimePicker table tr th{
  color : #fff;
  background-color: #59627A;
  cursor:  pointer;
}

Créez ou ajoutez ceci au script javascript de votre page:

/*
 * Codé par Gnieark http://blog-du-grouik.tinad.fr/ Novembre 2011 version 0.2
 * Ditribué sans aucune garantie.
 * Vous pouvez faire ce que vous voullez de ce code, l'utiliser, le revendre,
 * le modifier etc... à condition de laisser intact le présent avertissement.
 */
function createElem(type,attributes)
{
    var elem=document.createElement(type);
    for (var i in attributes)
    {elem.setAttribute(i,attributes[i]);}
    return elem;
}
function dtPickerDeroule(tableId)
{
 racine=document.getElementById(tableId);
 //on parcours la table pour passer style="" à tous les tr
 var tr=racine.firstChild;
 while(tr=tr.nextSibling)
 { tr.setAttribute("style","");}
 
}
function dtPickerMasque(tableId)
{
 racine=document.getElementById(tableId);
 //on parcours la table pour passer style="display:none" à tous les tr
 var tr=racine.firstChild;
 while(tr=tr.nextSibling)
 { tr.setAttribute("style","display:none");}
}
 
function refreshTableJours(container,name,selectedDate,reduire)
{
  //purge
  container.innerHTML="";
 
  var leMois=selectedDate.getMonth();
  var lAnnee=selectedDate.getFullYear();
  var leJour=selectedDate.getDate();
  //locales sucks
  var lesJours= new Array('dim','lun','mar','mer','jeu','ven','sam');
  var lesJoursFull= new Array('dimanche','lundi','mardi','mercredi','jeudi','vendredi','samedi');
  var lesMois= new Array( 'janvier', 'fevrier','mars','avril','mai','juin','juillet','aout','septembre','octobre','novembre','decembre');
 
  /*Première ligne de titre: 3 cases: * un lien mois précédent  * la date sélectionnée  * un lien mois suivant */
  var trTitre=createElem("tr",{});
  container.appendChild(trTitre);
  var thPreviousMonth=createElem("th",{"onClick":"refreshTableJours(document.getElementById('" + container.getAttribute("id") + "'),'"+ name + "', new Date(" + lAnnee + "," + (leMois -1) + "," + leJour + "));"});
  thPreviousMonth.innerHTML="<";
  trTitre.appendChild(thPreviousMonth);
  var thAfficheDate=createElem("th",{"colspan":5});
  thAfficheDate.innerHTML=lesJoursFull[selectedDate.getDay()] + " " + leJour + " " + lesMois[leMois] + " " + lAnnee;
  //Au passage on créé un input type=hidden qui prend la date au format mySql. Cela permettra d'intégrer
  //le datetimePicker à des formulaires type POST ou GET
  var inputHidden=createElem("input",{"type":"hidden", "name":name,"value": lAnnee + "-" + (leMois + 1) + "-" + leJour});
  thAfficheDate.appendChild(inputHidden);
  trTitre.appendChild(thAfficheDate);
  var thNextMonth=createElem("th",{"onClick":"refreshTableJours(document.getElementById('" + container.getAttribute("id") + "'),'"+ name + "', new Date(" + lAnnee + "," + (leMois + 1) + "," + leJour + "));"});
  thNextMonth.innerHTML=">";
  trTitre.appendChild(thNextMonth);
 
  var unDuMois=new Date(lAnnee,leMois,1);
  //la date du dernier dimanche (valeur 0 pour les jours de la semaine) du mois précédent sert de départ au calendrier:
  var startDate=new Date(unDuMois.getFullYear(), unDuMois.getMonth(), unDuMois.getDate() - unDuMois.getDay());
 
  //si le dtPicker est paramétrer pour etre réduit par défaut, les lignes suivantes seront display:false;
  if(reduire){
    var style ="display:none;"
  }else{
    var style="";
  }
  //Ligne de titre 2: le nom des jours
  var trDays=createElem("tr",{"style":style});
  container.appendChild(trDays);
  for (var i=0; i<7;i++)
  {
    var tdLeJour=createElem("td",{});
    tdLeJour.innerHTML=lesJours[i];
    trDays.appendChild(tdLeJour);
  }
  var increment=0;
  //6 lignes
  for(var week=0; week<6; week++)
  {
    var trDates=createElem("tr",{"style":style});
    container.appendChild(trDates);
 
    for (var dayNumber=0; dayNumber<7;dayNumber ++)
    {
	var currentDate=new Date(startDate.getFullYear(),startDate.getMonth(), startDate.getDate() + increment);
	if ((currentDate.getDate() == leJour)&&(currentDate.getMonth() == leMois)){
	  var tdclass="daySelected";
	}else{
	  var tdclass="dayUnSelected";
	}  
	var tdJour=createElem("td",
			      {"onClick":"refreshTableJours(document.getElementById('" + container.getAttribute("id") + "'),'"+ name + "', new Date(" + currentDate.getFullYear() + "," + currentDate.getMonth() + "," + currentDate.getDate() + "));",
				    "class": tdclass ,"title":lesJours[currentDate.getDay()] + " " + currentDate.getDate() + "-" + (currentDate.getMonth() + 1) +  "-" + currentDate.getFullYear()
 
			      });
	tdJour.innerHTML=currentDate.getDate();
	trDates.appendChild(tdJour);
	increment++;
    }
  }
 
}
function dateTimePicker(name,defaultDate, reduire)
{
  //se créer un container
  document.write('<div id="datetimePicker' + name + '" class="dateTimePicker"></div>');
  var racine=document.getElementById('datetimePicker' + name);
  if(reduire){
    var tableJours=createElem("table",{
      "id": "datetimePickerTable" + name , 
      "onMouseOver": "dtPickerDeroule('datetimePickerTable" + name +"');",
      "onMouseOut": "dtPickerMasque('datetimePickerTable" + name + "');"
      });
  }else{
    var tableJours=createElem("table",{"id": "datetimePickerTable" + name });
  }
 
  racine.appendChild(tableJours);
  refreshTableJours(document.getElementById("datetimePickerTable" + name),name,defaultDate,reduire);
}

Insérer le datetime picker dans votre page

Là où vous le voulez, appellez le comme ceci:

<script type="text/javascript">
<!--
 dateTimePicker("MADATE",new Date(),true);
-->
</script>

• "MADATE" sera le nom ("name") de l'input qui contient la date. Modifiez le selon votre stratégie de nommage des variables.^[1] Si vous mettez plusieurs datepicker sur la même page, ce parametre doit être unique.
• /!\ Il y a un piège sur les mois. Ils sont comptés de 0 à 11 en javascript. Genre si vous l'appellez en PHP, il faut soustraire 1 au numéro du mois. Exemple pour que par défaut ce soit la date du jour:
• Le parametre tru ou false indique s'il doit être déplié en permanence (false) ou se dérouler lorsque la souris est passée dessus.

echo '<div><script type="text/javascript">
		<!--
		  dateTimePicker("plop",new Date('.date("Y").', '.(date("n") - 1).', '.date("j").'),true);
		-->
		</script></div>';

Enfin ceci dit le plus simple pour la date du jour c'est d'utiliser la function javascript Date() sans paramètres; comme ceci:

[html]
<script type="text/javascript">
<!--
  dateTimePicker("plop",new Date(),true);
-->
</script>

Conclusion

Je suis sûr qu'on en trouve plein de codes dans ce genre. J'adore réinventer l'eau chaude. Mais ceci dit, je ne vais pas galérer à trouver comment l'intégrer #CestMoiQuiLaFait .

Paradoxalement la date sous forme de liste déroulantes (exemple au début de ce billet), est plus pratique à utiliser sur les petits écrans tactiles (smartphones). Le "datetimepicker" interdit d'avoir de gros doigts.

Non, ce billet n'est pas périmé avant même sa publication. la balise HTML5 <input type="datetime-local"/> a du mal à pointer son nez sur les navigateurs.