Saisie d'une date correcte dans un formulaire

**breizhgen** · 05/08/2007, 23h02

Bonsoir,

est-il possible d'avoir un champ texte dans un formulaire, qui serait destiné à recevoir une date avec des / qui s'ajouterait automatiquement ?

Je m'explique : lorsque la personne tapera les deux premiers chiffres du jour "/" s'affichera tout seul puis les deux chiffres du mois ect...

Si oui comment faire ?

Si non, existe t'il un script permettant de verifier si la saisie sera bien sous cette form JJ/MM/AAAA ?

Merci

Aurore

**Bisûnûrs** · 05/08/2007, 23h09

FAQ Javascript.

**breizhgen** · 05/08/2007, 23h21

Merci beaucoup,

mais comment intégrer tout ça dans mon formulaire ?

Désolé mais je suis un peu nulle

Aurore

**ranell** · 05/08/2007, 23h46

bonsoir,

pour appliquer le script se trouvant dans la FAQ, je te propose de juste recuperer la valeur tapée dans le champ du formulaire . voici un simple exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

date_recupere=document.nom_formulaire.nom_champ.value

ainsi, tu pourra faire le test sur ta variable date_recupere .

ciao.

**breizhgen** · 05/08/2007, 23h51

merci à tous

**ranell** · 06/08/2007, 02h18

juste pour le code que tu as demandé, j'ai ce bout de code qui transforme une chaine tapé de longueur 8 de la forme ******** sous la forme **/**/****, a toi d'ajouter les controle necessaire pour verifier par exemple que c'est pas des lettres , ou que ca depasse la longueur 8, ou meme integrer le code de la FAQ, enfin à toi de voir.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<script language="JavaScript">
function verify()
{var newdate="";
if (document.formulaire.tape_date.value.length==8) 
	{for(i=0;i<8;i++)
		{	if((i==2)||(i==4)||(i==8)) newdate+="/";
  		    newdate+=document.formulaire.tape_date.value.charAt(i);
	       }
	}
document.formulaire.tape_date.value=newdate;
 
}
</script>
</head>
 
<body>
<form name="formulaire"  >
<input type="text" name="tape_date" onchange="verify()"/>
</form>
</body>

**breizhgen** · 06/08/2007, 09h10

Merci beaucoup Ranell, je vais essayer cela de ce pas.

Un grand merci

Aurore

**Bisûnûrs** · 06/08/2007, 09h15

Sinon tu peux regarder du côté des masques de saisie, mais je trouve que ça fait beaucoup de code pour pas grand chose.

Exemple :

http://digitalbush.com/projects/masked-input-plugin

**breizhgen** · 06/08/2007, 16h22

Bonjour,

très intéressant les masques de saisies, mais cela ne fonctionne pas, pourtant j'ai repris exactement le script de ce site.

Tant pis.

Merci quand même.

Aurore

**ranell** · 07/08/2007, 18h18

en effet ,moi aussi je trouve les masques de saisies trés interessants, si quelqu'un pouvait nous aider pour faire fonctionner le script du site ca serai sympa , merci bcp

**ranell** · 09/08/2007, 02h23

bonsoir,
j'ai cherché un peu dans le code source,il fallait tt juste importer des fichiers.
pour ceux qui sont interessé par les masques de saisies, voila le code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<body>
<script type="text/javascript" src="jquery.js"></script>
<script src="jquery.maskedinput-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
$.noConflict( ) 
jQuery(function($){
   $.mask.addPlaceholder("~","[+-]");
   $("#date").mask("99/99/9999");
   $("#phone").mask("(999) 999-9999");
   $("#tin").mask("99-9999999");
   $("#ssn").mask("999-99-9999");
   $("#product").mask("a*-999-a999",{placeholder:" ",completed:function(){alert("You typed the following: "+this.val());}});
   $("#eyescript").mask("~9.99 ~9.99 999");
});
</script>
<table>
<tr><td>Date</td><td><input id="date" type="text" tabindex="1"/></td><td>99/99/9999</td></tr>
<tr><td>Phone</td><td><input id="phone" type="text" tabindex="2"/></td><td>(999) 999-9999</td></tr>
<tr><td>Tax ID</td><td><input id="tin" type="text" tabindex="3"/></td><td>99-9999999</td></tr>
<tr><td>SSN</td><td><input id="ssn" type="text" tabindex="4"/></td><td>999-99-9999</td></tr>
<tr><td>Product Key</td><td><input id="product" type="text" tabindex="5"/></td><td>a*-999-a999</td></tr>
<tr><td>Eye Script</td><td><input id="eyescript" type="text" tabindex="6"/></td><td>~9.99 ~9.99 999</td></tr>
</table>
 
</body>

et les pieces jointes sont les .js requis.
a+

**breizhgen** · 09/08/2007, 09h46

Impeccable

Merci beaucoup Ranell

@+

Aurore

**jambonstar** · 10/08/2007, 15h06

Bonjour à tous,

Tout cela m'interesse au plus haut point.

J'ai tenter d'integrer ça dans mon code mais malheureusement, IE me dis que "$" est indéfini ...

Pas vous ?

Merci d'avance

**ranell** · 12/08/2007, 14h38

bonjour,
euh non j'ai aucun problème avec '§' , déjà j'ai mis le code qui fonctionne, mais IE me fesait ca juste avant que j'importe les autres *.js, enfin bon moi j'utilise IE7, je sais pas si c'est en rapport avec ce prob.
a+

**afrodje** · 31/08/2007, 09h35

Envoyé par jambonstar

Bonjour à tous,

Tout cela m'interesse au plus haut point.

J'ai tenter d'integrer ça dans mon code mais malheureusement, IE me dis que "$" est indéfini ...

Pas vous ?

Merci d'avance

Attention quand tu telecharge les 2 .js, fais attention à leurs formats, ils se telechargent en js.txt !!
Renomme les

**marinew** · 24/10/2007, 14h38

Bonjour,

J'essaie aussi d'utiliser le composant jQuery Masked Input, mais dans une application Java/JSF, grâce au composant <rich:jQery> de la librairie RichFaces 3.1.2.

De ce fait, il génère automatiquement le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
jQuery(document).ready(function() {
   jQuery('#dateNaissance').mask('99/99/9999');
});

En fait, je lui passe en paramètre les 2 infos suivantes : "mask('99/99/9999')" et sur "#dateNaissance" et il génère le code précédent en fonction de ces 2 paramètres.

Mais j'obtiens l'erreur suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

jQuery("#dateNaissance").mask is not a function

Il y a peut-être un rapport avec l'histoire du "jQuery.noConflict()", mais étant un peu perdue avec la syntaxe de définition des fonctions JavaScript, je n'arrive pas à voir ce qui ne va pas.
J'ai essayé de modifier le fichier "jquery.maskedinput-1.1.1.js" pour remplacer tous les "$" par des "jQuery", mais ce n'est pas mieux.

Une idée SVP ?
Merci d'avance.

**marinew** · 24/10/2007, 15h31

Bon, il semblerait que le problème soit lié au mode de chargement du fichier JavaScript. Je l'ai chargé "normalement dans l'entête <head> de ma page et ça fonctionne.
Si j'utilise un composant particulier de RichFaces (<a4j:loadScript>), ça ne fonctionne pas, alors que la page résultante est identique !

Saisie d'une date correcte dans un formulaire

JavaScript

Discussions similaires

Partager

Partager