Comment vérifier si un champ qui contient la date et l'heure au format [Fait]

**Auteur** · 17/11/2012, 21h48

http://javascript.developpez.com/faq...erifFormatDate

Je remplace les appels à eval() par un parseInt(nombre, 10);. Je précise la base 10 car parseInt() va considérer que si la chaine de caractère débute par un 0, la valeur est en base 8.
J'ai donc remanié le code en ce sens.
La fonction traite les dates au format américain c'est à dire yyyy-mm-dd hh:mm:ss. Je propose en plus une fonction qui traite les dates au format jj-mm-aaaa hh:mm:ss
La fonction date.getYear() retourne, selon le navigateur, une année sur 2 ou 4 chiffres. Je l'ai remplacée par getFullYear(), plus fiable à mon avis. Du coup, le test if (an.length<4) an=an+1900; devient inutile.
J'ai également aéré le code en ajoutant des lignes vides
Mise à jour 18/11 : groupement des déclarations de variables

Voici ma proposition de correction :

Pour analyser une date au format "yyyy-mm-dd hh:mm:ss" (format américain) :

Code javascript :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
// date au format yyyy-mm-dd hh:mm:ss
function IsGoodDate(mydate)
{
	var thedate, year, month, day;
	var onedate;
	var thetime, hours, minutes, seconds;
	var onetime;
 
	var mysplit=mydate.split(' ');
	if (mysplit.length != 2) 
		return false;
 
	thedate=mysplit[0].split('-');
	year = parseInt(thedate[0],10);
	month = parseInt(thedate[1],10);
	day = parseInt(thedate[2],10);
 
 
	if ((mysplit[0].length != 10) || (thedate.length != 3) ||
		(isNaN(year)) || (isNaN(month)) || (isNaN(day)) ||
		(thedate[0].length < 4) || (thedate[1].length < 2) || (thedate[2].length < 2)) 
			return false;
 
	onedate = new Date(year, month-1, day);
	year = onedate.getFullYear();
 
	if ((onedate.getDate() != day) ||
		(onedate.getMonth() != month-1) ||
		(onedate.getFullYear() != year )) 
			return false;
 
 
	thetime = mysplit[1].split(':');
	hours = parseInt(thetime[0],10);
	minutes = parseInt(thetime[1],10);
	seconds = parseInt(thetime[2],10);
 
	if ((mysplit[1].length != 8) || (thetime.length != 3)||
		(isNaN(hours)) || (isNaN(minutes)) || (isNaN(seconds)) ||
		(thetime[0].length < 2) || (thetime[1].length < 2) || (thetime[2].length < 2)) 
			return false;
 
	onetime = new Date(year, month-1, day, hours, minutes, seconds);
 
	if ((onetime.getHours() != hours) || (onetime.getMinutes() != minutes) || (onetime.getSeconds() != seconds))
		return false;
 
	return true;
}

Cette fonction teste d'abord si le paramètre "mydate" est bien composé des 2 éléments date et heure séparés par un espace. Ensuite, on teste si la date est bien composée des 3 éléments séparés par des tirets et si les longueurs de ces éléments sont bien 4, 2 et 2. Après ça, la fonction vérifie la validité de la date en la testant directement dans le calendrier (concordance)... Par exemple, 2004-02-31 retournera false car il n'existe pas de 31 février... Pour l'heure, c'est un peu pareil...

Pour analyser une date au format "jj-mm-aaaa hh:mm:ss" (format français) :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
// date au format dd-mm-yyyy hh:mm:ss
function IsGoodDate(mydate)
{
	var thedate, day, month, year;
	var onedate;
	var thetime, hours, minutes, seconds;
	var onetime;
 
	var mysplit=mydate.split(' ');
	if (mysplit.length != 2) 
		return false;
 
	thedate=mysplit[0].split('-');
	day = parseInt(thedate[0],10);	
	month = parseInt(thedate[1],10);	
	year = parseInt(thedate[2],10);
 
	if ((mysplit[0].length != 10) || (thedate.length != 3) ||
		(isNaN(year)) || (isNaN(month)) || (isNaN(day)) ||
		(thedate[0].length < 2) || (thedate[1].length < 2) || (thedate[2].length < 4)) 
			return false;
 
	onedate = new Date(year, month-1, day);
	year = onedate.getFullYear();
 
	if ((onedate.getDate() != day) ||
		(onedate.getMonth() != month-1) ||
		(onedate.getFullYear() != year )) 
			return false;
 
	thetime = mysplit[1].split(':');
	hours = parseInt(thetime[0],10);
	minutes = parseInt(thetime[1],10);
	seconds = parseInt(thetime[2],10);
 
	if ((mysplit[1].length != 8) || (thetime.length != 3)||
		(isNaN(hours)) || (isNaN(minutes)) || (isNaN(seconds)) ||
		(thetime[0].length < 2) || (thetime[1].length < 2) || (thetime[2].length < 2)) 
			return false;
 
	onetime = new Date(year, month-1, day, hours, minutes, seconds);
 
	if ((onetime.getHours() != hours) || (onetime.getMinutes() != minutes) || (onetime.getSeconds() != seconds))
		return false;
 
	return true;
}

