11548 sujets

JavaScript, DOM et API Web HTML5

Modérateur
Bonjour,

Ouais, aujourd'hui je me sens en forme pour poser une question. Prenez un screenshot, ca l'arrive de moins en moins.

En fait, je ne suis pas très spécialisé en Javascript. Je recherche une fonction permettant de vérifier qu'une valeur est une date. Cette valeur peut varier d'une fois à l'autre. Elle peut être sous divers format comme :

2005-06-30
2005-06-30 14:52
2005-06-30 14:52:33

Connaissez-vous une fonction déjà existante permettant de faire cette validation ? Je pourrais essayer avec les Regex, mais rien ne me garantit que la date sera valide. D'ailleurs, mon cerveau est allergique aux Regex, j'ai du mal avec cette syntaxe.

L'autre fonction sera pour ajouter une journée à la date. Dans les langages serveurs, il existe DateAdd, mais en Javascript ?

J'ai cherché sur google, et biensûr, je trouve plein de scripts plus excitants les uns que les autres, mais je me demandais si quelqu'un ici détenait DA SCRIPT qui botte les fesses. Celui qui respecte les normes et qui est compatible dans la majorité des navigateurs. Un script de qualité quoi !

Je vais continuer de googler en attendant la réponse d'un bon samaritain (je veux dire, un bon samaritaingh). En échange, je lui accorde 3 pseudo-frames-points qui lui donne le droit de me troller 3 fois avec les pseudos-frames.
Modifié par Merkel (01 Jun 2005 - 21:25)
Salut,

Pour ce qui est de la vérification de format, je te conseille RegExp Smiley cligne
Allez à l'arrache

function isDate (chaine)
{
	var re = new RegExp ("^\\d{4,4}(-\\d{2,2}){2,2}( \\d{2,2}(:\\d{2,2}){1,2})?$", "");
	return (re.test (chaine));
}

Pour ton dateAdd, il va te falloir un truc un peu plus cossu si tu veux que ce soit précis : tableau avec le nombre de jours par mois, test des années bissextiles si on est en février.
Rappel pour les années bissextiles : tous les 4 ans, sauf tous les 100 ans, mais quand même tous les 400 ans Smiley biggol
Modérateur
Ouais sauf qu'un RegExp comme ca ne garantit pas que la date est valide, dans le sens qu'un utilisateur pourrait très bien mettre le 31 février. Pour l'instant, j'ai trouvé ceci : http://www.mattkruse.com/javascript/date/

Le fichier fait 12ko, mais je vais essayer de le réduire pour garder seulement ce que j'ai besoin. L'adapter à mes besoins. Je trouve ca quand même surprenant que ces fonctions ne soient pas natives au langage Javascript lui-même. C'est tellement courant comme besoin.

Pour le dateadd, je vais continuer de chercher sur le dos poilu de google, des fois que...

Merci en tout cas pour ton aide.
Merkel a écrit :
Ouais sauf qu'un RegExp comme ca ne garantit pas que la date est valide, dans le sens qu'un utilisateur pourrait très bien mettre le 31 février.

La checkDate() de QuirksMode semble fonctionner.
Modérateur
Sauf que sur QuirksMode, l'heure n'y est pas. Dans mon cas, l'heure peut y être ou pas dans le champ. Ca dépend de l'utilisateur. Il peut insérer la date en quelques formats différents : heure ou pas.

Je pense que je vais utiliser le Regex. De toutes façons, faudrait vraiment que l'utilisateur fasse volontairement l'erreur de mettre le 31 février, et je valide côté serveur quand même. L'utilisateur sélectionne la date à partir d'un calendrier en popup. Faut vraiment qu'il le fasse exprès. Avec le Regex, c'est léger et efficace. Ca permet, si la syntaxe est bonne, de valider le format de la date et optionnellement l'heure si elle est présente. Je vais tester ca.

