10 Plugin Pemilih Tanggal Sumber Terbuka Gratis

Pilih menu adalah pilihan umum untuk pemilih tanggal karena mudah diatur. Tetapi setelah beberapa dekade menu MM/DD/YY, saya pikir pengguna kami layak mendapatkan yang lebih baik.

Cukup mudah untuk menambahkan pemilih tanggal ke formulir Anda, dan sebagian besar plugin pemilih tanggal benar-benar gratis. Setelah Anda mempelajari proses pengaturan dasar, Anda tidak akan pernah kembali, jadi ini hanya masalah menemukan yang bagus. Saya telah menjelajahi web untuk mencari plugin terbaik dan mengatur semuanya dalam posting ini.

Anda akan menemukan plugin vanilla JS, plugin jQuery, dan bahkan ekstensi untuk kerangka kerja seperti Bootstrap. Apa pun yang Anda butuhkan, pasti ada plugin di sini untuk Anda.

1. Flatpickr

Plugin Flatpickr yang ringan mudah digunakan dan bahkan lebih mudah diatur. Ini dirancang dengan mempertimbangkan kesederhanaan sehingga UI default harus menyatu dengan tata letak apa pun.

Jika Anda mengintip halaman contoh, Anda akan melihat datepicker ini tidak terlalu rumit. Tapi itulah yang sering diinginkan pengguna: antarmuka sederhana untuk memasukkan data dan melanjutkan.

Dengan Flatpickr Anda dapat menyesuaikan tanggal, bulan, dan tahun awal bersama dengan batasan tanggal mana yang dapat dipilih. Plus, Anda dapat menambahkan parameter waktu opsional menggunakan jam 12H atau 24H.

Tidak diragukan lagi ini adalah salah satu plugin pemilih tanggal yang lebih baik hanya untuk desain, UX, dan fiturnya.

2. Pickadate.js

Pilihan lain yang sangat saya sukai adalah plugin Pickadate.js. Ini dirancang agar ramah seluler dan sepenuhnya responsif sehingga merupakan solusi hebat untuk semua perangkat.

Pickadate berjalan di jQuery, jadi Anda memang membutuhkan perpustakaan itu sebagai ketergantungan. Namun, file ini cukup ringan, dan tidak perlu banyak waktu untuk membuatnya bekerja, jadi bahkan dengan jQuery Anda tidak akan melihat adanya jeda halaman.

Ini menawarkan menu pilihan tanggal dan waktu, jadi ini adalah opsi berfitur lengkap apa pun data yang Anda kumpulkan.

3. Pemilih Rentang Tanggal

Pemilih rentang input sangat umum dengan program penjadwalan dan aplikasi data visual. Misalnya Google Analytics menggunakan pemilih rentang tanggal mereka sendiri untuk data pengunjung di situs web tertentu.

Untuk membuat ulang efek ini, coba Date Range Picker. Ini dirancang agar sesuai dengan stylesheet CSS Bootstrap tetapi juga dapat digunakan sendiri.

Plus mendukung pemilih multi-bulan, pemilih satu bulan, dan nilai yang telah ditentukan untuk rentang tanggal umum (minggu lalu, bulan lalu, dll).

Sejauh ini, plugin pemilihan rentang JS yang dirancang paling baik yang pernah saya lihat.

4. Datepair.js

Untuk menggunakan sesuatu yang sedikit lebih sederhana untuk pemilihan rentang, coba Datepair.js.

Ini bergantung pada bidang input ganda untuk memilih tanggal mulai & tanggal akhir suatu rentang. Ini juga dapat mencakup rentang waktu berdasarkan pengaturan Anda dan cara Anda mengonfigurasi plugin.

Apakah ini lebih baik daripada UI pemilih tanggal tunggal? Terserah Anda (atau klien Anda) untuk memutuskan.

Tapi ini adalah plugin sederhana untuk setup dan pengunjung Anda mungkin lebih memilih input bidang tunggal.

5. DateTimePicker

Inilah salah satu plugin yang lebih unik di luar sana dengan antarmuka yang cukup abnormal.

Plugin DateTimePicker memiliki menu tarik-turun responsifnya sendiri yang memungkinkan pengguna memilih tanggal/waktu mereka menggunakan ikon plus & minus.

Di satu sisi, ini lebih mudah untuk melompat-lompat dan dengan cepat mengubah bulan/tahun dengan beberapa ketukan. Tapi itu juga bukan UI kalender biasa sehingga mungkin perlu penyesuaian dari pengguna yang tidak terbiasa dengan antarmuka ini.

Ada pro & kontra untuk semuanya, jadi saya katakan mengintip plugin dan lihat apa yang Anda pikirkan. Ini mendukung input tanggal & waktu yang terpisah, tetapi Anda juga dapat menggabungkannya bersama-sama membuat pemilihan tanggal waktu hanya dengan sekali klik.