**Bovino** · 18/11/2012, 09h52

Envoyé par Auteur

[*] La fonction date.getYear() retourne, selon le navigateur, une année sur 2 ou 4 chiffres. Je l'ai remplacée par getFullYear(), plus fiable à mon avis. Du coup, le test if (an.length<4) an=an+1900; devient inutile.

La méthode getYear() a été conservée pour des raisons de rétrocompatibilité mais ne devrait plus être utilisée.

Pour l'ensemble :

**Auteur** · 18/11/2012, 10h05

Envoyé par Bovino

La méthode getYear() a été conservée pour des raisons de rétrocompatibilité mais ne devrait plus être utilisée.

Tu proposes de la laisser finalement ?

Envoyé par Bovino

Pour l'ensemble :

Merci

Proposition d'amélioration du script : j'ai combiné les deux fonctions.

Code javascript :

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
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
 
// date au format dd-mm-yyyy hh:mm:ss (fr)
// date au format yyyy-mm-dd hh:mm:ss (en)
function IsGoodDate(mydate, format)
{
	var thedate, day, month, year;
	var onedate;
	var thetime, hours, minutes, seconds;
	var onetime;	
 
	var mysplit=mydate.split(' ');
 
	if (mysplit.length != 2) 
		return false;
 
	thedate=mysplit[0].split('-');
 
	if (format=="en")
	{
		year = parseInt(thedate[0],10);
		month = parseInt(thedate[1],10);
		day = parseInt(thedate[2],10);
 
		if ((mysplit[0].length != 10) || (thedate.length != 3) ||
			(isNaN(year)) || (isNaN(month)) || (isNaN(day)) ||
			(thedate[0].length < 4) || (thedate[1].length < 2) || (thedate[2].length < 2)) 
				return false;	
	}
	else if (format=="fr")
	{
		day = parseInt(thedate[0],10);	
		month = parseInt(thedate[1],10);	
		year = parseInt(thedate[2],10);
 
		if ((mysplit[0].length != 10) || (thedate.length != 3) ||
			(isNaN(year)) || (isNaN(month)) || (isNaN(day)) ||
			(thedate[0].length < 2) || (thedate[1].length < 2) || (thedate[2].length < 4)) 
				return false;
	}
	else 
		return false;
 
	onedate = new Date(year, month-1, day);
	year = onedate.getFullYear();
 
	if ((onedate.getDate() != day) ||
		(onedate.getMonth() != month-1) ||
		(onedate.getFullYear() != year )) 
			return false;
 
	thetime = mysplit[1].split(':');
	hours = parseInt(thetime[0],10);
	minutes = parseInt(thetime[1],10);
	seconds = parseInt(thetime[2],10);
 
	if ((mysplit[1].length != 8) || (thetime.length != 3)||
		(isNaN(hours)) || (isNaN(minutes)) || (isNaN(seconds)) ||
		(thetime[0].length < 2) || (thetime[1].length < 2) || (thetime[2].length < 2)) 
			return false;
 
	onetime = new Date(year, month-1, day, hours, minutes, seconds);
 
	if ((onetime.getHours() != hours) || (onetime.getMinutes() != minutes) || (onetime.getSeconds() != seconds))
		return false;
 
	return true;
}

La fonction prend un paramètre supplémentaire qui s'appelle format. Sa valeur est soit "fr" soit "en".

IsGoodDate("18-11-2012 11:36:00", "fr"); retournera true
IsGoodDate("18-11-2012 11:36:00", "en"); retournera false

