Accueil > Forum > > > > formater la date lors de la frappe
 formater la date lors de la frappe
vendredi 11 février 2011 à 16:43:38 |
formater la date lors de la frappe
ggargamel
|
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.
Code Javascript :
<?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>
<body>
<?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 <br />";
echo "$heure_fin <br />";
echo "Les infos sont transmises <br />";
echo "<a href=\"index.php\">Retour</a>";
} else {
//FORMULAIRE DE SAISIE
?>
<form method="post" action="index.php">
<label for="heure_debut">heure_debut</label><br />
<input type="text" name="heure_debut" id="heure_debut" value="<?php echo $heure_debut; ?>" maxlength="5" OnFocus="this.value='';" OnBlur="FormatHeure(this)"><br />
<label for="heure_fin">heure_fin</label><br />
<input type="text" name="heure_fin" id="heure_fin" value="<?php echo $heure_fin; ?>" maxlength="5" OnFocus="this.value=''"; OnBlur="FormatHeure(this)"><br />
<input type="hidden" name="envoye" id="envoye" value="1">
<input type="submit" name="submit" value="Ajouter">
</form>
<?php
}
?>
</body>
</html>
|
|
vendredi 11 février 2011 à 17:33:03 |
Re : formater la date lors de la frappe
ggargamel
|
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
|
|
samedi 12 février 2011 à 18:25:20 |
Re : formater la date lors de la frappe
jdmcreator
|
Essaye de remplacer ceci :
Code Javascript : 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 :
Code Javascript : 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 !
fr.jsinfo.wikia.com |
|
dimanche 13 février 2011 à 10:25:07 |
Re : formater la date lors de la frappe
007Julien
|
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 ?
Code Javascript : t=t.replace(/,/,'.');
r=r.replace(/\./,',')
|
|
dimanche 13 février 2011 à 20:54:22 |
Re : formater l'heure lors de la frappe
ggargamel
|
Bonjour,
Merci à jdmcreator pour la simplification du code.
Si j'ai bien compris,
Code Javascript : 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.
|
|
dimanche 13 février 2011 à 22:27:37 |
Re : formater la date lors de la frappe
jdmcreator
|
Le premier argument de la fonction replace est un RegExp. Je t'envoie lire cette merveilleuse documentation sur le sujet :  [ Lien ].
Dans le cas de ton problème, on préfère souvent utiliser plusieurs input :
Code HTML : <input maxlength=2 size=2 onkeyup="if(this.value.length==2){document.getElementById('heure2').focus()}"> : <input maxlength=2 size=2 id="heure2">JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !
fr.jsinfo.wikia.com |
|
lundi 14 février 2011 à 09:14:26 |
Re : formater la date lors de la frappe
ggargamel
|
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
Code PHP :
<?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>
<body>
<?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 <br />";
echo "$heure_fin <br />";
echo "Les infos sont transmises <br />";
echo "<a href=\"index.php\">Retour</a>";
$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 "<div style=\"border : 1px solid #000 ; background : #ffff00 ; \">Les heures valides vont de 00 à 23, les minutes valides vont de 00 à 59</div>";
$erreur_heure="1";
}
}
//FORMULAIRE DE SAISIE
?>
<form method="post" action="index.php">
<label for="heure_debut">heure_debut</label><br />
<input name="heure_debut1" maxlength=2 size=1 id="heure1" value="<?php echo $heure_debut1; ?>" OnFocus="this.value='';" onkeyup="if(this.value.length==2){document.getElementById('heure2').focus()}">
:
<input name="heure_debut2" maxlength=2 size=1 id="heure2" value="<?php echo $heure_debut2; ?>" OnFocus="this.value='';" onkeyup="if(this.value.length==2){document.getElementById('heure3').focus()}"><br />
<label for="heure_fin">heure_fin</label><br />
<input name="heure_fin1" maxlength=2 size=1 id="heure3" value="<?php echo $heure_fin1; ?>" OnFocus="this.value='';" onkeyup="if(this.value.length==2){document.getElementById('heure4').focus()}">
:
<input name="heure_fin2" maxlength=2 size=1 id="heure4" value="<?php echo $heure_fin2; ?>" OnFocus="this.value='';"><br />
<input type="hidden" name="envoye" id="envoye" value="1">
<input type="submit" name="submit" value="Ajouter">
</form>
<?php
}
?>
</body>
</html>
|
|
lundi 14 février 2011 à 10:37:32 |
Re : formater la date lors de la frappe
007Julien
|
Réponse acceptée !
C'est beaucoup mieux pour l'utilisateur
Ne serait ce pas plus clair en évitant les echos et imbrications multiples de PHP :
Code 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 <br />";
$chnPge.="$heure_fin <br />";
$chnPge.="Les infos sont transmises <br />";
$chnPge.='<a href="'.$slf.'">Retour</a>';
$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.='<div style="border : 1px solid #000 ; background : #ffff00 ;">Les heures valides vont de 00 à 23, les minutes valides vont de 00 à 59</div>';
$erreur_heure="1";}}
$chnPge.='<form method="post" action="'.$slf.'">';
$chnPge.='<label for="heure_debut">heure_debut</label><br />';
$chnPge.='<input name="heure_debut1" maxlength=2 size=1 id="heure1" value="'.$heure_debut1.'" OnFocus="this.value=\'\';" onkeyup="if(this.value.length==2){document.getElementById(\'heure2\').focus()}">';
$chnPge.=' : ';
$chnPge.='<input name="heure_debut2" maxlength=2 size=1 id="heure2" value="'.$heure_debut2.'" OnFocus="this.value=\'\';" onkeyup="if(this.value.length==2){document.getElementById(\'heure3\').focus()}"><br />';
$chnPge.='<label for="heure_fin">heure_fin</label><br />';
$chnPge.='<input name="heure_fin1" maxlength=2 size=1 id="heure3" value="'.$heure_fin1.'" OnFocus="this.value=\'\';" onkeyup="if(this.value.length==2){document.getElementById(\'heure4\').focus()}">';
$chnPge.=' : ';
$chnPge.='<input name="heure_fin2" maxlength=2 size=1 id="heure4" value="'.$heure_fin2.'" OnFocus="this.value=\'\';"><br />';
$chnPge.='<input type="hidden" name="envoye" id="envoye" value="1">';
$chnPge.='<input type="submit" name="submit" value="Ajouter">';
$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>
<body>
<?php echo $chnPge ?>
</body>
</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.
|
|
lundi 14 février 2011 à 16:58:21 |
Re : formater la date lors de la frappe
jdmcreator
|
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 !
fr.jsinfo.wikia.com |
|
mardi 15 février 2011 à 03:51:56 |
Re : formater la date lors de la frappe
ggargamel
|
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.
|
|
Cette discussion est classée dans : date, minutes, heure, value, temp2
 Répondre à ce message
 Sujets en rapport avec ce message
