begin process at 2012 05 27 07:26:43
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Formulaire

 > SAISIE DE DATE DANS UN FORMULAIRE

SAISIE DE DATE DANS UN FORMULAIRE


 Information sur la source

Note :
8,5 / 10 - par 2 personnes
8,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Formulaire Niveau :Initié Date de création :28/05/2003 Date de mise à jour :29/05/2003 12:12:07 Vu :21 092

Auteur : mrshardax

Ecrire un message privé
Commentaire sur cette source (0)
Ajouter un commentaire et/ou une note

 Description

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

  • /*
  • 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 ;
  • }
/*
                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


 Sources de la même categorie

Source avec Zip Source avec une capture FORMULAIRE TABLEAU par vic511
Source avec Zip Source avec une capture FORMULAIRE DYNAMIQUE par Niidhogg
Source avec Zip Source avec une capture CONTRAINTE DE SAISIE SUR CHAMPS INPUT par ryosama
SELECTS DÉPENDANTS PRÉ-CHARGÉS D'UNE SEULE OPTION par phm
Source avec Zip Source avec une capture BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai

Commentaires et avis

Aucun commentaire pour le moment.

 Ajouter un commentaire




Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,671 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales