Co to jest dobry selektor czasu JavaScript? [Zamknięte]

86

Jaki jest dobry wybór czasu dla jQuery lub samodzielnego js? Chciałbym czegoś takiego, jak Google używa w swoim kalendarzu, gdzie ma listę typowych czasów w 15-minutowych odstępach lub pozwala ręcznie wpisać czas i sprawdza go.

Element
źródło
Bardzo prosty selektor czasu z przyciskiem obracania Tutaj
om39a
13
Zalecam ponowne otwarcie pytania. Ważne jest, aby zdać sobie sprawę, że kategoria „nie konstruktywna”, jak każda kategoria, powinna mieć wyjątki - pomyślałbym, że włączając w to pytania takie jak to, gdzie odpowiedź wymaga wiedzy programistycznej i nie jest czymś, co można łatwo zbadać.
Dan Nissenbaum

Odpowiedzi:

26

To najlepsze, jakie znalazłem do tej pory http://trentrichardson.com/examples/timepicker/

Felix
źródło
2
W zależności od aplikacji jest to również jeden z moich ulubionych. Musiałem jednak zmienić okres kroku minutowego z 1 na 15, ale to było bardzo łatwe.
Chris Dutrow
mój ulubiony z listy. to jest łatwe, proste i to, czego potrzebuje. Korzystałem już wcześniej z kalendarza Any + Time ™ Datepicker / Timepicker AJAX, ale zamiast tego spróbuję.
Daniel
Witryna (i przykład javascript) nie są już dostępne. Czy jest jej próbka gdziekolwiek indziej?
James Moberg
2
Suwaki nie są najłatwiejszym ani najszybszym sposobem na określenie dokładnego czasu.
mpen
@Mark Zgadzam się z Twoją opinią, najprostszym sposobem może być wybranie listy lub wyświetlenie kalkulatora, aby użytkownik mógł pisać.
Felix
8

Nie byłem zadowolony z żadnego z sugerowanych selektorów czasu, więc stworzyłem swój własny, inspirowany specyfikacją Perifera i HTML5:

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

Możesz użyć nowych atrybutów HTML5 do wprowadzania czasu (krok, min, maks) lub użyć obiektu opcji:

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

Weryfikuje dane wejściowe w następujący sposób:

  • Wstaw „:”, jeśli brakuje
  • Nieprawidłowy czas? Zastąp puste
  • Nieprawidłowy czas według kroku? Zaokrąglij w górę / w dół do najbliższego kroku

Specyfikacja HTML5 nie zezwala na składnię am / pm ani zlokalizowanego czasu, więc dopuszcza tylko format gg: mm. Sekundy są dozwolone zgodnie ze specyfikacją, ale jeszcze tego nie zaimplementowałem.

Jest bardzo "alfa", więc może być kilka błędów. Zapraszam do przesyłania mi poprawek / próśb o ściągnięcie. Przetestowałem ręcznie w IE 6 i 8, FF, Chrome i Opera (najnowsza stabilna na Linuksie dla tych ostatnich).

Gregers
źródło
1
Czy masz dostępne demo?
mpen
Przepraszam, nie. Nie tknąłem tego projektu od 4 lat. Zapraszam do wysyłania próśb o ściągnięcie :)
gregers
6

Możesz przeczytać post twórcy jQuery Johna Resiga na ten temat tutaj: http://ejohn.org/blog/picking-time/ .

Sophie Alpert
źródło
4
Wymaga zbyt dużej precyzji myszy dla przeciętnego użytkownika. Nie jest też od razu oczywiste, jak tego używać (mimo, że twierdzi, że jest to „intuicyjne”) - nie mogę na to spojrzeć i wiem, jak się zachowa, gdy najeżdżam myszką na te cyfry.
mpen
4

Używam ClockPick .

tvanfosson
źródło
Nieźle, ale pozycjonowanie elementu jest wyłączone.
mpen
To doprowadziło mnie do podejrzanej strony z prośbą o aktualizację flasha. Sprawdź łącze i zaktualizuj.
lets0code
3

Galeria CSS zawiera różne narzędzia do wybierania czasu. Spójrz.

Selektor czasu Perifer Design jest podobny do Google

