Controle saisie champ

Version imprimable

Bonjour
J'ai trouvé un script qui permet de faire un contrôle sur la saisie d'une date dans un champ (dd/mm/aaaa), je voudrais l'adapter mais j'ai peu de connaissance en javascript. Si quelqu'un pourrait m'aider à obtenir le format dd/mm/aaaa-hh:ss

Voici le code javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Date Validation and Format Javascript
// copyright 11th June 2007 by Stephen Chapman
// permission to use this Javascript on your web page is granted
// provided that all of the code in this script (including these
// comments) is used without any alteration
// you may swap the 12 and 31 around if you want mm/dd instead of dd/mm
 
function dtval(d,e) {
var pK = e ? e.which : window.event.keyCode;
if (pK == 8) {d.value = substr(0,d.value.length-1); return;}
var dt = d.value;
var da = dt.split('/');
for (var a = 0; a < da.length; a++) {if (da[a] != +da[a]) da[a] = da[a].substr(0,da[a].length-1);}
if (da[0] > 31) {da[1] = da[0].substr(da[0].length-1,1);da[0] = '0'+da[0].substr(0,da[0].length-1);}
if (da[1] > 12) {da[2] = da[1].substr(da[1].length-1,1);da[1] = '0'+da[1].substr(0,da[1].length-1);}
if (da[2] > 9999) da[1] = da[2].substr(0,da[2].length-1);
dt = da.join('/');
if (dt.length == 2 || dt.length == 5) dt += '/';
d.value = dt;
}

code HTML :

Code:

1
2
3
4
5
6
7
<form name="myform">
<div>
<label for="mydate">Enter a date (dd/mm/ccyy)</label>
<input type="text" id="mydate" name="mydate" size="10" maxlength="10"
onkeyup="dtval(this,event)">
</div>
</form>

Merci de votre aide

Salut,

Je ne comprends pas l'utilité de cette fonction.
Si le but est de vérifier la validité d'une date, elle est horrible ! Ça fait vraiment n'importe quoi.

En voici une autre, qui te dira simplement si la date est au format jj/mm/aaaa-hh:mm:ss et réaliste (pas de 75ème seconde), sans chercher à la modifier.
La seule modification qu'il s'autorise à faire, c'est de rajouter les zéros non-significatifs.
Dans la vérification du jour, il prend en compte le mois, ainsi que les années bissextiles.
T'as de la chance que je m'ennuie en classe :mrgreen:

Code:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<script type="text/javascript">
 
// ajoute les zéros non-significatif, si besoin
function addZero(nbre){
	if(nbre<10 && nbre.length<2)
		nbre="0"+nbre;
	return nbre;
}
 
// calcul le nombre de jours par mois
function jours(mois, annee){
 
	var jMax=31; // 31 par défaut
 
	switch(mois){
		case "4": case "6": case "9": case "04": case "06": case "09": case "11": // mois à 30 jours
			jMax=30;
		break;
		case "2": case "02": // février
			if(annee%4==0 && annee%100!=0 || annee%400==0) // année bisextile ?
				jMax=29;
			else
				jMax=28;
	}
 
	return jMax;
}
 
// test la date
function dateValidation(dateTime) {
 
	// test le format
	if(!dateTime.match(/\d{1,2}\/\d{1,2}\/\d{4}-\d{1,2}:\d{1,2}:\d{1,2}/))
		return false;
 
	// récupère le jour, mois, année, heure, minute et seconde
	var date=dateTime.split("-")[0];
	var time=dateTime.split("-")[1];
 
	var date=date.split("/");
	var time=time.split(":");
 
	// vérifie que les nombres ne soient pas trop grands
	if(date[0]>jours(date[1], date[2]) || date[1]>12 || time[0]>23 || time[1]>59 || time[2]>59)
		return false;
 
	// ajoute les zéros non-significatifs
	date[0]=addZero(date[0]);
	date[1]=addZero(date[1]);
	time[0]=addZero(time[0]);
	time[1]=addZero(time[1]);
	time[2]=addZero(time[2]);
 
	// retourne la date complète
	return date.join("/")+"-"+time.join(":");
}
</script>
 
