Formater la date lors de la frappe [Résolu]

Question

Posez votre question Signaler

Formater la date lors de la frappe [Résolu]

cs_ggargamel

Messages postés: 5
Date d'inscription: dimanche 20 septembre 2009
Statut: Membre
Dernière intervention: 15 février 2011

- 11 févr. 2011 à 16:43 - Dernière réponse : cs_ggargamel

Messages postés: 5
Date d'inscription: dimanche 20 septembre 2009
Statut: Membre
Dernière intervention: 15 février 2011

- 15 févr. 2011 à 03:51

Javascript / DHTML Posez votre question Signaler

Bonjour,

Sachez que je suis vraiment un débutant qui ne demande qu'à apprendre. Il s'agit également de mon premier post alors soyez indulgent si je n'ai pas tout fait correctement.

Je souhaiterais vérifier au fur et à mesure de la frappe le format de l'heure et qu'il intègre automatiquement ":" dès que le 2eme chiffre est entré (OnKeyUp peut-être?) et ainsi pouvoir entrer les suivants.
Le problème pourrait également être le même pour une date de naissance, non?

Actuellement, je sait remplacer le caractère autre qu'un chiffre par mon ":", mais je me rends compte qu'il serait infiniment plus simple pour l'utilisateur de ne se préoccuper que des chiffres qu'il entre.

Je pense avoir réduit la page au strict minimum. Sauf pour la partie JavaScript qui me pose un réel problème.

Si quelqu'un pouvait me sortir de l'impasse dans laquelle je suis depuis plus d'une semaine, ce serait sympa.

Merci pour votre aide.

<?php
//INITIALISATION DES VARIABLES
$heure_debut=(isset($_POST["heure_debut"])) ? $_POST["heure_debut"] : "hh:mm";
$heure_fin=(isset($_POST["heure_fin"])) ? $_POST["heure_fin"] : "hh:mm";
$submit=(isset($_POST["submit"])) ? $_POST["submit"] : Null;
$envoye=(isset($_POST["envoye"])) ? $_POST["envoye"] : Null;
?>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="fr">
<head>
<title>Ajouter</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" src="../include/jquery.js"></script>
<script type="text/javascript">
<!--
function FormatHeure(obj){
temp=obj.value;
temp2='';
temp=temp.replace('-',':');
temp=temp.replace('h',':');
temp=temp.replace('/',':');
temp=temp.replace(' ',':');
temp=temp.replace('.',':');
temp=temp.replace('+',':');
temp=temp.replace('*',':');
temp=temp.replace('!',':');
temp=temp.replace(';',':');
temp=temp.replace(',',':');
temp=temp.replace('?',':');
j=temp.length;
for (i=0;i<j;i++){
ch_test=temp.charAt(i);
if ((ch_test>='0') && (ch_test<='9')) temp2+=ch_test;
if ((temp2.length>0) && (ch_test==':')) temp2+=':';
}

heure=temp2.substr(0,(temp2.indexOf(':')));
temp2=temp2.substr(temp2.indexOf(':')+1,10);
minutes=temp2.substr(0,10);


heure_valable=Array('',23);
minutes_valable=Array('',59);
if ((minutes<0)|| (minutes>59)){ alert('Heure non valide');obj.value='';return; }

if ((heure<0) || (heure>23)) { alert('Heure non valide');obj.value='';return; }

heure=Math.floor(heure*1);
minutes=Math.floor(minutes*1);

//alert(heure+':'+minutes);

temp3='';
if (heure<10){ temp3=temp3.concat('0',heure,':'); } else { temp3=temp3.concat(heure,':'); }
if (minutes<10){ temp3=temp3.concat('0',minutes); } else { temp3=temp3.concat(minutes); }
obj.value=temp3;
}

-->
</script>
</head>

<?php
//CONTROLE DES SAISIE ET TRAITEMENT (ICI AFFICHAGE)
if ($submit=='Ajouter' AND $envoye=='1' AND $heure_debut!="hh:mm" AND $heure_fin!="hh:mm" AND $heure_debut!="" AND $heure_fin!="") {
echo "$heure_debut 
";
echo "$heure_fin 
";
echo "Les infos sont transmises 
";
echo "Retour";
} else {
//FORMULAIRE DE SAISIE

?>
<form method="post" action="index.php">
<label for="heure_debut">heure_debut</label>

" maxlength="5" OnFocus="this.value='';" OnBlur="FormatHeure(this)">

<label for="heure_fin">heure_fin</label>

" maxlength="5" OnFocus="this.value=''"; OnBlur="FormatHeure(this)">



</form>
<?php
}
?>