IsGoodDate("2012-11-18 11:36:00", "fr"); retournera false
IsGoodDate("2012-11-18 11:36:00", "en"); retournera true

Dans le cas où le second paramètre est ni "fr" ni "en" la fonction retournera false.
Tout ceci sous réserve que la chaine passée contienne effectivement une date et une heure valides.

Par contre pour comparer deux chaines de caractères c'est bien cette syntaxe if (format=="en") ?

J'ai comme un doute

**Bovino** · 18/11/2012, 10h17

Non non, je disais juste que cette méthode fait encore partie de JavaScript pour des raisons de rétrocompatibilité mais qu'elle est obsolète et ne doit pas être utilisée, donc tu as eu raison de la remplacer !

**Auteur** · 18/11/2012, 12h54

J'ai corrigé les scripts pour prendre en compte la remarque de Daniel

Je vous demande donc une nouvelle relecture et vos avis.

**Bovino** · 27/11/2012, 15h45

Alors à titre personnel, je n'aime pas trop les if, else et autres sans accolades, mais je suis peut-être trop maniaque...
D'autre part, un nom de fonction commençant par une majuscule est habituellement (c'est une convention) à un constructeur, ce qui n'est pas le cas ici.

**Bovino** · 27/11/2012, 15h48

Envoyé par Auteur

Par contre pour comparer deux chaines de caractères c'est bien cette syntaxe if (format=="en") ?

J'ai comme un doute

Oui, oui, c'est bien ça

**Auteur** · 19/01/2013, 18h01

Comme je n'ai pas eu de remarques depuis plus d'un mois, on peut sans doute placer ce code dans la FAQ :

Code javascript :

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
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
68
69
70
71
72
73
74
75
76
77
78
79
80
// date au format dd-mm-yyyy hh:mm:ss (fr)
// date au format yyyy-mm-dd hh:mm:ss (en)
function isGoodDate(mydate, format)
{
	var thedate, day, month, year;
	var onedate;
	var thetime, hours, minutes, seconds;
	var onetime;	
 
	var mysplit=mydate.split(' ');
 
	if (mysplit.length != 2) 
	{	
		return false;
	}
 
	thedate=mysplit[0].split('-');
 
	if (format=="en")
	{
		year = parseInt(thedate[0],10);
		month = parseInt(thedate[1],10);
		day = parseInt(thedate[2],10);
 
		if ((mysplit[0].length != 10) || (thedate.length != 3) ||
			(isNaN(year)) || (isNaN(month)) || (isNaN(day)) ||
			(thedate[0].length < 4) || (thedate[1].length < 2) || (thedate[2].length < 2)) 
		{
				return false;	
		}
	}
	else if (format=="fr")
	{
		day = parseInt(thedate[0],10);	
		month = parseInt(thedate[1],10);	
		year = parseInt(thedate[2],10);
 
		if ((mysplit[0].length != 10) || (thedate.length != 3) ||
			(isNaN(year)) || (isNaN(month)) || (isNaN(day)) ||
			(thedate[0].length < 2) || (thedate[1].length < 2) || (thedate[2].length < 4)) 
		{
			return false;
		}			
	}
	else 
	{	
		return false;
	}		
 
	onedate = new Date(year, month-1, day);
	year = onedate.getFullYear();
 
	if ((onedate.getDate() != day) ||
		(onedate.getMonth() != month-1) ||
		(onedate.getFullYear() != year )) 
	{		
		return false;
	}		
 
	thetime = mysplit[1].split(':');
	hours = parseInt(thetime[0],10);
	minutes = parseInt(thetime[1],10);
	seconds = parseInt(thetime[2],10);
 
	if ((mysplit[1].length != 8) || (thetime.length != 3)||
		(isNaN(hours)) || (isNaN(minutes)) || (isNaN(seconds)) ||
		(thetime[0].length < 2) || (thetime[1].length < 2) || (thetime[2].length < 2)) 
	{
		return false;
	}
 
	onetime = new Date(year, month-1, day, hours, minutes, seconds);
 
	if ((onetime.getHours() != hours) || (onetime.getMinutes() != minutes) || (onetime.getSeconds() != seconds))
	{	
		return false;
	}		
 
	return true;
}

La fonction prend un paramètre supplémentaire qui s'appelle format. Sa valeur est soit "fr" soit "en".

IsGoodDate("18-11-2012 11:36:00", "fr"); retournera true
IsGoodDate("18-11-2012 11:36:00", "en"); retournera false

