2015-09-16 19 views
23

sto usando qui sotto tag HTML:HTML tempo di ingresso in formato 24

<input type="time" /> 

In Chrome, il suo proiezione formato AM/AM, possiamo limitare per visualizzare 24 formato di sempre. Non voglio utilizzare HTML5 tag

+1

Forse [questo] (http://stackoverflow.com/questions/14772142/24-hour-time-regex-for-html-5) post potrebbe essere utile. –

+0

Sembra che 'type = time' sia 'still' in modalità bozza. vedere questa domanda http://stackoverflow.com/questions/31829783/in-different-browsers-input-time-field-shows-in-different-formats – Chris

+0

Dato che è un elemento abbastanza nuovo, e si basa su diversi utenti- l'agente può cambiare il risultato di questo elemento, non esiste a mia conoscenza nessun attributo per specificare la data del formato. Invece, trovo qualcosa attorno al valore di 'max' e' min' per questo elemento. Forse dovresti fare un tentativo e vedere cosa succede quando imposti max a '24: 00'. Ulteriori informazioni [qui] (http://www.w3schools.com/jsref/prop_input_time_max.asp) –

risposta

12

Come indicato nel this answer non tutti i browser supportano il modo standard. Non è una buona idea da usare per una solida esperienza utente. E se lo usi, non puoi chiedere troppo.

Utilizzare invece le librerie time-picker. Ad esempio: TimePicker.js è una libreria a dipendenza zero e leggera. Usalo come:

var timepicker = new TimePicker('time', { 
 
    lang: 'en', 
 
    theme: 'dark' 
 
}); 
 
timepicker.on('change', function(evt) { 
 
    
 
    var value = (evt.hour || '00') + ':' + (evt.minute || '00'); 
 
    evt.element.value = value; 
 

 
});
<script src="http://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script> 
 
<link href="http://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css" rel="stylesheet"/> 
 

 
<div> 
 
    <input type="text" id="time" placeholder="Time"> 
 
</div>

+0

Motivo per il voto negativo. Nota: vuoi una risposta naturale per questa domanda. Inoltre avrebbe potuto essere fatto usando un'altra libreria, ma la domanda vuole naturale e senza libreria, per favore leggi la sezione gialla. – vijay

+0

ciao, nel tuo esempio c'è un modo per impedire all'utente di digitare altro testo ... in questo momento è in grado di digitare elementi non numerici! – transformer

1

Non si può fare con il tipo di ingresso HTML5. Ci sono molte librerie disponibili per farlo, puoi usare momentjs o altri componenti dell'interfaccia jQuery per il miglior risultato.

Problemi correlati