Forcer le format de saisie d'un champ

**shaun_the_sheep** · 05/05/2008, 16h30

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

**SpaceFrog** · 05/05/2008, 16h55

sur un onkeyup ou en verification avant submit ?

le premier rique d'être un peu tricky

**shaun_the_sheep** · 05/05/2008, 17h01

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

merci

**SpaceFrog** · 05/05/2008, 17h13

ç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 :

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
<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 ...

**shaun_the_sheep** · 05/05/2008, 17h32

Bonjour,

Je vous remercie. Je teste et vous tiend informé

**bigboomshakala** · 05/05/2008, 17h34

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

Edit : voir cette discussion

**SpaceFrog** · 05/05/2008, 17h38

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 ...

**shaun_the_sheep** · 06/05/2008, 09h11

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.

**SpaceFrog** · 06/05/2008, 09h27

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

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

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
 
<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>

**shaun_the_sheep** · 06/05/2008, 09h34

Merci

je vais poursuivre comme cela.

c'est déjà pas mal.

Forcer le format de saisie d'un champ

JavaScript

Discussions similaires

Partager

Partager