Forcer le format de saisie d'un champ

Version imprimable

05/05/2008, 16h30
shaun_the_sheep

Forcer le format de saisie d'un champ

Bonjour,

je fais saisir des heures dans un formulaire , le format imposé est HH:MM et j'aimerai forcer ce format de saisi.

quelqu'un a t'il une idée ?

Merci
05/05/2008, 16h55
SpaceFrog

sur un onkeyup ou en verification avant submit ?

le premier rique d'être un peu tricky
05/05/2008, 17h01
shaun_the_sheep

en faite je pense que le mieux est sur le onkeyup .

merci

ça va être coton ...

je vois un regExp ... mais pas de la tarte ...

en plus sur le onkeyup faut gerer les insertions ou effacement en mileu de chaine ...

le plus simple est encore d'imposer :

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
<script type="text/javascript">
function foo(){
var SelHours=document.getElementById('hours');
for(i=0;i<24;i++){
var heure="0"
var OptHour=document.createElement('option');
OptHour.innerHTML=(i<10)?"0"+i:i.toString();
OptHour.value=OptHour.innerHTML;
SelHours.appendChild(OptHour);
}
 
 
var SelMins=document.getElementById('minutes');
for(i=0;i<60;i++){
var heure="0"
var OptMin=document.createElement('option');
OptMin.innerHTML=(i<10)?"0"+i:i.toString();
OptMin.value=OptMin.innerHTML;
SelMins.appendChild(OptMin);
}
 
 
 
}
 
 
 
</script>
 
</head>
<body onload='foo()'>
<div style="padding-top:50px;width:auto;float:left;">Time:&nbsp;<select id='hours' size="2"  style="width:40px;height:22px;" ></select>h&nbsp;<strong>:</strong></div>
<div style="padding-top:50px;width:auto;float:left;">&nbsp;<select id='minutes' size="2"  style="width:40px;height:22px;"></select>min.</div>

Quitte à rajouter un champs hidden qui concatènera sur le onsubmit
HH+":"+"MM"
ou concaténer coté serveur ...

05/05/2008, 17h32
shaun_the_sheep

Bonjour,

Je vous remercie. Je teste et vous tiend informé
05/05/2008, 17h34
bigboomshakala

hmm j'avais répondu à cette question il y a quelques mois. le script doit traîner quelquepart

Edit : voir cette discussion
05/05/2008, 17h38
SpaceFrog

Ben on peut toujours utiliser le script de verif de date en l'adaptant aux heures et minutes, vu que les heures et minutes font partie de Date()
Mais proposer un timePicker est tout de même plus simple, pas de gestion d'evènement hormis un onchange évnetuel pour concaténer dans un champs hidden ...
06/05/2008, 09h11
shaun_the_sheep

Bonjour,

Le principe d'une liste déroulante est en effet la meilleur option. Je vais partir sur ce principe.

L'effet de style apporté ne fonctionne cependant pas chez moi sous FF . Cela fonctionne bien sous IE.

Mouaip c'est le size qui n'est pas interprété pareil ...

voici pour mettre les deux d'accord ... (un peu moins zoli ...)

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
 
<script type="text/javascript">
function foo(){
var SelHours=document.getElementById('hours');
for(i=0;i<24;i++){
var heure="0"
var OptHour=document.createElement('option');
OptHour.innerHTML=(i<10)?"0"+i:i.toString();
OptHour.value=OptHour.innerHTML;
SelHours.appendChild(OptHour);
}
 
 
var SelMins=document.getElementById('minutes');
for(i=0;i<60;i++){
var heure="0"
var OptMin=document.createElement('option');
OptMin.innerHTML=(i<10)?"0"+i:i.toString();
OptMin.value=OptMin.innerHTML;
SelMins.appendChild(OptMin);
}
 
}
 
 
 
</script>
 
</head>
<body onload='foo()'>
<div style="padding-top:50px;width:auto;float:left;">Time:&nbsp;<select id='hours' size="1"  style="width:40px;height:20px;" ></select>h&nbsp;<strong>:</strong></div>
<div style="padding-top:50px;width:auto;float:left;">&nbsp;<select id='minutes' size="1"  style="width:40px;height:20px;"></select>min.</div>

06/05/2008, 09h34
shaun_the_sheep

Merci

je vais poursuivre comme cela.

c'est déjà pas mal.