Saisie de date dans un formulaire

Commenter

Contenu du snippet

Ce script affiche des comboboxs de saisie de date dont le nombre de jour est mis a jour dynamiquement en fonction de l'annee et du mois.

Cette script ressort une date formatée du type jj/mm/aaaa dans une variable nomée.

Le source suivant est a copier/coller dans un fichier nommé Date.js (ouvrez un fichier texte et renommez le en "Date.js").

Source / Exemple : 


/*
                Fichier "Date.js"

	Author : Mr Shardax
	Date   : terça-feira, 27 de Maio de 2003

	Cette fonction affiche des cases de saisie de date mis a jour dynamiquement en fonction de l'année et du mois.

	La syntaxe d'appel est la suivante : 

	<script language='Javascript' src='Date.js'>
	A ajouter en debut de page (entre les balises <HEAD></HEAD>). Si le fichier n'est pas dans le même répertoire que votre page, modifiez la variable 'src'.

	Et cette ligne à ajouter à l'INTERIEUR d'un formulaire HTML (entre les balises <form></form>) là ou vous voulez voir apparaitre les champs de saisie de date :

	<script language='Javascript'>document.write(displayDate(nomDuFormulaire,nomDeLaDate) ;</script> 
	
	ou 'nomDuFormulaire' est le nom de votre formulaire et nomDeLaDate est le nom de la variable (type chaine de charactère) qui contiendra la date formatée (de la façon suivante : jj/mm/aaaa) à recupérer après envoie du formulaire (methode GET ou POST)

	Pour tout commentaire : mr_shardax@voila.fr

	Note : les annees ne peuvent etre que positives.


  • /


function displayDate(nameOfForm,nameOfField) {

	var months = new Array("January", "February", "Mars", "April", "May", "June", "July", "August", "September", "October", "November", "December") ;

	var HTMLCode = "" ; 

	var yearValue  = "document."+nameOfForm+"."+nameOfField+"Year.value" ;
	var monthValue = "document."+nameOfForm+"."+nameOfField+"Month.value" ;
	var dayValue   = "document."+nameOfForm+"."+nameOfField+"Day.value" ;
		
	var func = "Javascript: document."+nameOfForm+"."+nameOfField+".value = \"\"+"+dayValue+"+\"/\"+"+monthValue+"+\"/\"+"+yearValue+"+\"\";" ;

	// Field of Day
	HTMLCode += " Day : <select name='"+nameOfField+"Day' onChange='" +func+"'>" ;		
	for(i=0 ; i<numberOfDays(monthValue,yearValue) ; i++) {
		HTMLCode += "<OPTION VALUE='" +(i+1)+ "'>" +(i+1)+ "</OPTION>" ;
	}
	HTMLCode += "</select>" ;

	// Field of Month
	HTMLCode += " Month : <select name='"+nameOfField+"Month' onChange='" +func+" "+modifyDayListe(nameOfForm,nameOfField)+"'>" ;
	for(i=0 ; i<12 ; i++) {
		HTMLCode += "<OPTION VALUE='" +(i+1)+ "'>" +months[i]+ "</OPTION>" ;
	}
	HTMLCode += "</select>" ;
		
	// Field of Year
	HTMLCode += "Year : <input name='"+nameOfField+"Year' size=4 maxlength=4 onBlur='" +func+" "+modifyDayListe(nameOfForm,nameOfField)+" "+controlYear(nameOfForm,nameOfField)+"'>" ;

	// Hidden Field : use to store the formatted date.
	HTMLCode += "<INPUT type=hidden name="+nameOfField+">"

	return HTMLCode ;
}

function numberOfDays(m,y) {

	// If we are in february ....
	if(m==2) { 
		// ... and a leap-year 
		if(y%4 == 0){return 29 ; }
		// ... else
		return 28 ;
	}
		
	// Otherwise, for the month of April, June, September and November
	if(m==4 || m==6 || m==9 || m==10) { return 30 ; }
		
	// For the others
	return 31 ;
}

function controlYear(form,field) {
	var HTMLCode ;
	
	// generate code in order to control if the year is numeric
	
	HTMLCode =	"var c ;\n"
			  + "for(i=0 ; i<document."+form+"."+field+"Year.value.length ; i++){ \n" 
			  +	"  c = document."+form+"."+field+"Year.value.charAt(i) ;\n"
			  + "  if(c<\"0\" || c>\"9\") { \n" 
			  + "    alert(\"Year must be a numeric.\") ; \n"
			  + "    document."+form+"."+field+"Year.value = \"\" ; \n"
			  + "  }\n"
			  + "} ;\n" ;
			  
	return HTMLCode ; 
}

function modifyDayListe(form,field) {

	// generate code which generate the code to display the combobox which contain days

	// Save the value of the selected index
	var HTMLCode = "var x = document."+form+"."+field+"Day.selectedIndex ; " ;

	// delete old liste
	HTMLCode += "document."+form+"."+field+"Day.options.length=0 ;\n" ;

	// insert all the days
	HTMLCode += "for(i=0;i<numberOfDays(document."+form+"."+field+"Month.value,document."+form+"."+field+"Year.value) ; i++) {\n";
	HTMLCode += "o=new Option((i+1),(i+1));\n" ;
	HTMLCode +=	"document."+form+"."+field+"Day.options[document."+form+"."+field+"Day.options.length]=o;\n" ;
	HTMLCode += "}" ;
		
	// re-select the index
	HTMLCode += " document."+form+"."+field+"Day.selectedIndex = x ; " ;
	
	return HTMLCode ;
}

Conclusion :


Le seul petit inconvenients connu est un petit saut de la date a la perte de focus de l un des champs (aucun probleme, c juste pas tres "esthetique" !)

Pour les questions : mr_shardax@voila.fr

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.