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
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.