Buat Pilih Input Datetime Minimalis dengan Flatpickr
Salah satu bidang yang paling sulit untuk dibuat adalah pilih tanggal / waktu. Pengembang sering menggunakan menu pilih sederhana untuk bulan / hari / tahun atau mengandalkan berbagai plugin untuk melakukan pekerjaan itu.
Bidang-bidang tertentu berfungsi dengan baik tetapi sedikit kikuk. Sebagai gantinya, Anda dapat meramaikan formulir dengan Plugin Flatpickr. Itu adalah pemilih kalender JavaScript sumber terbuka gratis tanpa ketergantungan.
Dulu dirancang dengan minimalis dalam pikiran, sehingga dapat masuk ke tata letak situs web apa pun, formulir web apa pun, dan harus dapat digunakan dari perangkat modern apa pun.
Satu hal yang menyenangkan tentang plugin ini adalah berbagai pilihan khusus. Anda dapat mengatur ulang bagaimana tanggal muncul di bidang teks dan di mana kalender dimulai (default aktif “hari ini”).
Tapi, kamu juga bisa gunakan sebagai pemilih tanggal jika Anda tidak perlu untuk pemilihan waktu. Ini hanyalah fitur opsional yang memungkinkan Anda memberikan lebih banyak data melalui formulir dengan pemilih satu ini.
Lihatlah Halaman contoh untuk melihat Flatpickr beraksi.
Anda juga bisa setel opsi yang ditargetkan untuk membatasi perilaku pemilih tanggal, seperti:
- Menolak tanggal / rentang tertentu
- Hanya mengizinkan tanggal / rentang tertentu
- Mengizinkan beberapa pilihan tanggal
- “Mode jangkauan” untuk memilih tanggal mulai & berakhir
- Hanya pemilih tanggal, atau waktu saja, atau keduanya tanggal & waktu bersama
Opsi-opsi ini praktis tidak ada habisnya dan semuanya bekerja melalui plugin JavaScript vanili yang satu ini.
Pengguna seluler sering lebih memilih pemilih tanggal asli tetapi Anda bisa timpa ini dengan pengaturan seluler di JavaScript. Dengan cara ini Anda akan memiliki antarmuka yang sama yang bekerja di semua perangkat.
Dan, Anda bahkan bisa tambahkan dukungan IE9 dengan polyfill yang menjadikan ini salah satu plugin pemilih tanggal yang paling didukung di luar sana.
Instalasi sederhana dengan perintah untuk npm, Bower, dan Yarn. Atau, Anda dapat mengunduh file sumber langsung dari GitHub jika Anda lebih suka rute itu.
Semua yang perlu Anda ketahui dapat ditemukan di halaman pengaturan yang menunjukkan kepada Anda cara menambahkan file ke header Anda & cara memanggil pemilih tanggal ini di bidang apa pun. Mudah salah satu plugin pemilih tanggal terbaik yang dirancang hanya cukup untuk disesuaikan dengan desain apa pun.
