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.


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/


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


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


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 .


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


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.


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


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

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!


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
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.