IsGoodDate("2012-11-18 11:36:00", "fr"); retournera false
IsGoodDate("2012-11-18 11:36:00", "en"); retournera true

Dans le cas où le second paramètre est ni "fr" ni "en" la fonction retournera false.
Tout ceci sous réserve que la chaine passée contienne effectivement une date et une heure valides.

Par rapport à ma dernière proposition j'ai simplement ajouté des accolades dans les conditions avec 1 instruction pour ne pas rebuter des débutants. Toujours dans ce même objectif, je n'ai pas pris en compte les propositions de Arnogues, trop compliquées pour un débutant à mes yeux :

Envoyé par Auteur

Je pense que même si les codes proposés par Arnogues sont intéressants ils sont néanmoins destinés à un public assez aguerri. Il ne faut pas oublier que la FAQ est plutôt destinée, dans une certaine mesure, à un public plutôt novice, d'autant plus que la gestion de la date et l'heure fait partie, à mes yeux, des bases javascript.

**NoSmoking** · 20/01/2013, 09h49

Bonjour,
je nommerai la fonction isGoodDate(mydate, format), i minuscule, la première lettre en Majuscule étant conventionnellement réservé aux constructeurs, mais bon..

**Auteur** · 20/01/2013, 11h30

Envoyé par NoSmoking

Bonjour,
je nommerai la fonction isGoodDate(mydate, format), i minuscule, la première lettre en Majuscule étant conventionnellement réservé aux constructeurs, mais bon..

corrigé

**arnogues** · 06/02/2013, 21h15

Envoyé par Auteur

Comme je n'ai pas eu de remarques depuis plus d'un mois, on peut sans doute placer ce code dans la FAQ :

Par rapport à ma dernière proposition j'ai simplement ajouté des accolades dans les conditions avec 1 instruction pour ne pas rebuter des débutants. Toujours dans ce même objectif, je n'ai pas pris en compte les propositions de Arnogues, trop compliquées pour un débutant à mes yeux :

Compliqué ou pas, vous devriez fournir les deux, le code que vous voulez fournir est moche, difficile à mettre à jour si on veut gérer un masque de date, etc, etc.
Vous faites ce que vous voulez, je pense qu'il y a largement moyen de faire plus propre que le code fourni.

**Auteur** · 06/02/2013, 21h26

Je laisse à Vermine et les autres responsables de la section Web prendre la décision.

**arnogues** · 05/12/2012, 23h38

Bonjour,