</html>

Afficher la suite

A voir également:

9 réponses

Signaler Commenter la réponse de cs_ggargamel

cs_ggargamel

Messages postés: 5
Date d'inscription: dimanche 20 septembre 2009
Statut: Membre
Dernière intervention: 15 février 2011

11 févr. 2011 à 17:33

0

Merci

Re bonjour,

Je constate que ce qui fonctionne sous mozilla firefox 3.5.9
Ne fonctionne pas sous IE8

Ce qu'il me faut c'est un code qui vas réagir de la même manière qq soit ne navigateur employé.
De plus en plus les utilisateurs tel portables consultent Internet ou qu'ils soient.
Merci de votre aide

Signaler Commenter la réponse de jdmcreator

jdmcreator

Messages postés: 656
Date d'inscription: samedi 30 décembre 2000
Statut: Membre
Dernière intervention: 20 juillet 2012

3 12 févr. 2011 à 18:25

0

Merci

Essaye de remplacer ceci :

temp=temp.replace('-',':');
temp=temp.replace('h',':');
temp=temp.replace('/',':');
temp=temp.replace(' ',':');
temp=temp.replace('.',':');
temp=temp.replace('+',':');
temp=temp.replace('*',':');
temp=temp.replace('!',':');
temp=temp.replace(';',':');
temp=temp.replace(',',':');
temp=temp.replace('?',':');

par cela :

