jQuery time picker [zamknięty]

Próbowałem mnóstwo timepicker i nie był zadowolony, więc napisałem [jeszcze] inny. Myślę, że to działa dobrze. Również jest inspirowany z datepicker więc wygląda jak standardowe rzeczy jQuery UI.

Domyślne przyrosty minutowe wynoszą 5 i mogą być ustawione na 15 w opcjach.

Http://fgelinas.com/code/timepicker

Radzę tego nie robić. Uważam, że wystarczająco źle jest zmuszony do korzystania z kontrolki kalendarza tylko do wprowadzenia daty, zwłaszcza gdy nie podano opcji, aby wpisać datę, co mogę zrobić znacznie szybciej niż nawigowanie kolejny zwariowany kontroli.

Zbieracze czasu po prostu przenoszą ten rodzaj fetyszu UI na nową skrajność. Dlaczego nie zezwolić użytkownikom na wpisanie czasu lub po prostu użycie kilku rozwijanych pól przez godziny i minuty. Nawet listy rozwijane pozwalają użytkownikowi po prostu wpisać czas. The time picker w shog9 ' s answer jest bardzo ładny, ale jest niesamowicie skrzypiący w użyciu. Jeśli byłem użytkownikiem końcowym, który musiał korzystać z aplikacji do wprowadzania danych i miał taką kontrolę na stronie, to tylko spowolni mnie i sprawi, że będę chciał przyjść i odciąć deweloperom ręce. :)

Pomyśl najpierw o użyteczności, zanim zobaczysz, jak sprytnie wygląda aplikacja.

Tylko moje skromne zdanie.

To nie jQuery ... ale odkryłem, że lista rozwijana z listą piętnastominutowych interwałów czasu, 8:00, 8:15, 8:30 i tak dalej, jest niezwykle łatwa do interakcji z użytkownikiem.

Nie wiem, czy naprawdępotrzebujesz jQuery sposób, aby to zrobić ... to może być przesada. Tylko opinia oparta na moim osobistym doświadczeniu z użytkownikami i tworzeniem aplikacji biznesowych.

Jeśli jesteś zainteresowany używaniem dobrego parsera czasu i pozwalaniem użytkownikowi na wprowadzenie szerokiego zakresu ważnych ciągów czasu( 8: 00 AM, 8AM, 8a, 8, etc), spójrz na http://www.datejs.com/.

Oto kod jquery, którego używam do pracy z nim.

$('.time').blur(function (e) {
    var val = $(this).val();
    if (!isNaN(val))
        // add minutes to numeric value otherwise it will be interpreted as a date
        val = val + ':00'; 
    var dt = Date.parse(val);
    $(this).val(dt.toString('h:mm tt'))
});

Myślę, że każda odpowiedź, oprócz Keva, jest subiektywna. Widziałem dziesiątki wtyczek time-picker JQuery w sieci i większość z nich była bezużytecznymi, czasochłonnymi sztuczkami, ale jeśli używasz już standardowego jQuery datepicker to Ta wtyczka byłaby odpowiednia.

Zobacz jQuery.timepicker . Całkiem fajne, IMHO...

Najlepszy jaki kiedykolwiek używałem to ten oferowany przez Telerik.

Http://demos.telerik.com/aspnet-ajax/calendar/examples/datetimepicker/overview/defaultcs.aspx

Jest dyskretny, pozwalając użytkownikowi po prostu wprowadzić czas lub kliknąć ikonę zegara, aby wybrać z listy. Zasadniczo tylko bardziej estetyczna metoda korzystania z edytowalnych spadków.

Spróbuj tego wielkiego lib - http://code.google.com/p/mobiscroll/

Demo - http://demo.mobiscroll.com/

Oto moja próba w temacie: http://yoka.github.com/jquery-timeselect/

Używałem Trenta Richardsona timepicker library i uznałem, że jest świetny. Jest to również bardzo popularny, według liczby pobrań.

Napisałem jedną opartą na wtyczce, o której wspomniał Jim (działa jak Google calendar time picker), ale działa przy użyciu jQuery UI autocomplete. Jest znacznie bardziej stabilny niż wspomniana wtyczka. Miałem problemy z pozycjonowaniem się na stronie. Wtyczka pobiera tablicę, zakres czasu i interwały lub źródło ajax... możesz więc dostosować go do swoich serc.

Chociaż nie ma standardowej, używam jQuery plugin z Keith Wood. W przeciwieństwie do niektórych, to degraduje się do pola tekstowego (które można nadal wpisać, podczas wykonywania walidacji), a także może być używany za pomocą myszy, jeśli jesteś tak skłonny.

Moja sytuacja była nieco inna, potrzebowałem selektora daty, ale też nie mogłem go znaleźć. Więc postanowiłem napisać jeden. Możesz znaleźć pełne źródło tutaj ; zamieściłem również szybkie demo .

Nie mogłem znaleźć wtyczki, która zrobiła to, co chciałem (np. wielokolumnowe autouzupełnianie połączone z maskowaniem wejścia na czas), więc napisałem MenuOptions

Jak to wygląda

Widżet Any+Time™ DatePicker/TimePicker AJAX Calendar Widget umożliwia wybór czasu, który przy użyciu myszy jest tak szybki, jak pisanie ręcznie, ale ma dodatkową zaletę zapobiegania błędom. Czas może być sformatowany w dowolny sposób. Obsługuje również manipulację klawiaturą, chociaż co prawda dostęp do klawiatury nie jest tak szybki jak mysz lub pisanie... ale ponownie, gwarantuje, że wartość będzie w wymaganym formacie. Jest również łatwy do dostosowania i może obsługiwać daty jako cóż.