Je suis souvent très étonné de la longueur des fonctions de validation de date, on se retrouve souvent, soit avec une fonction qui reproduit le calcul du calendrier gregorien, soit une fonction qui utilise Date (c'est un mieux) mais qui fait 10km de long.

Je vous propose une solution plus barbare mais qui permet de réduire les fonctions de validation de date à leur minimum.

Premièrement, la fonction de validation de date au strict minimum :

Code :

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

1
2
3
4
5
 
function dateValidate(y, m, d) {
    d=new Date(y, m-1, d);
    return d.getMonth() == m-1 && d.getFullYear()==y;
};

Comment ça marche, ben c'est très simple, on lui fourni un y, m, d pour annee, mois, jours en paramètre, et on créé une date, et ensuite on reteste les valeurs fournies en entrées pour quelles matchent bien avec celles de la date créée.
Attention le mois rentré dans cette fonction va de 1 à 12.

Alors évidement ça ne gère pas les heures/minutes/secondes, mais on peut y remédier très facilement :

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
 
function dateValidate(y,m,d,h,n,s) {
    /*
    on fixe les valeurs par défaut si elles ne sont pas rentrées, 
    donc h,n,s sont facultatifs
    */
 
  h=h||0;n=n||0;s=s||0; 
 
    /*on passe par un with pour eviter la creation d'une
    nouvelle date et alléger l'écriture*/
 
 
    with(new Date(y, m-1, d, h,n,s)) 
    /* pas besoin de tester secondes, car si on met 61 secondes, 
       minutes nous sortira un false dans ce cas.
     */
    return getMonth() == m-1 && getFullYear()==y && getDate()==d && getHours()==h && getMinutes()==n; 
};

Voila c'est joliiiiiii

Maintenant reste à gérer cette histoire de masque, je vous propose une solution assez warrior, mais qui marche à merveille.

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
 
function dateValidateFromMask(str, mask) {
    //Valide la date pour savoir si elle respecte le mask
    if(!new RegExp(mask.replace(/[ymdhns]/gi,'\\d').replace(/\//g,'\\/')).test(str)) return false;
 
    // valide la date au niveau des valeurs y/m/d/h/n/s
    var dateArr = str.split(/\D+/),
        values = {};
 
    /* créé un objet qui associera les y/m/d du mask avec la date pour 
      ensuite les reutiliser la fonction dateValidate.
      si str = "2012/23/05" et mask = "YYYY/DD/MM";
     values = {y:"2012", m:"05", d:"23"};
    */
    mask.match(/([ymdhns]+)/gi).forEach(function(str,i) {
      values[str.charAt(0).toLowerCase()] = dateArr[i];
    });
    return dateValidate(values.y, values.m, values.d, values.h, values.n, values.s);
}

dateValidateFromMask("2012/31/12","YYYY/DD/MM"); => true;
dateValidateFromMask("2012/31/12","YYYY/MM/DD"); => false;
dateValidateFromMask("03/25/1998","MM/DD/YYYY"); => true;
dateValidateFromMask("03/25/1998","mm/dd/yyyy"); => true;
dateValidateFromMask('25/12/2010 - 12:54:32', 'dd/mm/yyyy - hh:nn:ss'); => true

Si je vire les commentaires des fonctions ça nous donne ceci :

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
 
function dateValidate(y,m,d,h,n,s) {
  h=h||0;n=n||0;s=s||0; 
    with(new Date(y, m-1, d, h,n,s)) 
    return getMonth() == m-1 && getFullYear()==y && getDate()==d && getHours()==h && getMinutes()==n; 
};
 
function dateValidateFromMask(str, mask) {
    if(!new RegExp(mask.replace(/[ymdhns]/gi,'\\d').replace(/\//g,'\\/')).test(str)) return false;
    var dateArr = str.split(/\D+/),
        values = {};
    mask.match(/([ymdhns]+)/gi).forEach(function(str,i) {
      values[str.charAt(0).toLowerCase()] = dateArr[i];
    });
    return dateValidate(values.y, values.m, values.d, values.h, values.n, values.s);
}

Et oui 15 petites lignes mais qui font de grandes choses

On peut même reproduire le principe de "fr" ou "en" pour rationaliser les mask avec une simple ligne de code et en se basant sur un objet de masks

Code :

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

1
2
3
4
5
 
var masks = {
  "fr": "dd-mm-yyyy hh:nn:ss",
  "en": "mm-dd-yyyy hh:nn:ss"
}

Et dans la fonction dateValidateFromMask() il suffirait juste d'écrire en première ligne :

Code :

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

1
2
 
mask = masks[mask] || mask;

Après ya plus qu'à mettre tout ça dans un petit objet et rulez

Je vous laisse méditer la dessus

et j'aime le travail que vous faites

edit : Pour fini on met tout dans un objet. Vous pouvez réutiliser ça dans vos projets

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
27
28
29
 
var DateValidator = {
    validate: function (y, m, d, h, n, s) {
        h = h || 0;
        n = n || 0;
        s = s || 0;
        with(new Date(y, m - 1, d, h, n, s))
        return getMonth() == m - 1 && getFullYear() == y && getDate() == d && getHours() == h && getMinutes() == n;
    },
 
    validateFromMask: function (str, mask) {
        mask = this.mask[mask]*|| mask;
        if (!new RegExp(mask.replace(/[ymdhns]/gi, '\\d').replace(/\//g, '\\/')).test(str)) return false;
        var dateArr = str.split(/\D+/),
            arr = mask.match(/([ymdhns]+)/gi),
            values = {};
        for (var i = 0; i < arr.length; i++) {
            values[arr[i].charAt(0).toLowerCase()] = dateArr[i];
        }
        return this.validate(values.y, values.m, values.d, values.h, values.n, values.s);
    },
 
    mask: {
        "fr": "dd-mm-yyyy hh:nn:ss",
        "en": "mm-dd-yyyy hh:nn:ss"
    }
};
 
console.log(DateValidator.validateFromMask("04-24-2003 12:34:52", "en"));

Comment vérifier si un champ qui contient la date et l'heure au format [Fait]

Contributions JavaScript / AJAX

Vue hybride

Discussions similaires

Partager

Partager