Verif d'une date et d'une heure [ par Sinse ]
Salut! Voila j'ai un truc plutot bizarre qui se passe : j'ai une procedure de verification de date qui marche correctement, dans la meme function je v
problème de vérification des champs d'un formulaire [ par arambasic ]
Voici mon formulaire avec le code javascript pour le vérifié, quand j'envoie le formulaire in me donne bien les box d'erreurs mais il enregistre les
Comment mettre Date et Heure valide pour IE, Nescape, Firefox [ par JLB59 ]
Bonjour tout le monde, J'ai fait un site que j'ai mis en ligne. Comme j'utilisais IE en local pour voir le résultat, je n'ai eu aucun prb. J'ai inst
Probléme avec un widows.opener [ par destiny ]
Lo allDonc depuis un popup (un calendrier), je change la value d'un champs texte ( id='Debut sejour' de la page opener) par la date cliqué.Sur ce cham
Probléme avec un widows.opener [ par destiny ]
Lo allDonc depuis un popup (un calendrier), je change la value d'un champs texte ( id='Debut sejour' de la page opener) par la date cliqué.Sur ce cham
Chrono JS avec heure serveur [ par basto ]
Bonjour, j'ai fait un amalgame de script pour obtenir un chronometre qui affiche la différence de temps écoulé depuis une date php antérieur et la dat
Convertir heure [ par Zebra1928 ]
Bonjour à tous,Je suis bloqué car je cherche une fonction pour convertir l'heure actuelle en milliseconde, et l'afficher dans une page . sec = Dat
Script date et heure [ par vernoff ]
Salut j'ai pris sur ce site un script affichant la date et l'heure, il est parfait pour mon site à un detail près, il ne fonctionne pas avec Mozilla F
date et heure sans refresh la page [ par metis15 ]
Bonjour,je n'ai rien trouvé sur le problème d'affichage de Date et Heure qui se met à jour toute les minutes par exemple, mais SANS recharger toute la
Mise à jour de champs de formulaires [ par ecritel ]
Hello,J'ai un petit pb pour finaliser une page qui doit me permettre de générer des factures html.Pour calculer le montant total d'une ligne je faisfu
 Livres en rapport
|
Derniers Blogs
 JOYEUX ANNIVERSAIRE NIXJOYEUX ANNIVERSAIRE NIX par ebartsoft
Souhaitons un bon et joyeux anniversaire à notre hôte à tous, Nix.
Je ne le répéterais jamais assez mais sans lui rien ne serait possible. Il défit en permanence les lois de la gravité et comme il le dit si bien, si tu lui fais confiance ça devra...
Cliquez pour lire la suite de l'article par ebartsoft IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc
Forum
 UTILISER UN .JSUTILISER UN .JS par zaikoe
Cliquez pour lire la suite par zaikoe
Logiciels
 sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|