pemilih tanggal / waktu jQuery [ditutup]

245

Saya telah mencari-cari plugin jQuery yang layak yang dapat menangani tanggal dan waktu. UI inti DatePickermemang hebat, tapi sayangnya saya harus bisa meluangkan waktu juga.

Saya telah menemukan beberapa peretasan untuk DatePicker untuk bekerja dengan kali, tetapi mereka semua tampaknya cukup canggung dan Google tidak menghasilkan sesuatu yang bagus.

Apakah ada plugin jQuery yang baik untuk memilih tanggal dan waktu dalam satu kontrol UI dengan antarmuka yang dapat digunakan?

Chelsea
sumber
Saya cukup yakin bahwa contoh saya agak kurang membingungkan dan lebih ramah pengguna. Ada pro dan kontra dari keduanya.
Michael Stone

Jawaban:

251

Sejauh ini pilihan pemilih DateTime terbaik dan paling sederhana adalah http://trentrichardson.com/examples/timepicker/ .

Ini adalah ekstensi dari jQuery UI Datepicker sehingga akan mendukung tema yang sama juga bekerja dengan cara yang sama, sintaksis yang serupa, dll. Ini harus dipaket dengan imo jQuery UI.

xordon
sumber
3
Saya telah menggunakan ini, dan saya MENYUKAINYA.
Sonny
3
Saya suka ini, tapi masih SANGAT buggy.
Alastair Pitts
11
"SANGAT kereta"? Hampir tidak. Saya menggunakannya dalam kode produksi, dan sudah cukup lama. Ini juga dikembangkan secara aktif.
Sonny
7
@ Sonny: apakah Anda menggunakannya dalam produksi tidak berpengaruh pada apakah itu buggy atau tidak. Anda mungkin tidak melihat bug-nya karena Anda tidak melakukan hal-hal dengan itu yang mengekspos mereka, yang mungkin Alastair. Di sisi lain, ia tidak menawarkan bukti apa pun untuk klaimnya, jadi saya tidak cenderung menganggapnya terlalu serius ...
iconoclast
18
Masalah terbesar saya dengan plugin ini adalah UI: mengapa saya ingin menggunakan slider, yang horizontal !, untuk memasukkan waktu !? Terlihat dan terasa sangat aneh bagi saya. Saya sudah memiliki pengalaman berkali-kali dengan slider di mana saya tidak bisa mendapatkan ke nomor yang saya inginkan (berulang kali sedikit lebih dari sedikit di bawah) dan akhirnya saya mengetiknya. Keyboard biasanya merupakan cara termudah untuk memasukkan nilai numerik yang tepat. Jika Anda menginginkan metode input visual, jam adalah waktu normal, bukan slider. Sulit untuk diimplementasikan, tetapi mungkin sebenarnya berguna (selama input keyboard juga memungkinkan).
iconoclast
46

@ David, terima kasih untuk rekomendasinya! @fluid_chelsea, saya baru saja merilis Any + Time (TM) versi 3.x yang menggunakan jQuery dan bukan Prototipe dan memiliki antarmuka yang jauh lebih baik, jadi saya harap sekarang memenuhi kebutuhan Anda:

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

Masalah apa pun, harap beri tahu saya melalui tautan komentar di situs web saya!

Andrew M. Andrews III
sumber
6
Any + Time (TM) versi 4.x sekarang tersedia! Rilis baru ini mendukung ZONA WAKTU (temukan ITU di pemilih lainnya!) Serta pemilih / rantai chiring, penghapusan mudah (hindari kebocoran memori!) Dan banyak perbaikan lainnya. Tolong beri tumpangan, dan jika Anda memiliki masalah atau saran, beri tahu saya melalui halaman komentar di situs web saya.
Andrew M. Andrews III
4
Setiap + Waktu terlihat sangat apik. Saya suka itu.
Zack Peterson
Baru saja menerapkan AnyTime dalam beberapa menit pada aplikasi Rails. Bekerja dengan sempurna.
Gwyn Morfey
Saya baru saja memilih pemilih AnyTime sebagai pemilih pilihan saya untuk aplikasi JSF saya! Terima kasih untuk produk yang bagus, terus bekerja dengan baik!
Arg
Any + Time menambahkan div tersembunyi baru untuk UI untuk setiap input Any + Time (tidak seperti datepicker UI jQUery yang menggunakan UI div tersembunyi) ini membuat banyak downgrade kinerja dalam MSIE6 yang dirancang dengan buruk. Jadi jangan gunakan Waktu + Kapan pun jika Anda perlu mendukung MSIE6!
Eduardo
14

Dalam pandangan saya, tanggal dan waktu harus ditangani sebagai dua kotak input terpisah agar menjadi paling bermanfaat dan efisien bagi pengguna untuk input. Biarkan pengguna memasukkan satu hal pada satu waktu adalah prinsip yang bagus, imho.

Saya menggunakan DatePicker inti UI , dan pemetik waktu berikut.

Yang ini terinspirasi oleh yang digunakan Kalender Google:

jQuery timePicker :
contoh: http://labs.perifer.se/timedatepicker/
proyek di github: https://github.com/perifer/timePicker

Saya menemukan itu menjadi yang terbaik di antara semua alternatif. Pengguna dapat memasukkan dengan cepat, terlihat bersih, sederhana, dan memungkinkan pengguna untuk memasukkan waktu tertentu hingga menit.

PS: Dalam pandangan saya: penggeser (digunakan oleh beberapa pemetik waktu alternatif) mengambil terlalu banyak klik dan memerlukan ketelitian mouse dari pengguna (yang membuat input lebih lambat).

Magne
sumber
Core UI DatePicker: jqueryui.com/demos/datepicker
Magne
Ini membunuh manfaat mengikat model C # MVC untuk bidang itu
Serj Sagan
13

Pengalaman terbaik saya dengan datepicker adalah dengan AnyTime berbasis prototipe . Saya tahu itu bukan jQuery, tetapi mungkin masih layak untuk dikompromikan untuk Anda. Saya sama sekali tidak tahu prototipe, dan itu masih cukup mudah untuk dikerjakan.

Satu peringatan yang saya temukan: itu tidak kompatibel ke depan pada beberapa browser. Artinya, itu tidak bekerja dengan versi prototipe yang lebih baru di Chrome.

David Berger
sumber
1
Jika saya bisa menggunakan prototipe ini tidak akan menjadi masalah, sayangnya kami terjebak dengan jQuery untuk aplikasi ini.
Chelsea
7
Hanya pembaruan - AnyTime 3 sekarang berfungsi dengan jQuery.
Jaxidian
Saya belum memikirkan hal ini selama berbulan-bulan. Tetapi proyek pribadi saya membutuhkan pembaruan dan saya siap untuk melakukan jquery. Saya pikir saya akan mengganti datepicker sementara saya melakukannya karena saya tidak memerlukan semua fitur dari Any + Time dan saya pikir saya mungkin akan melakukan semua jQuery. Dan bam! Saya menemukan ini. Waktu yang mengagumkan.
David Berger
Bagus, meskipun pemilih tahun (mengklik <atau>) tidak menyenangkan bagi saya.
seorang coder
7

Hanya untuk menambah info di sini, The Fluid Project memiliki tulisan wiki yang bagus yang mengulas sejumlah besar tanggal dan / atau pemilih waktu di sini .

Jaxidian
sumber
4

Saya meneliti ini baru-baru ini dan belum menemukan pemilih tanggal yang layak yang juga termasuk pemilih waktu yang layak . Yang akhirnya saya gunakan adalah DatePicker yang mengagumkan dari eyecon , dengan dua dropdown sederhana untuk waktu. Saya tergoda untuk menggunakan Timepickr.js , sepertinya pendekatan yang sangat bagus.

tipuan
sumber
3

Saya telah mengalami masalah yang sama. Saya sebenarnya mengembangkan pemrograman menggunakan server side saya, tetapi saya melakukan pencarian cepat untuk mencoba dan membantu Anda dan menemukan ini.

Sepertinya baik-baik saja, tidak melihat sumber terlalu banyak, tetapi tampaknya murni JavaScript.

Lihatlah:

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

Inilah tautan halaman demo:

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

semoga berhasil

Michael Stone
sumber
Saya telah menggunakan ini selama beberapa tahun. Sudah agak panjang di gigi tetapi bekerja.
seorang coder
1

Ini adalah beberapa kode yang saya gunakan untuk meminta pengguna memilih satu datetimepicker, mengatur datetime, dan meminta datetimepicker lainnya menambahkan One Minute pada waktu itu.

Saya membutuhkan ini untuk kontrol obat kustom ....

Ngomong-ngomong, saya pikir itu mungkin bisa membantu orang lain karena saya tidak dapat menemukan jawabannya di mana pun secara online ...

(setidaknya bukan jawaban lengkap)

Perlu diingat bahwa 60000 ditambahkan, tambah satu menit. (60 * 1000 milidetik)

$('.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()));
        }
    });
carlos martini
sumber
1

Bukan jQuery, tetapi berfungsi dengan baik untuk kalender dengan waktu: JavaScript Date Time Picker .

Saya hanya mengikat acara klik untuk memunculkannya:

$(".arrival-date").click(function() {
    NewCssCal($(this).attr('id'), 'mmddyyyy', 'dropdown', true, 12);
});
bigspotteddog
sumber
1
Memperbarui tautan - mereka memindahkannya.
bigspotteddog
Saya telah menggunakan yang itu selama beberapa tahun, meskipun saya memintanya secara berbeda (karenanya tidak mengenali dari kode Anda). Saya telah bermigrasi ke DatePicker jquery, karena hutan hujan yang terlihat agak panjang di gigi.
seorang coder
0

Saya membuat satu fungsi seperti ini:

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

Lalu saya menggunakan datepicker UI jQuery seperti ini:

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

Jadi, saya mendapatkan nilai seperti ini: 2010-10-31 12:41:57

dhaniBinZain
sumber
kadang-kadang kita perlu menentukan waktu (tidak menggunakan fungsi getTime)
bungdito