Si la personne met le 31 février, lorsqu'elle cliquera sur le bouton pour ajouter une journée à cette date, le pire qu'il lui arrivera c'est une erreur Javascript. Il l'aura vraiment cherché quand même. Ceci dit, comme j'adore faire mes applications idiot-proof, je vais surement essayer de valider vraiment si la date est bonne. J'aime pas les erreurs Javascript. Ca pu le choux fleur jeté aux poubelles. (Je parle sérieusement, c'est dégueulasse. J'implore ma copine d'arrêter d'en acheter Smiley biggol ).

D'ailleurs, j'ai pas encore réussi à trouver une fonction DateAdd. La seule que j'ai trouvé marche pas vraiment. Smiley confused

J'ai déjà un script de calendrier en popup. Je vais voir dans son code source. Peut-être que toutes les fonctions dont j'ai besoin s'y trouve. Je pensais quand même que google serait plus généreux.
Modifié par Merkel (01 Jun 2005 - 22:47)
Pour dateAdd, tu auras besoin de stocket des noms de mois et des nombres de jours dans le mois.
Pourquoi ne pas globaliser ces infos et les utiliser pour vérifier que la date entrée est numériquement valide ?

PS : Donne moi un autre moyen de te troller, je fais aussi partie de ton comité.
Modérateur
Une nouvelle journée qui commence. J'ai décidé de créer mes propres fonctions. Je vais essayer d'en apprendre plus sur l'objet date en Javascript. Ca va me faire du bien de changer de type de programmation.

Je vais probablement utiliser ton regex Marvin. Je vais revenir pour vous montrer où j'en suis rendu et demander des avis sur mon script.
Modérateur
Comme promis, voici où j'en suis rendu. J'ai fusionné quelques fonctions trouvées ici et là, et créé quelques autres. Voici ce que ca donne :

Fichier Javascript

/* Fonction permettant de prolonger une dateheure de x temps */
function ProlongerDateHeure(objsource,objcible,interval,valeur) {
var DateHeureSource = (document.getElementById(objsource).value);
if (ValidationDateFormat(DateHeureSource)) 
	{
		/* Dans l'application, le format utilisé est 2005-12-31 00:00:00. On remplace donc les tirets par des bars obliques */
		DateHeureSource = DateHeureSource.replace(/-/g, "/");
		
		/* Création de l'objet Date */
		DateHeureSource = new Date(DateHeureSource);
		
		/* Prolongation de la dateheure */
		DateHeureSource = dateAdd(interval,valeur,DateHeureSource);
		
		/* Mise à jour de la cible */
		document.getElementById(objcible).value = FormatDateHeure(DateHeureSource);
	}
}

function FormatDateHeure(dateheure) {
return (dateheure.getFullYear() + '-' + (dateheure.getMonth()+1) + '-' + dateheure.getDate() + ' ' + dateheure.getHours() + ':' + dateheure.getMinutes());
}

function dateAdd(intval, numb, base){
	/* by osik */
	switch(intval){
		case "M":
			base.setMonth(base.getMonth() + numb);
			break;
		case "YYYY":
			base.setFullYear(base.getFullYear() + numb);
			break;
		case "D":
			base.setDate(base.getDate() + numb);
			break;
		case "H":
			base.setHours(base.getHours() + numb);
			break;
		case "N":
			base.setMinutes(base.getMinutes() + numb);
			break;
		case "S":
			base.setSeconds(base.getSeconds() + numb);
			break;
		default:
	}
	return base
}

function ValidationDateFormat(chaine)
/* Regex basé sur celui de Marvin Le Rouge */
{
var re = new RegExp ("^\\d{4,4}(-\\d{1,2}){1,2}( \\d{1,2}(:\\d{1,2}){1,2})?$", "");
return (re.test (chaine));
}


Fichier HTML de test :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
<meta http-equiv="Content-language" content="fr-FR" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Pseudo-Titre</title>
<script type="text/javascript" src="prolongationtemps.js"></script>
</head>

