Un menu déroulant avec 1440 entrées ne vont tout simplement pas être utilisables.
Que diriez-vous d'une zone de texte normale afin que les utilisateurs peuvent simplement taper le temps qu'ils veulent, rapidement (et l'entrée continueront à fonctionner sans JavaScript), couplé avec haut/bas contrôles de rotation si vous avez besoin que:
<input type="text" class="spin-time" value="00:00">
<script type="text/javascript">
// Find and apply to elements with class `spin-time`
//
var inputs= document.getElementsByTagName('input');
for (var i= inputs.length; i-->0;)
if (inputs[i].className==='spin-time')
addTimeSpinner(inputs[i]);
function addTimeSpinner(input) {
input.onchange= function() { alterTime(0); };
input.parentNode.insertBefore(makeButton('-', -60), input);
input.parentNode.insertBefore(makeButton('+', 60), input);
input.parentNode.insertBefore(makeButton('+', 1), input.nextSibling);
input.parentNode.insertBefore(makeButton('-', -1), input.nextSibling);
function makeButton(label, d) {
var button= document.createElement('input');
button.type= 'button';
button.value= label;
button.onclick= function() { alterTime(d); };
return button;
}
function alterTime(d) {
// Parse time value, default to 00:00 if doesn't make sense
//
var mins= 0;
var match= input.value.match(/^(\d\d):(\d\d)$/);
if (match!==null)
mins= parseInt(match[1], 10)*60+parseInt(match[2], 10);
// Add time difference, wrapping round
//
mins= (mins+d+1440)%1440;
// Format back to hh:mm string
//
input.value= padLeft(Math.floor(mins/60), 2, '0')+':'+padLeft(mins%60, 2, '0');
}
function padLeft(v, n, c) {
v+= '';
if (v.length>=n) return v;
return new Array(n-v.length+1).join(c)+v;
}
}
</script>
Ceci est 24 heures. Modifier le code pour analyser et produire le format d'horloge 12 heures (y compris la verrue horrible de 12 heures et PM le droit chemin) est laissé comme un exercice pour quelqu'un qui ne déteste pas complètement l'idée de l'horloge de 12 heures et veulent le voir éradiqué de la Terre.
A '
Nous ne voulons pas les diviser car il devrait y avoir AM PM. Cela fait trois drop downs. Les utilisateurs avec lesquels nous traitons préféreraient une liste déroulante et nous voulons avoir une position défilée par défaut sans valeur par défaut. –
J'ai eu ce même problème. J'ai décidé qu'il est plus rapide pour une personne non formée d'entrer simplement "1:44 pm" dans un champ de texte plutôt qu'une interface utilisateur clicky. Je suggère que vous utilisiez un widget qui permet également la saisie directe de l'heure, de nombreux utilisateurs le préféreront. Je pourrais voir plus d'un avantage si l'utilisateur est limité à des valeurs minute spécifiques plutôt que les options 0-59 complètes. –