Wybieranie daty / godziny jQuery [zamknięte]

Szukałem porządnej wtyczki jQuery, która poradziłaby sobie zarówno z datami, jak i godzinami. Podstawowy interfejs użytkownika DatePickerjest świetny, ale niestety muszę też mieć czas.

Znalazłem kilka hacków, by DatePicker działał z czasem, ale wszystkie wydają się dość nieeleganckie, a Google nie pokazuje nic fajnego.

Czy istnieje dobra wtyczka jQuery do wybierania dat i godzin w jednym kontrolce interfejsu użytkownika z użytecznym interfejsem?

Zdecydowanie najładniejszą i najprostszą opcją wybierania DateTime jest http://trentrichardson.com/examples/timepicker/ .

Jest to rozszerzenie Datepicker interfejsu użytkownika jQuery, więc będzie obsługiwać te same motywy, a także działa bardzo podobnie, podobna składnia itp. Powinno to być spakowane z imo interfejsu użytkownika jQuery.

@David, dzięki za zalecenie! @fluid_chelsea, właśnie wydałem Any + Time (TM) wersja 3.x, która używa jQuery zamiast Prototype i ma znacznie ulepszony interfejs, więc mam nadzieję, że teraz spełnia twoje potrzeby:

http://www.ama3.com/anytime/

Wszelkie problemy, daj mi znać poprzez link komentarza na mojej stronie!

Moim zdaniem daty i godziny powinny być traktowane jako dwa osobne pola wprowadzania, aby były najbardziej użyteczne i wydajne dla użytkownika. Pozwól użytkownikowi wprowadzać jedną rzecz na raz, to dobra zasada, imho.

Korzystam z podstawowego interfejsu użytkownika DatePicker i następującego selektora czasu.

Ten jest inspirowany tym, którego używa Kalendarz Google:

jQuery timePicker :
przykłady: http://labs.perifer.se/timedatepicker/
projekt na github: https://github.com/perifer/timePicker

Uważam, że jest najlepszy spośród wszystkich alternatyw. Użytkownik może wprowadzać szybko, wygląda czysto, jest prosty i pozwala wprowadzić określone czasy z dokładnością do minuty.

PS: Moim zdaniem: suwaki (używane przez niektóre alternatywne selektory czasu) wykonują zbyt wiele kliknięć i wymagają precyzji myszy od użytkownika (co spowalnia wprowadzanie danych).

Moje najlepsze doświadczenia z datownikiem to prototyp AnyTime . Wiem, że to nie jest jQuery, ale może być warte kompromisu. Nie znam absolutnie żadnego prototypu i nadal jest wystarczająco łatwa do pracy.

Jedno zastrzeżenie, które znalazłem: nie jest kompatybilne z niektórymi przeglądarkami. Oznacza to, że nie działał z nowszą wersją prototypu w Chrome.

Aby dodać do informacji tutaj, The Fluid Project ma ładny napis wiki, który omawia dużą liczbę datowników i / lub selektorów czasu tutaj .

Niedawno to zbadałem i jeszcze nie znalazłem przyzwoitego selektora dat, który zawiera również porządny selektor czasu. Skończyło się to na niesamowitym DatePicker firmy Eyecon , z dwoma prostymi listami rozwijanymi na czas. Kusiło mnie jednak, aby użyć Timepickr.js , wygląda to na naprawdę miłe podejście.

Natrafiłem na ten sam problem. Właściwie opracowałem programowanie po stronie serwera, ale zrobiłem szybkie wyszukiwanie, aby spróbować ci pomóc i znalazłem to.

Wydaje się w porządku, nie patrzyłem zbytnio na źródło, ale wydaje się być czysto JavaScript.

Spójrz:

http://www.rainforestnet.com/datetimepicker/datetimepicker.htm

Oto link do strony demonstracyjnej:

http://www.rainforestnet.com/datetimepicker/datetimepicker-demo.htm

powodzenia

To jest pewien kod, którego używam, aby użytkownik wybrał jeden wybierak danych, ustawił datę i godzinę, a drugi wybrał jeden minutę do tego czasu.

Potrzebowałem tego do niestandardowej kontroli leków ....

Tak czy inaczej, pomyślałem, że może to pomóc komuś innemu, ponieważ nie mogłem znaleźć odpowiedzi gdziekolwiek w Internecie ...

(przynajmniej niepełna odpowiedź)

Należy pamiętać, że 60000 dodane, dodaje jedną minutę. (60 * 1000 milisekund)

$('.frdtPicker').datetimepicker({
        onClose: function(dateText, inst) {
            var endDateTextBox = $('.todtPicker');
            if (endDateTextBox.val() != '') {
                var testStartDate = new Date(dateText);
                var testEndDate = new Date(endDateTextBox.val());
                if (testStartDate > testEndDate) {

                    var testStartDate = new Date(dateText).getTime() + 60000;
                    var testStartDate2 = new Date(testStartDate); 

                    endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
                }
            }
            else {
                var testStartDate = new Date(dateText).getTime() + 60000;
                var testStartDate2 = new Date(testStartDate);
                endDateTextBox.datetimepicker('setDate', (new Date(testStartDate2)));
            }
            $('.frdtPicker').val(dateText); //endDateTextBox.val());

        },
        onSelect: function(selectedDateTime) {
            var start = $(this).datetimepicker('getDate');
            $('.todtPicker').datetimepicker('option', 'minDate', new Date(start.getTime()));
        }
    });

Spójrz na następującą wtyczkę JavaScript.

Kalendarz Javascript z datą i godziną

Uczyniłem to prostym jak to możliwe. ale wciąż jest na początku. Daj mi znać opinie, żebym mógł je poprawić.

Nie jQuery, ale działa dobrze dla kalendarza z czasem: JavaScript Date Time Picker .

Właśnie związałem zdarzenie kliknięcia, aby je wyświetlić:

$(".arrival-date").click(function() {
    NewCssCal($(this).attr('id'), 'mmddyyyy', 'dropdown', true, 12);
});

Wykonuję jedną taką funkcję:

function getTime()
{
    var date_obj = new Date();
    var date_obj_hours = date_obj.getHours();
    var date_obj_mins = date_obj.getMinutes();
    var date_obj_second = date_obj.getSeconds();

    var date_obj_time = "'"+date_obj_hours+":"+date_obj_mins+":"+date_obj_second+"'";
    return date_obj_time;
}

Następnie używam datepicker interfejsu użytkownika jQuery w następujący sposób:

$("#selector").datepicker( "option", "dateFormat", "yy-mm-dd "+getTime()+"" );

Tak więc otrzymuję taką wartość: 2010-10-31 12:41:57

Mieliśmy problem ze znalezieniem takiego, który działałby tak, jak chcieliśmy, więc napisałem jeden. Utrzymuję źródło i naprawiam pojawiające się błędy, a także zapewniam bezpłatne wsparcie.

http://www.yart.com.au/Resources/Programming/ASP-NET-JQuery-Date-Time-Control.aspx