Che cos'è un buon selettore di tempo Javascript? [chiuso]

86

Qual è un buon selettore di tempo per jquery o js standalone? Vorrei qualcosa come Google utilizza nel loro calendario in cui ha un elenco a discesa di orari comuni a intervalli di 15 minuti o ti consente di digitare manualmente un orario e lo convalida.

— Element
fonte

Un selettore di tempo molto semplice con pulsante di selezione Qui

— om39a

13

Consiglio di riaprire la domanda. È importante riconoscere che la categoria "non costruttiva", come ogni categoria, dovrebbe avere delle eccezioni - penso anche per domande come questa, dove la risposta richiede conoscenze di programmazione e non è qualcosa che può essere facilmente ricercato.

— Dan Nissenbaum

74

Alcune risorse:

— Christian C. Salvadó
fonte

57

... E non uno spettatore tra loro

— Rudu

3

Il TimeDatePicker è probabilmente il migliore.

— JD Stuart

9

Non vedo davvero come TimeDatePicker sia un miglioramento rispetto a un elenco di selezione.

— Jon z

4

la maggior parte delle biblioteche rotte

— FooBar

6

Questo è molto meglio: weareoutman.github.io/clockpicker

— Stefan Steiger

26

Questo è il migliore che ho trovato fino alla data http://trentrichardson.com/examples/timepicker/

— Felix
fonte

2

A seconda dell'applicazione, anche questo è uno dei miei preferiti. Tuttavia, avevo bisogno di cambiare il periodo dei minuti da 1 a 15, ma è stato molto semplice.

— Chris Dutrow

il mio preferito dalla lista. è facile, semplice e ciò di cui ha bisogno. Ho già utilizzato il widget Calendario AJAX di Any + Time ™ Datepicker / Timepicker, ma proverò invece a farlo.

— Daniel