6. glDatePicker

Untuk desain mendetail dan banyak fitur opsional, lihat plugin glDatePicker. Ini cukup ringan mengingat berapa banyak yang Anda dapatkan dan ukurannya sekitar 7KB saat diperkecil.

Ini berjalan di atas jQuery, jadi Anda harus mempertimbangkannya juga. Tapi itu salah satu dari sedikit plugin yang menawarkan tema cantik untuk layar pemilihan tanggal kalender.

Ini memiliki beberapa template yang telah dirancang sebelumnya, tetapi juga dilengkapi dengan properti CSS yang dapat Anda ubah sendiri. Belum lagi semua fungsi JS memiliki panggilan balik jadi jika Anda merasa nyaman dengan pengkodean, Anda dapat menambahkan fitur Anda sendiri ke dalam campuran.

7. Pemetik jahat

Meskipun secara teknis ini bukan pemetik tanggal, ini adalah salah satu pemetik waktu yang lebih baik di luar sana.

Wickedpicker adalah plugin pemilihan waktu yang didukung oleh jQuery yang berfungsi pada bidang input apa pun. Mendukung input pengguna untuk jam/menit dan pengaturan AM/PM. Anda juga dapat menjalankannya pada jam 24 jam dengan opsi JS sederhana.

Beberapa plugin datepicker memiliki pilihan waktu, tetapi datang sebagai fitur tambahan. Plugin ini dirancang semata-mata untuk input waktu, jadi ini adalah pilihan yang bagus jika hanya itu yang Anda butuhkan.

8. Bootstrap Datepicker

Siapa pun yang akrab dengan Bootstrap tahu betapa bergunanya itu untuk proyek baru. Jika Anda sering mendesain situs di Bootstrap maka Anda harus menyimpan Datepicker Bootstrap ini.

Ini adalah salah satu dari sedikit plugin yang dibuat khusus untuk tata letak BS3, dan juga harus kompatibel dengan rilis Bootstrap 4 yang akan datang.

Desainnya mencakup bagian untuk mengubah bulan & tahun bersama dengan pemilih waktu untuk mengubah menit/jam di pemilih tanggal Anda. Ini menyatu dengan sempurna ke dalam GUI BS sehingga tidak diragukan lagi merupakan bahan pokok bagi siapa saja yang menggunakan Bootstrap.

9. Pemilih Tanggal Yayasan

Kerangka kerja frontend populer lainnya adalah Foundation dan jika Anda lebih menyukai perpustakaan itu, Anda harus memeriksa datepicker Foundation ini juga 100% gratis.

Itu juga dilengkapi dengan pemilih waktu dan opsi untuk memasukkan waktu di dalam layar pemilihan tanggal. Anda bahkan dapat menentukan tanggal berdasarkan pengaturan tetap (yaitu hanya tanggal tertentu yang tersedia) dan membatasi tanggal tersebut pada waktu tertentu.

Anda bahkan dapat mengatur ulang input waktu dengan pilihan tetap seperti interval 15 menit.

Ada banyak hal yang dapat Anda lakukan dengan plugin ini, jadi ini adalah tambahan yang bagus untuk situs web Foundation mana pun.

10. FoxRunSoftware DatePicker

Ini adalah salah satu plugin teratas di GitHub untuk datepickers jQuery. Ini hanya berjudul "DatePicker" tetapi untuk membedakannya dari yang lain adalah plugin yang dirancang oleh FoxRunSoftware.

Muncul dengan antarmuka yang bersih, dan secara default, ia menggunakan jendela GUI 3 bulan untuk pemilihan tanggal. Ini terasa seperti pemilih Google Analytics kecuali sedikit lebih kecil.

Callback cukup sederhana untuk dikodekan, dan Anda memiliki banyak kendali atas cara mengelola UX. Tentu saja datepicker yang layak disimpan jika Anda ingin mereplikasi GUI Analytics.

11. JQ Datepicker

Ini satu lagi plugin datepicker dengan judul sederhana Datepicker. Sekali lagi ini berjalan di jQuery tetapi yang ini dirancang oleh pengembang Cina Fengyuan Chen.

Plugin Datepicker ini sangat fenomenal dan memiliki banyak dokumentasi untuk pengembang JS yang lebih baru.

Halaman demo utama sangat bagus untuk bermain-main tetapi periksa repo GitHub jika Anda ingin mendapatkan pengaturan & menjalankan plugin ini di situs web Anda.

Dan jika Anda pernah mencari lebih banyak plugin datepicker coba cari di GitHub. Pengembang web merilis plugin baru setiap saat sehingga Anda tidak pernah tahu apa yang akan Anda temukan.