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

Soyez le premier à donner votre avis sur cette source.

Snippet vu 26 520 fois - Téléchargée 31 fois

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

Ajouter un commentaire Commentaires
Messages postés
89
Date d'inscription
mercredi 9 mars 2005
Statut
Membre
Dernière intervention
7 novembre 2005

Un script comme je les aimes, alliant simplicité et efficacité!
Par contre, c'est dommage que ne marche pas sous Moz/Fx...
Les SELECT des jours et des annees sont vides...
Console JavaScript:
=>Erreur : elem has no properties
Fichier Source : file:///c:/WINDOWS/Bureau/calendrier.html
Ligne : 55
=>Erreur : el has no properties
Fichier Source : file:///c:/WINDOWS/Bureau/calendrier.html
Ligne : 80
Bonne source quand meme ;)
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
32
ah, déjà plus sympatique que
la dernière source de ce style
qui a été postée.
2 remarques :
°et si on modifie le mois et/ou le jour
après avoir choisi l'annnée ?
pas de contrôle ?
°le contrôle de l'année bissectile
n'est pas tout à fait correct :
bissectile si année divisible par 4
mais non divisible par 100 ( sauf
si elle est divisible par 400 ).
1900 n'était pas bissectile, 2000 oui.
if ( (aa%4 == 0 && aa%100 != 0) ||
( aa%400 == 0) )
@+

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.