Un champ de saisie de date

Soyez le premier à donner votre avis sur cette source.

Vue 11 842 fois - Téléchargée 983 fois

Description

Salut à tous je viens de créer une classe qui permet de créer un champ de type input qui peut permettre de saisir les dates.
J'attends avec impatience vos suggestions et conseils étant donné que je suis débutant dans le domaine et que c'est mon premier source.

Source / Exemple :


/****************************************

  • Champ de saisie de date *
                                                                                  • /
/**
  • idDiv = id du bloc dans lequel le champs sera créé (div,span,td)
  • classe = la classe css des champs jour,mois année
  • tabInd = ordre de tabulation dans le formulaire
  • valeur = valeur par défaut (format jj/mm/aaaa)
  • /
function inputdate(idDiv,classe,tabInd,valeur) { this.id=idDiv; this.nom=idDiv; this.cl=classe; this.ti=tabInd; this.value = valeur; this.parent=document.getElementById('__'+idDiv+'__'); this.parent.innerHTML='<span id=""></span><span id="'+this.id+'sj"></span><span id="'+this.id+'sx"></span><span id="'+this.id+'sm">' +'</span><span id="'+this.id+'sy"></span><span id="'+this.id+'sa"></span><span id="'+this.id+'spr"></span>'; this.afficher(); } inputdate.prototype.afficher=function() { tableau=Array("jour","sl1","mois","sl2","annee"); tabl=Array("j","x","m","y","a"); tablarg=Array("15.8:2","5:1","15.8:2","5:2","31.8:4"); d=this.id; leChamp=document.createElement("input"); with(leChamp){ type="hidden"; id=this.id; name=this.id; } this.parent.replaceChild(leChamp,document.getElementById(this.id+'spr')); //this.innerHTML=''; for(i=0;i<tableau.length;i++){ elmtcourant=tableau[i]; eval(tableau[i]+"=document.createElement(\"input\");"); eval(tableau[i]+".id='"+this.id+"_"+tabl[i]+"';"); eval(tableau[i]+".name='"+this.id+"_"+tabl[i]+"';"); eval(tableau[i]+".className='"+this.cl+"';"); tlar=tablarg[i].split(":"); with(eval(tableau[i]+".style")){ border="0px"; marginBottom="1px"; width=tlar[0]+"px"; height='100%'; } eval(elmtcourant+".maxLength="+tlar[1]); eval(elmtcourant+".onkeyup = function (){ /*alert('"+this.id+"');*/ keyup('"+this.id+"','"+this.id+"_"+tabl[i]+"')};"); eval(elmtcourant+".onblur = function () { /*keyup(d,d+'_"+tabl[i]+"');*/ document.getElementById('"+this.id+"').value=document.getElementById('"+this.id+"_j').value+'/'+document.getElementById('"+this.id+"_m').value+'/'+document.getElementById('"+this.id+"_a').value}"); this.parent.replaceChild(eval(tableau[i]),document.getElementById(this.id+'s'+tabl[i])) ; } jour.tabIndex=this.ti; v =new String(this.value); if(v.length == 10){ jour.value = v.substr(0,2); mois.value = v.substr(3,2); annee.value = v.substr(6,4); } sl1.value=sl2.value="/"; sl1.disabled=sl2.disabled=true; sl1.style.color=sl2.style.color="black"; document.getElementById(this.id).value = this.value; } inputdate.prototype.changer = function(val) { dt = this.id; tab_val = val.split('/'); document.getElementById(dt+'_j').value = tab_val[0]; document.getElementById(dt+'_m').value = tab_val[1]; document.getElementById(dt+'_a').value = tab_val[2]; document.getElementById(dt).value = val; } function keyup(p,elmtid){ /* D'abord puisque nous controlons les champ sur onkeyup,nous vérifions d'abord si le nombre de caractère de chaque champ est atteint et que le caractère saisi est bien un entier. Quand cette condition est vérifier la valeur de ce champ est incorrecte pour les cas suivants:
  • /