temp=temp.replace(/[+h\/*!;,?.]{1}/g,':');

Je n'ai pas testé mais théoriquement cela devrait fonctionner.

JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !

Signaler Commenter la réponse de 007Julien

007Julien

Messages postés: 279
Date d'inscription: mercredi 22 septembre 2010
Statut: Membre
Dernière intervention: 8 janvier 2014

2 13 févr. 2011 à 10:25

0

Merci

Ne conviendrait-il pas d'abord, d'essayer de simplifier la tâche de l'utilisateur ? Lui laisser le choix du séparateur ? Ne pas lui demander de frapper à la fois des zéros et un séparateur ?

Il s'agit simplement de faire mieux que le ministère des finances qui n'hésite pas (voir le taux annuel) à demander à l'usager de remplacer les virgules par des points !

Sans doute s'agissait-il d'éviter deux lignes de code ?

t=t.replace(/,/,'.');
r=r.replace(/\./,',')

Signaler Commenter la réponse de cs_ggargamel

cs_ggargamel

Messages postés: 5
Date d'inscription: dimanche 20 septembre 2009
Statut: Membre
Dernière intervention: 15 février 2011

13 févr. 2011 à 20:54

0

Merci

Bonjour,

Merci à jdmcreator pour la simplification du code.
Si j'ai bien compris,

temp=temp.replace(/[+h\/*!;,?.]{1}/g,':');

Entre les /[ici]/ on met tous les éléments que l'on souhaite remplacer, mais le {1} ), a quoi sert-il (un seul caractère peut-être?
Même question pour le g.

Cette simplification ne répond pas entièrement à mon idée que le : devrait se mettre tout seul à l'issue de la frappe du second chiffre. Ce n'est peut-être pas académique!!

Merci également à 007Julien qui a su trouver un exemple mal ficelé sur un site gouvernemental qui plus est.

Mon problème initial reste entier

Je souhaiterais vérifier au fur et à mesure de la frappe le format de l'heure et qu'il intègre automatiquement ":" dès que le 2eme chiffre est entré (OnKeyUp peut-être?) et ainsi pouvoir entrer les suivants.

Dite-mois s'il est inutile d'aller plus loin dans la recherche.

Merci encore.

Signaler Commenter la réponse de jdmcreator

jdmcreator

Messages postés: 656
Date d'inscription: samedi 30 décembre 2000
Statut: Membre
Dernière intervention: 20 juillet 2012

3 13 févr. 2011 à 22:27

0

Merci

Le premier argument de la fonction replace est un RegExp. Je t'envoie lire cette merveilleuse documentation sur le sujet : http://www.asp-php.net/tutorial/scripting/regexp.php.

Dans le cas de ton problème, on préfère souvent utiliser plusieurs input :

JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !

Signaler Commenter la réponse de cs_ggargamel

cs_ggargamel

Messages postés: 5
Date d'inscription: dimanche 20 septembre 2009
Statut: Membre
Dernière intervention: 15 février 2011

14 févr. 2011 à 09:14

0

Merci

Bonjour,

Merci jdmcreator pour ces explications et ce conseil sous un nouvel angle.

Je voulais faire l'effort de faire un contrôle par JavaScript je me résigne a faire mon contrôle en php

Quoi qu'il en soit, je pose le code que je vais exploiter

<?php
$erreur="";
$erreur_heure="";
//INITIALISATION DES VARIABLES
$heure_debut1=(isset($_POST["heure_debut1"])) ? $_POST["heure_debut1"] : "hh";
$heure_debut2=(isset($_POST["heure_debut2"])) ? $_POST["heure_debut2"] : "mm";
$heure_fin1=(isset($_POST["heure_fin1"])) ? $_POST["heure_fin1"] : "hh";
$heure_fin2=(isset($_POST["heure_fin2"])) ? $_POST["heure_fin2"] : "mm";
$submit=(isset($_POST["submit"])) ? $_POST["submit"] : Null;
$envoye=(isset($_POST["envoye"])) ? $_POST["envoye"] : Null;
?>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="fr">
<head>
<title>Ajouter</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<?php
//CONTROLE DES SAISIE ET TRAITEMENT (ICI AFFICHAGE)
if ($submit=='Ajouter' AND $envoye=='1' AND $heure_debut1!="hh" AND $heure_debut1>="0" AND $heure_debut1<="23" AND $heure_debut2!="mm" AND $heure_debut2>="0" AND $heure_debut2<="59" AND $heure_fin1!="hh" AND $heure_fin1>="0" AND $heure_fin1<="23" AND $heure_fin2!="" AND $heure_fin2>="0" AND $heure_fin2<="59") {

//ECRITURE DE L'HEURE AU FORMAT hh:mm
$array = array($heure_debut1, $heure_debut2);
$heure_debut = implode(":", $array);

$array2 = array($heure_fin1, $heure_fin2);
$heure_fin = implode(":", $array2);

//EXPLOITATION DES VALEURES PASSEES
echo "$heure_debut 
";
echo "$heure_fin 
";
echo "Les infos sont transmises 
";
echo "Retour";
$envoye="";
} else {
//MESSAGE D'ALERTE EN CAS D'ANOMALIES
if ($envoye) {

if ($heure_debut1<0 OR $heure_fin1<0 OR $heure_debut1>23 OR $heure_fin1>23 OR $heure_debut2<0 OR $heure_fin1<0 OR $heure_debut2>59 OR $heure_fin2>59 OR $heure_debut1=="hh" OR $heure_debut2=="mm" OR $heure_fin1=="hh" OR $heure_fin2=="mm" OR $heure_debut1=="" OR $heure_debut2=="" OR $heure_fin1=="" OR $heure_fin2==""){
Echo "
Les heures valides vont de 00 à 23, les minutes valides vont de 00 à 59
";
$erreur_heure="1";
}
}
//FORMULAIRE DE SAISIE
?>
<form method="post" action="index.php">
<label for="heure_debut">heure_debut</label>

" OnFocus="this.value='';" onkeyup="if(this.value.length==2){document.getElementById('heure2').focus()}">
 : 
" OnFocus="this.value='';" onkeyup="if(this.value.length==2){document.getElementById('heure3').focus()}">

<label for="heure_fin">heure_fin</label>

" OnFocus="this.value='';" onkeyup="if(this.value.length==2){document.getElementById('heure4').focus()}">
 : 
" OnFocus="this.value='';">



</form>
<?php
}
?>

</html>

Signaler Commenter la réponse de jdmcreator

jdmcreator

Messages postés: 656
Date d'inscription: samedi 30 décembre 2000
Statut: Membre
Dernière intervention: 20 juillet 2012

3 14 févr. 2011 à 16:58

0

Merci

Merci à 007Julien pour ses connaissances sur le PHP... que je ne connais pas du tout

Donc tu peux cliquer sur "Valider la réponse" sur le post qui t'a aidé ;)

JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !

Signaler Commenter la réponse de cs_ggargamel

cs_ggargamel

Messages postés: 5
Date d'inscription: dimanche 20 septembre 2009
Statut: Membre
Dernière intervention: 15 février 2011

15 févr. 2011 à 03:51

0

Merci

Bonjour jdmcreator et 007Julien,

Merci a tout deux.
Vous m'avez fait rattraper le temps perdu.
Effectivement 007julien, cette méthode d'écriture est très sobre dans sa présentation.

Elle mérite assurément de figurer ici.

Je vais à l'avenir tenter de m'en inspirer afin d'avoir un code parfaitement lisible.

Merci encore.

Répondre Posez votre question

007Julien · Accepted Answer · 2011-02-14T10:37:32+0100

C'est beaucoup mieux pour l'utilisateur

Ne serait ce pas plus clair en évitant les echos et imbrications multiples de PHP :

<?php

$slf=basename($_SERVER["PHP_SELF"]);

$erreur="";
$erreur_heure="";
//INITIALISATION DES VARIABLES
$heure_debut1=(isset($_POST["heure_debut1"])) ? $_POST["heure_debut1"] : "hh";
$heure_debut2=(isset($_POST["heure_debut2"])) ? $_POST["heure_debut2"] : "mm";
$heure_fin1=(isset($_POST["heure_fin1"])) ? $_POST["heure_fin1"] : "hh";
$heure_fin2=(isset($_POST["heure_fin2"])) ? $_POST["heure_fin2"] : "mm";
$submit=(isset($_POST["submit"])) ? $_POST["submit"] : Null;
$envoye=(isset($_POST["envoye"])) ? $_POST["envoye"] : Null;

$chnPge='';
//CONTROLE DES SAISIE ET TRAITEMENT (ICI AFFICHAGE)
if ($submit=='Ajouter' AND $envoye=='1' AND $heure_debut1!="hh" AND $heure_debut1>="0" AND $heure_debut1<="23" AND $heure_debut2!="mm" AND $heure_debut2>="0" AND $heure_debut2<="59" AND $heure_fin1!="hh" AND $heure_fin1>="0" AND $heure_fin1<="23" AND $heure_fin2!="" AND $heure_fin2>="0" AND $heure_fin2<="59") {
//ECRITURE DE L'HEURE AU FORMAT hh:mm
$array = array($heure_debut1, $heure_debut2);
$heure_debut = implode(":", $array);

$array2 = array($heure_fin1, $heure_fin2);
$heure_fin = implode(":", $array2);

//EXPLOITATION DES VALEURES PASSEES
$chnPge.="$heure_debut 
";
$chnPge.="$heure_fin 
";
$chnPge.="Les infos sont transmises 
";
$chnPge.='['.$slf.' Retour]';
$envoye="";}
else {
//MESSAGE D'ALERTE EN CAS D'ANOMALIES
if ($envoye) {
if ($heure_debut1<0 OR $heure_fin1<0 OR $heure_debut1>23 OR $heure_fin1>23 OR $heure_debut2<0 OR $heure_fin1<0 OR $heure_debut2>59 OR $heure_fin2>59 OR $heure_debut1=="hh" OR $heure_debut2=="mm" OR $heure_fin1=="hh" OR $heure_fin2=="mm" OR $heure_debut1=="" OR $heure_debut2=="" OR $heure_fin1=="" OR $heure_fin2==""){
$chnPge.='
Les heures valides vont de 00 à 23, les minutes valides vont de 00 à 59
';
$erreur_heure="1";}}
$chnPge.='<form method="post" action="'.$slf.'">';
$chnPge.='<label for="heure_debut">heure_debut</label>
';
$chnPge.='';
 		$chnPge.=' : ';
$chnPge.='
';
$chnPge.='<label for="heure_fin">heure_fin</label>
';
$chnPge.='';
$chnPge.=' : ';
$chnPge.='
';
$chnPge.='';
$chnPge.='';
$chnPge.='</form>';
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="fr">
<head>
<title>Ajouter</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<?php echo $chnPge ?>

</html>

La seule variante apportée a consisté à introduire la variable $slf qui retenant le nom de la page permet de ne pas se préoccuper du nom du fichier qui peut donc être enregistré pour test sous un nom quelconque.

Formater la date lors de la frappe [Résolu]

Votre réponse