Un calendrier avec des input text qui controle les années bisextiles et les mois de 30 jours

Commenter

Contenu du snippet

J'en avis marre de voir des calendriers avec des pages de codes alors j'ai essayé de faire un truc simple.
J'ai mis 3 input de type text : 1 pour les jours, 1 pour les mois et un pour les années.
J'ai placé une function controldate qui vérifie si la date saisie est correcte.
- vérifie que l'input text jours a bien 30 jours et non 31 pour les mois de 30 jours,
- vérifie que les années bisextiles pour le mois de février.

Je l'ai testé plusieurs fois et ça marche.

Source / Exemple : 


<HTML>
<Script Language="Javascript">
<!--
function ControlDate() {
//année bisextile = 29 jours en février ex: 2004/4=501 reste 0 si le rest est <> 0 donc 28 jours
var anbis = document.calendrier.ans.value %4;
	if (document.calendrier.mois.value =="02"){
		if ((anbis != 0)&&(document.calendrier.Jours.value >28)){
			alert ("Le mois de février "+ document.calendrier.ans.value + " n'a que 28 jours!");
			Exit;
		}
	}
	if (document.calendrier.mois.value ==""){
		alert ("Vous devez indiquer le mois!");
		Exit;}
	if (document.calendrier.ans.value ==""){
		alert ("Vous devez indiquer l'année");
		Exit;}
	if ((document.calendrier.mois.value =="04")||(document.calendrier.mois.value =="06")||(document.calendrier.mois.value =="09")||(document.calendrier.mois.value =="11")){
		if (document.calendrier.Jours.value >"30"){
			if (document.calendrier.mois.value =="04"){
				alert ("Le mois d'avril n'a que 30 jours!");
				Exit;}
			if (document.calendrier.mois.value =="06"){
				alert ("Le mois de juin n'a que 30 jours!");
				Exit;}		
			if (document.calendrier.mois.value =="09"){
				alert ("Le mois de septembre n'a que 30 jours!");
				Exit;}	
			if (document.calendrier.mois.value =="11"){
				alert ("Le mois de novembre n'a que 30 jours!");
				Exit;}	
		}
	}	
}
-->
</Script>

<p align="center"> 
Pour tester la saisie d'une date entrez différentes dates<br>
Après avoir saisi une année cliquez n'importe où sur la page	
<form name='calendrier'> 
<table border=0 align='center'>
	<colgroup width='100'>
	</colgroup>
	<colgroup width='270'>
	</colgroup>
	<tr>
		<td>Indiquez la date </td>
		<td><select name='Jours' style='width:45px'> 
		</select> 
		<script> 
   		elem=document.getElementById('Jours'); 
   		for ( i = 1; i < 32; i++ ) { 
       		elem.options[i,i] = new Option(i,i); 
   		} 
		</script> 
		<SELECT size=1 name='mois' style='width:95px'>
		<OPTION value=''></OPTION>
		<OPTION value='01'>Janvier</OPTION>
		<OPTION value='02'>Février</OPTION>
		<OPTION value='03'>Mars</OPTION>
		<OPTION value='04'>Avril</OPTION>
		<OPTION value='05'>Mai</OPTION>
		<OPTION value='06'>Juin</OPTION>
		<OPTION value='07'>Juillet</OPTION>
		<OPTION value='08'>Août</OPTION>
		<OPTION value='09'>Septembre</OPTION>
		<OPTION value='10'>Octobre</OPTION>
		<OPTION value='11'>Novembre</OPTION>
		<OPTION value='12'>Décembre</OPTION>
		</SELECT>
		<SELECT name='ans' style='width:56px' onblur="ControlDate()">
		</select> 
		<script> 
   		el=document.getElementById('ans'); 
		var tpm = 0;
   		for ( i = 1; i < 12; i++ ) { 
		tmp = i + 1999;
       		el.options[i,i] = new Option(tmp,tmp); 
   		} 
		</script>
		</td>
	</tr>
</table>
<br>
Avez-vous testé des dates du genre 31 avril ou 31 juin ou encore 29 février 2003?
</form>
</HTML>

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_philippe)