<body>
<form id="FormAction" method="post" enctype="multipart/form-data" action="pseudo-page.cfm">
	<fieldset><legend>Mon pseudo-fieldset avec mes pseudos-fields fonctionnant avec ma pseudo-fonction Javascript</legend>
	<input type="text" id="DateHeure" name="DateHeure" value="2005-04-21 10:49" />
	<input type="button" id="btnAjoutHeures" name="btnAjoutHeures" value="4 heures plus tard" onclick="ProlongerDateHeure('DateHeure','DateHeure','H',4);" />
	<input type="button" id="btnAjoutJour" name="btnAjoutJour" value="Une journée plus tard" onclick="ProlongerDateHeure('DateHeure','DateHeure','D',1);" />
	<input type="button" id="btnAjoutSemaine" name="btnAjoutSemaine" value="Une semaine plus tard" onclick="ProlongerDateHeure('DateHeure','DateHeure','D',7);" />
	</fieldset>
</form>
</body>
</html>


Ca fonctionne très bien. Probablement qu'on peut optimiser le script, mais j'en suis quand même satisfait pour le moment.

Je suis plutôt mal à l'aise avec les Regex. J'aimerais que la fonction qui valide le format de la date accepte les formats suivants :

2005-12-31 00:00
2005-12-31
2005/12/31 00:00
2005/12/31

Les tirets comme séparateur ou les bars obliques. L'un ou l'autre devrait être valide. Marvin, t'as l'air doué avec les Regex, ou bien t'utilise un logiciel pour t'aider à les construire ? Dans un cas comme dans l'autre, pourrais-tu me donner un petit coup de main ? Je pense avoir déjà fait un bon bout chemin de mon côté, grâce aussi à ton Regex, mais j'aimerais au moins améliorer un peu le Regex pour laisser plus de flexibilité au format (pas trop quand même).

Merci et au pire, si t'as ni le temps ni le goût, c'est pas grave. Je vais comprendre. On a tous des chats à fouetter !

Smiley sm
Modifié par Merkel (02 Jun 2005 - 16:56)
Tu peux faire un OU logique avec le pipe |
Comme ça, tu peux indiquer les différents séparateurs possibles entre les parties de la date (tu as le choix).
Tu ne veux plus qu'elle accepte les secondes ?
Modérateur
Oh oui oui, les secondes doivent être acceptées. C'était surtout les séparateurs / que je voulais ajouter.

J'ai modifié un peu ton regex pour qu'il accepte les valeurs à un chiffre (mois et jour). Je crois que j'ai fais ca correctement. Je vais essayer la pipe à nouveau, mais ca m'inspire pas trop. (<--- mauvais jeu de mot)
Bon alors, ça devrait donner

function ValidationDateFormat(chaine)
{
  var re = new RegExp ("^\\d{4,4}([-|/]\\d{1,2}){1,2}( \\d{1,2}(:\\d{1,2}){1,2})?$", "");
return (re.test (chaine));
}


Je crois que c'est un truc comme ça, mais je ne me souviens plus trop : teste et dis moi ce que ça donne (et pense à me trouver un autre moyen de te troller : je suis vraiment allergique à la même expression que toi Smiley ravi )
Modérateur
Ca marche tempête ! Merci beaucoup. Smiley ravi

Pour ce RegExp, je t'accordes le droit de me troller deux fois en prétendant faussement que PHP est bien mieux que Coldfusion. Smiley argue



Smiley baguette Putaingh qu'il fait chaud !
Modifié par Merkel (02 Jun 2005 - 21:55)
Modérateur
La diffamation te va à merveille Marvin... ca et le mensonge pur et dur. Dans le cas présent, c'est même blasphématoire de parler contre Coldfusion.

Te reste un point maintenangh. Smiley baguette

Suis-je assez subtile dans ma moquerie envers l'accent Francais ?
Modifié par Merkel (03 Jun 2005 - 14:45)
Ouiche, d'autant plusseuh que je vis dans le Sud mouah fan de pied.
NB : Contrairement à php, la fusion à froid est une légende, ton logiciel préféré est donc comme le c cédille du mot surf Smiley winner

Allez celle-là elle vaut bien au moins un point. Cette digression est donc terminée
Modifié par Marvin Le Rouge (03 Jun 2005 - 16:07)