elmt=document.getElementById(elmtid); if(elmt.value.length==elmt.maxLength){ val_j=parseInt(document.getElementById(p+"_j").value,10) val_m=parseInt(document.getElementById(p+"_m").value,10) val=parseInt(elmt.value,10); if( (isNaN(elmt.value)) | (elmt.id==p+"_j" & (val<1 | val>31)) | (elmt.id==p+"_m" & (val<1 | val>12 | (val==2 & val_j>29) | ((val==4 | val==6 | val==9 | val==11) & val_j==31))) | (elmt.id==p+"_a" & (val_j==29 & val_m==2 & (val % 4)!=0)) ){ elmt.value=''; elmt.focus(); }else{ if(elmt.id==p+"_j") document.getElementById(p+"_m").focus(); else if (elmt.id==p+"_m") document.getElementById(p+"_a").focus(); else document.getElementById(p+"_j").focus(); } } //Effacement des champs if(window.event && (getKeyCode(window.event) == 8)){ if(elmt.value=='' & elmt.id==p+'_a'){ document.getElementById(p+'_m').focus(); document.getElementById(p+'_m').value=document.getElementById(p+'_m').value; //Pour éviter la sélection de la valeur contenu dans le champs }else if(elmt.value=='' & elmt.id==p+'_m'){ document.getElementById(p+'_j').focus(); document.getElementById(p+'_j').value=document.getElementById(p+'_j').value; } } } //Fonction renvoyant le code de la touche appuyée lors d'un événement clavier function getKeyCode(evenement) { for (prop in evenement) { if(prop == 'which') { return evenement.which; } } return event.keyCode; }

Conclusion :


Tester sous Internet Explorer ( sauf les styles css)
et Mozilla Firefox

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
197
Date d'inscription
mardi 18 février 2003
Statut
Membre
Dernière intervention
29 avril 2009
2
Si tu veut utiliser des fonctions mathématique , cast tes variable a l'aide de parseInt, parseFloat ... ;-)
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
Merci beaucoup pour cet éclercissement ;)

Personnellement, je n'utilise eval() que pour les additions pour éviter justement que les valeurs ne soit que rajouté à l'autre.

Il est vrai ici que c'est assez étrange '^^

A+

JDMCreator
Messages postés
197
Date d'inscription
mardi 18 février 2003
Statut
Membre
Dernière intervention
29 avril 2009
2
JDMCREATOR :-)

si tu veux effectuer des calculs , fait le directement auprès des valeurs concernées , en l'occurrence ici elle ne servent qu'a concaténé des valeurs de façon assé étrange :

# eval(tableau[i]+"=document.createElement("input");");
# eval(tableau[i]+".id='"+this.id+"_"+tabl[i]+"';");
# eval(tableau[i]+".name='"+this.id+"_"+tabl[i]+"';");
# eval(tableau[i]+".className='"+this.cl+"';");

plutôt qu'utiliser innerHTML sur lequel on a pas la main si une fois un élément insérer veut être modifié ( enfin si mais pas directement pendant la génération ....... ) il vaut mieux utiliser le dom pour créer des noeuds texte ou même les élément html de cette source :)

Autre point , on utilise ici directement le onclick , donc on ne peut gérer d'autres actions sur cet évènement ...

j'espère avoir été assez constructif :)
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
5
Si je comprens bien ton message Mickaelpfr, la fonction eval() sert à estimer la valeur (en nombre) d'une chaîne. C'est particulièrement utile pour additionner, soustraire, multiplier et diviser les valeurs de par exemple deux champs "input".

Aussi, petite question, pourquoi innerHTML est-il à proscrire ? (Je l'utilise assez souvent)

Aussi, bonne source mais chez moi, la date ne rentre pas complétement dans le rectangle ;)

merci

JDMCreator
Messages postés
197
Date d'inscription
mardi 18 février 2003
Statut
Membre
Dernière intervention
29 avril 2009
2
Bonjour , idée de base inintéressante pour formater certain champs :-)
mais le code est a revoir => innerHTML a proscrire
eval ????????

de plus lorsque l'on appuis sur des lettres le focus se balade dans le champs on ne sais pas pourquoi ...

L'idée de classe est bonne mais il faut revoir la source.

Bon courage

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.