Alagu
źródło
1
Ah Perifer jest dokładnie tym, czego szukam, ale wydaje się, że nie wykonuje żadnej weryfikacji, tj. Pozwala mi wpisać „999999999” jako wartość
Element
3

Jeśli ktoś jest zainteresowany innym JavaScript TimPickerem, opracowałem i utrzymuję wtyczkę jQuery, która wykonuje to zadanie. Działa podobnie jak EZ Time JS (chociaż nie wiedziałem o tym do 5 minut temu: D), pozwalając użytkownikom wprowadzać czas w prawie każdy sposób, z którym czują się komfortowo, i konwertując dane wejściowe na wspólny format.

Kasy na stronę Opcje timepicker jQuery , aby zobaczyć go w akcji.

Willington Vega
źródło
Wersja demonstracyjna jest zepsuta (lub nie rozumiem, jak z niej korzystać!).
PhiLho
1

Przepraszam chłopaki .. może jest trochę za późno .. Używałem NoGray .. jest super ..


źródło
4
Nigdy nie jest za późno, aby ktoś (niekoniecznie oryginalny plakat) uznał go za przydatny. .. ... poza tym, że NoGray jest już wspomniany przez CMS ...
awe
1

Używam timepicker jQuery ui

pryabov
źródło
Zbyt buggy. Awaria przeglądarki, gdy jest około 10-20 elementów sterujących.
Nick Binnet
-1

NoGray jest przyjemnym dla oka, ale jest kilka kwestii związanych z użytecznością. Po pierwsze, zegary analogowe stają się coraz bardziej niejasne, a młodym ludziom czasami trudno jest je odczytać. Po drugie, przeciąganie myszą do określonego czasu jest nieco uciążliwe, podobnie jak w przypadku selektorów czasu używających suwaka. Po trzecie, interakcja klawiatury dla tego selektora jest nieco sporadyczna.

Aby uzyskać bardziej użyteczny wybór czasu, zapoznaj się z kalendarzem Any + Time ™ Datepicker / Timepicker AJAX . Jest to prawdopodobnie najszybszy i najłatwiejszy w użyciu selektor czasu, ponieważ używa prostych przycisków do szybkiego i łatwego wybierania określonych czasów.

Ciekawym testem użyteczności jest to: wybierz nieparzysty czas (powiedzmy 22:32), a następnie zobacz, ile czasu zajmie dokładne wybranie tego czasu za pomocą różnych selektorów czasu. Prawdopodobnie możesz to zrobić szybciej z Any + Time ™ niż mógłbyś zapisać czas ręcznie - po prostu spróbuj znaleźć innego selektora, o którym możesz to powiedzieć! Nie wspominając o tym, że Any + Time ™ obsługuje niezliczoną liczbę formatów daty / czasu, zegar 12/24-godzinny, pełne dostosowanie CSS (lub interfejs użytkownika jQuery), a nawet strefy czasowe!

Andrew M. Andrews III
źródło
Niezły selektor. Darmowy do użytku niekomercyjnego, ale musisz skontaktować się z deweloperem w sprawie kosztów licencji na projekty komercyjne.
Andrew Lewis
6
Tak się składa, że ​​jest programistą ...
steve_c
Wybieranie oddzielnych dziesiątek i jedynek dla minut nie jest konieczne; prawie nigdy nie potrzebujesz tak dużej precyzji. Połącz 10 i 1 i wykonaj 12 rzędów w 5-minutowych odstępach. Będzie lepiej dostosowywał się do godzin, będzie szybszy i wystarczający w większości przypadków użycia. Możesz także rozważyć zmianę kursora na dłoń / wskaźnik podczas najeżdżania na te przyciski.
mpen
Dzięki za opinie! Pracuję nad biblioteką zastępczą, która automatycznie zapewni mniej przycisków, gdy wybór co minutę nie jest wymagany.
Andrew M. Andrews III
że jakakolwiek strona + godzina ma tysiące wierszy tekstu i kodu, ale nie mogłem znaleźć 1 działającego przykładu demo selektora daty / czasu na stronie .. westchnij ... można by pomyśleć, że na gdzieś na górze.
Heriberto Lugo