Des select pour saisir une date Avec vérification de validité de cette date.

Une question sur le forum et zou... un script :) Comme d'habitude, je suis à l'affût des questions qui passent sur le forum. Et si l'une d'elles me permet de m'amuser un peu, alors j'en fais profiter la communauté. Cette fois, il s'agissait d'une demande de saisie de date. Il y avait quatre listes déroulantes : une pour les jours de la semaine une pour le jour du mois une pour le libellé du mois une pour l'année Alors, je me suis dit, allons-y.... Et voilà le script ci-dessous....

Principe

L'astuce utilisée est simple. Une date est créée avec les valeurs sélectionnées dans les listes déroulantes et c'est cette date qui va être comparée avec les valeurs sélectionnées. Vous me suivez ? Pas facile :) de comprendre... Vous allez me dire : "tu crées une date avec les valeurs sélectionnées donc en les comparant avec les valeurs sélectionnées, ça sera forcément bon !". Et pourtant, ce n'est pas forcément le cas... Exemple : L'utilisateur sélectionne «Dimanche 29 février 2006» !!! Le fait de calculer une date avec ces valeurs va me donner «Mercredi 1er mars 2006». Alors, vous me suivez maintenant....

Fonctions utilisées

Deux fonctions sont utilisées dans ce module. La première sert à générer les listes déroulantes. La liste déroulante des libellés des jours de la semaine. La liste déroulante des numéros de jour, de 1 à 31. La liste déroulante des libellés des mois. La liste déroulante des années (là, j'ai pris les dix dernières années, mais cela peut bien sûr être adapté à chaque cas). La deuxième sert à vérifier les valeurs sélectionnées. Après avoir créé une date avec les valeurs sélectionnées dans les listes déroulantes, elle les compare une à une. Elle affiche une boîte de dialogue qui indique soit «Date correcte», soit les éléments erronés. Bien sûr, là encore, ce traitement final pourra être adapté en fonction de vos besoins.

Le JavaScript

<script language="javascript"> // Denis Blomme - DB77 aujour=new Date(); // Pour générer les années // table des libellés des jours de la semaine jour=new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"); // table des libellés des mois mois=new Array("Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août", "Septembre","Octobre","Novembre","Décembre"); // Création des select  function creerselect(){ // Création de la liste déroulante des libellés des jours document.write("<select name='jour'>"); for(i=0;i<jour.length;i++){    document.write("<option value="+i);    if(aujour.getDay()==i){document.write(" selected");}    document.write(">"+jour[i]+"</option>"); } document.write("</select>"); // Création de la liste déroulante des numéros des jours document.write("<select name='jj'>"); for(i=1;i<=31;i++){    document.write("<option value="+i);    if(aujour.getDate()==i){document.write(" selected");}    document.write(">"+i+"</option>"); } document.write("</select>"); // Création de la liste déroulante des libellés des mois document.write("<select name='mm'>"); for(i=0;i<=11;i++){    document.write("<option value="+i);    if(aujour.getMonth()==i){document.write(" selected");}    document.write(">"+mois[i]+"</option>"); } document.write("</select>"); // Création de la liste déroulante des 10 années avant et après annee=aujour.getYear();if(annee<1900){annee=annee+1900;} document.write("<select name='aa'>"); for(i=-10;i<=10;i++){    document.write("<option value="+(annee-i));    if(i==0){document.write(" selected");}    document.write(">"+(annee-i)+"</option>"); } } // Vérification des select function verif(){ // On crée une date avec les jj/mm/aa saisis testDate=new Date(document.frm.aa.value,document.frm.mm.value,document.frm.jj.value); mess=""; // Est-ce que le libellé du jour correspond à celui de la date créée ? if(testDate.getDay()!=document.frm.jour.value){mess=mess+"\nJour de la semaine";} // Est-ce le numéro du jour correspond à  celui de la date créée ? if(testDate.getDate()!=document.frm.jj.value){mess=mess+"\nJour";} // Est-ce le numéro du mois correspond à celui de la date créée ? if(testDate.getMonth()!=document.frm.mm.value){mess=mess+"\nMois";} // Y a-t-il eu des erreurs ? if(mess!=""){alert("Erreur :"+mess);}else{alert("Date correcte");} // Et si on corrigeait automatiquement... // On prend le libellé du jour de la date créée document.frm.jour.options[testDate.getDay()].selected=true; // On prend le numéro du jour de la date créée document.frm.jj.options[testDate.getDate()-1].selected=true; // On prend le numéro du mois de la date créée document.frm.mm.options[testDate.getMonth()].selected=true; } </script> <form name=frm> <script language="javascript">creerselect();</script> <input type="button" value="tester" onClick="verif()"> </form>

Nota Bene

Il est bien sûr possible de sauvegarder ce script dans un fichier .js et de l'appeler avec la syntaxe habituelle : <script language="JavaScript" src="nomduscript.js"></script> Puis d'appeler la fonction dès que vous en avez besoin sur une page...