Il sito web (e l'esempio javascript) non sono più disponibili. Ce n'è un campione da qualche altra parte?

— James Moberg

2

I cursori non sono esattamente il modo più semplice o veloce per selezionare un orario preciso.

— mpen

@Mark Sono d'accordo con la tua opinione, il modo più semplice può essere un elenco di selezione o mostrare un tastierino della calcolatrice in modo che l'utente possa digitare.

— Felix

21

Eccone uno che funziona con Twitter Bootstrap.

http://jdewit.github.com/bootstrap-timepicker/

— declan
fonte

grazie questo era quello che stavo cercando

— arjuncc

3

Questo deve essere il modo più lento per scegliere l'ora.

— mpen

Mi piace molto la semplicità di Angular UI Bootstrap Timepicker .

— Gaʀʀʏ

8

Non ero soddisfatto di nessuno dei selettori di tempo suggeriti, quindi ho creato il mio ispirandomi alle specifiche di Perifer e HTML5:

http://github.com/gregersrygg/jquery.timeInput

È possibile utilizzare i nuovi attributi html5 per l'input temporale (passo, minimo, massimo) o utilizzare un oggetto opzioni:

<input type="time" name="myTime" class="time-mm-hh" min="9:00" max="18:00" step="1800" />
<input type="time" name="myTime2" class="time-mm-hh" />

<script type="text/javascript">
    $("input[name='myTime']").timeInput(); // use default or html5 attributes
    $("input[name='myTime2']").timeInput({min: "6:00", max: "15:00", step: 900}); // 15 min intervals from 6:00 am to 3:00 pm
</script>

Convalida l'input in questo modo:

Inserisci ":" se mancante
Orario non valido? Sostituisci con vuoto
Non è un orario valido in base al passaggio? Arrotonda per eccesso / per difetto al passaggio più vicino

La specifica HTML5 non consente am / pm o sintassi dell'ora localizzata, quindi consente solo il formato hh: mm. I secondi sono consentiti secondo le specifiche, ma non l'ho ancora implementato.

È molto "alpha", quindi potrebbero esserci alcuni bug. Sentiti libero di inviarmi patch / richieste pull. Hanno testato manualmente in IE 6 e 8, FF, Chrome e Opera (l'ultimo stabile su Linux per questi ultimi).

— gregers
fonte

1

Hai una demo disponibile?

— mpen

Scusa no. Non tocco quel progetto da 4 anni. Sentiti libero di inviare richieste pull :)

— gregers

6

Puoi leggere il post del creatore di jQuery John Resig su di esso qui: http://ejohn.org/blog/picking-time/ .

— Sophie Alpert
fonte

4

Richiede troppa precisione del mouse per l'utente medio. Inoltre, non è immediatamente evidente come usare quella cosa (nonostante lui affermi che è "intuitiva") - non posso guardarla e sapere come si comporterà quando passo il mouse su quelle cifre.

— mpen

4

Sto usando ClockPick .

— tvanfosson
fonte

Non male, ma il posizionamento dell'elemento è disattivato.

— mpen

questo mi ha portato a una pagina sospetta che chiede di aggiornare il flash. Si prega di controllare il collegamento e aggiornare.

— Let0code

3

CSS Gallery ha una varietà di Time Pickers. Dare un'occhiata.

Il selettore di tempo di Perifer Design è simile a quello di Google

— Alagu
fonte

1

Ah Perifer è esattamente quello che sto cercando, ma non sembra eseguire alcuna convalida, ovvero mi consente di digitare "999999999" come valore

— Elemento

3

Nel caso in cui qualcuno fosse interessato a un altro JavaScript TimPicker, ho sviluppato e mantenuto un plugin jQuery che fa il lavoro. Funziona in modo simile a EZ Time JS (sebbene non lo sapessi fino a 5 minuti fa: D), consentendo agli utenti di inserire l'ora in quasi tutti i modi in cui si sentono a proprio agio e convertendo l'input in un formato comune.

Checkout la pagina Opzioni TimePicker jQuery per vederlo in azione.

— Willington Vega
fonte

La demo è rotta (o non ho capito come usarla!).

— PhiLho

1

Scusate ragazzi .. forse è un po 'tardi .. ho usato NoGray .. è fantastico ..

4

Non è mai troppo tardi per qualcuno (non è necessario il poster originale) per trovarlo utile. .. ... tranne che NoGray è già menzionato da CMS ...

— soggezione

1

Sto usando il timepicker dell'interfaccia utente di jquery

— pryabov
fonte

Troppo buggy. Blocca il browser quando sono presenti circa 10-20 controlli.

— Nick Binnet

-1

NoGray è un bel piacere per gli occhi, ma ci sono alcune considerazioni sull'usabilità. In primo luogo, gli orologi analogici stanno diventando sempre più oscuri e le persone più giovani a volte hanno difficoltà a leggerli. In secondo luogo, trascinare con il mouse su un orario specifico è un po 'noioso, proprio come i selettori di tempo che usano un cursore. In terzo luogo, l'interazione con la tastiera per questo selettore è un po 'sporadica.

Per una selezione del tempo più utilizzabile, controlla il widget Calendario AJAX di Any + Time ™ Datepicker / Timepicker . È forse il selettore del tempo più veloce e facile da usare disponibile, perché utilizza semplici pulsanti per selezionare tempi specifici con velocità e facilità.

Un interessante test di usabilità è questo: scegli un orario dispari (ad esempio, 22:32), quindi guarda quanto tempo ci vuole per selezionare con precisione quell'ora usando vari selettori di tempo. Probabilmente puoi farlo più velocemente con Any + Time ™ di quanto potresti scrivere l'ora a mano - prova solo a trovare un altro selettore di cui puoi dire questo! Per non parlare del fatto che Any + Time ™ supporta un'infinità di formati di data / ora, orologio 12/24 ore, personalizzazione CSS completa (o jQuery UI) e persino fusi orari!

— Andrew M. Andrews III
fonte

Bel raccoglitore. Gratuito per uso non commerciale, ma devi contattare lo sviluppatore per i costi di licenza per i progetti commerciali.

— Andrew Lewis

6

Accade così che sia lo sviluppatore ...

— steve_c

Non è necessario selezionare separatamente i 10 e gli 1 per i minuti; non hai quasi mai bisogno di tanta precisione. Combina 10 e 1 e crea 12 righe con incrementi di 5 minuti. Si allineerà meglio con le ore, sarà più veloce e sarà sufficiente per la maggior parte dei casi d'uso. Potresti anche considerare di cambiare il cursore in una mano / puntatore quando passi il mouse su quei pulsanti.

— mpen

Grazie per il feedback! Sto lavorando a una libreria sostitutiva che fornirà automaticamente meno pulsanti quando la selezione al minuto non è un requisito.

— Andrew M. Andrews III

che ogni + pagina di tempo ha migliaia di righe di testo e codice, ma non sono riuscito a trovare 1 demo di esempio funzionante del selettore di data / ora sulla pagina .. sigh ... si potrebbe pensare che una sorta di demo sarebbe al in alto da qualche parte.

— Heriberto Lugo