<input id="date" value="12/11/2012-15:45:58" />
<input type="button" value="calc" onclick="
	var input=document.getElementById('date');
	var result=dateValidation(input.value);
	result
	?
		input.value=result
	:
		alert ('Attention, il y a un problème.\nPeut-être que le format n\'est pas respecté (jj/mm/aaaa-hh:mm:ss)\nOu qu\'un nombre est trop élevé (il y a au maximum 28 à 31 jours (selon le mois), 12 mois, 23 heures, 59 minutes et 59 secondes)\nIl est possible d\'omettre un chiffre pour tout (les zéros seront alors ajoutés avant le nombre), sauf pour la date. Car il est impossible de savoir s\'il s\'agit de 1910 ou de 2010. Pour les dates inférieures à l\'an mille, complétez avec des zéros (0256 pour l\'an 256)')" />

Code:

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
27
28
29
30
 
 
<form id="quand" action="">
	<div>
		<strong>
			Saisissez une date de la forme aaaa-mm-jj hh:mm
		</strong>
 
		<input name="a" type="text" size="1" maxlength="4" /> - 
		<input name="m" type="text" size="1" maxlength="2" /> - 
		<input name="j" type="text" size="1" maxlength="2" /> || 
		<input name="h" type="text" size="1" maxlength="2" /> : 
		<input name="min" type="text" size="1" maxlength="2" /> 
		<input type="button" value="ok" onclick="verif(f['a'].value,f['m'].value,f['j'].value,f['h'].value,f['min'].value)" /> 
	</div>
</form>
 
<script type="text/javascript">
 
document.forms["quand"].style.display="block";
var f=document.forms["quand"].elements;
 
function verif(a,m,j,h,min){ 
	m-=1;
	d=new Date(a,m,j,h,min);
	var rep= (d.getFullYear()!=a || d.getMonth()!=m || d.getHours()!=h) ? "date invalide" : "date valide";
	alert(rep); 
} 
 
</script>

19/11/2012, 18h45
grand_dup

Bonsoir merci pour vos réponses.
L'utilité de cette fonction est une aide à la saisie.

Cela évitera de saisir des dates sous la forme :

19-11-2012 8h30
19.11.2012 08h30
19.11.2012 08:30:27
etc...

et de forcer la saisie de la date sous la forme

19/11/2012-08:30

A l'arrache :
Code:

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 function check(field) { var isValid = validateDateAndTime(field.value); if(isValid) { formatField(field); } } function validateDateAndTime(date) { var n = date.match(/(\d+)/g); var newDate = new Date(n[2], n[1]*1-1, n[0], n[3]*1, n[4]*1); return newDate.getFullYear()==n[2]*1 && newDate.getMonth()+1==n[1]*1 && newDate.getDate() == n[0]*1 && newDate.getHours()==n[3]*1 && newDate.getMinutes()==n[4]*1; } function formatField(field) { var mask = "%/%/%-%:%"; field.value.replace(/(\d+)/g, function(a){ mask = mask.replace('%', leadZero(a*1)); }); field.value=mask; } function leadZero(val) { return val<10 ? '0'+val : val; }
Code:

1 2 <input type="text" value="19-11-2012 8h30" onblur="check(this)">
Voici le lien vers l'exemple
http://jsbin.com/asicap/2/edit

Donc qu'est ce que j'ai fait, c'est simple, j'ai une fonction check, qui valide si j'ai bien une date correcte avec des heures et minutes correctes.
La technique est simple, il suffit juste de récupérer tous les groupes de chiffre de la chaine de caractères et ensuite instancier une nouvelle date à partir de ces paramètres : new Date(year, month, date, hours, minutes).

Ensuite il suffit simplement tester chaque valeur d'origine avec les valeurs de l'objet Date, car oui, Date est intelligent, si vous lui mettez new Date (2000, 23, 40), il recalculera la date car le 40e jours du 23eme mois de l'année pour lui ça n'existe pas, et il calcule. Donc donc dans ce cas année, mois et jours deviennent faux et la fonction retourne false.

Ensuite si la date est valide, alors je la reformate en fonction d'un mask, j'utilise pour cela une méthode vieille comme le monde, un replace de la chaine avec une regexp et avec une fonction à l'intérieure. Dans cette fonction je remplace simplement le même terme qui se trouve dans mask à chaque fois avec une valeur différente. et oui, un replace simple ne fonctionne qu'une fois, quand on veut remplacer tous les mêmes termes d'une string on passe par une regexp.

27/11/2012, 09h28
grand_dup

Merci Arnogues pour ton aide
Ton code réponds à ce que j'attendais comme résultat.