25 Contoh Datepicker Bootstrap Gratis yang Berguna

Kami sering akhirnya meninjau berbagai cuplikan datepicker Bootstrap gratis, yang memberi kami koleksi solusi praktis yang luas.

Bukan hanya itu!

Alih-alih secara EKSKLUSIF mengandalkan alat pihak ketiga, kami juga membuat beberapa input pemilih tanggal.

Yang sekarang tersedia untuk Anda secara gratis .

Anda dapat membuat hidup pengguna Anda lebih mudah dan nyaman. Milik Anda juga, karena Anda tidak perlu membuat datepicker dari awal.

Mulai DI SINI, baik itu formulir terkait tanggal atau pencarian yang ingin Anda tambahkan ke aplikasi web Anda.

Tidak ada lagi pekerjaan manual. Beberapa klik dan Anda selesai!

Kalender V09

Biarkan nama alternatif datepicker kami tidak menipu Anda, karena kami merilisnya bersama dengan koleksi lengkap template kalender kami.

Tapi mari kita selami itu.

Alih-alih memilih tanggal yang sesuai, cuplikan gratis ini bekerja lebih keras dengan pemilihan waktu. Saat Anda mengklik bilah, kumpulan opsi terbuka dengan pintasan di bagian bawah.

Anda juga dapat menggunakan chevron yang mengarah ke atas untuk menambahkan detik atau tekan tanda X untuk menutup datepicker.

Info lebih lanjut / Unduh

Kalender V12

Kalender V12 adalah datepicker Bootstrap dengan tata letak modern dan minimalis . Karena tampilannya yang rapi, Anda dapat dengan mudah mengintegrasikannya ke dalam berbagai tema situs web dan desain aplikasi apa adanya.

Widget ini memiliki efek hover, tombol untuk tanggal hari ini, opsi untuk menghapus pilihan, dan tombol tutup.

Ini dengan mudah menampilkan bulan dan tahun di bagian atas dengan panah kiri dan kanan untuk melompat dengan mudah ke bulan berikutnya atau sebelumnya.

Info lebih lanjut / Unduh

Kalender V13

Jika Anda menawarkan pengguna Anda untuk memilih rentang tanggal untuk layanan Anda, pemesanan, apa pun, Kalender V13 adalah cara yang tepat untuk memilih. Datepicker Bootstrap ini memiliki dua widget , membuatnya memilih tanggal yang tepat sangat nyaman.

Desain cuplikan gratis sama dengan yang di atas olahraga, artinya, minimal dan to the point.

Ketika pengguna memilih tanggal, itu muncul di bar dalam format hari/bulan/tahun. Mereka juga dapat dengan CEPAT menghapus pilihan atau memilih tanggal hari ini dengan satu klik.

Info lebih lanjut / Unduh

Kalender V14

Jika Anda mencari datepicker Bootstrap minimalis yang melakukan pekerjaan dengan sangat baik, Anda akan menyaksikan hasil yang bagus dengan Kalender V14.

Alat ini bekerja dengan baik di luar kotak karena kesederhanaannya yang berlaku untuk desain web apa pun. Ini benar-benar hanya datepicker tanpa barang mewah, fitur tambahan, tombol reset, dll.

Unduh, sematkan, dan hanya itu!

Info lebih lanjut / Unduh

Kalender V15

Pemilih rentang tanggal kalender ini berguna untuk pemesanan online, baik untuk kamar hotel, mobil, atau lainnya.

Desainnya sangat mudah , jadi Anda bahkan tidak perlu mengubah apa pun selain menggunakannya langsung. Namun, Anda dapat mengubah warna tanggal yang disorot atau menggunakan versi default.

Karena ini adalah datepicker Bootstrap, Anda tahu kinerjanya sangat bagus di perangkat seluler dan desktop.

Info lebih lanjut / Unduh

Kalender V16

Pertahankan hal-hal minimal namun berani dengan kalender/pemilih tanggal sebaris ini, yang sekarang dapat Anda sematkan ke dalam proyek atau aplikasi Anda sesuka hati.

Tampilan bersih tampak cantik di berbagai ukuran layar untuk kesenangan pengguna Anda.

Struktur desain menampilkan bulan dan tahun di bagian atas, diikuti oleh hari kerja dari Minggu hingga Sabtu dan tanggal. Seorang pengguna juga dapat menggunakan POINTER kiri dan kanan untuk memilih bulan yang berbeda.

Info lebih lanjut / Unduh

Kalender V17

Berikut adalah template Bootstrap baru yang menampilkan kalender sebaris dengan bilah hasil di atasnya. Setelah pengguna memilih tanggal, tanggal tersebut akan muncul di bilah dengan urutan sebagai berikut – bulan/hari/tahun .

Bilah hasil kosong secara default, muncul dengan teks ajakan bertindak, mendesak pengguna untuk memilih tanggal. Terlebih lagi, kalender dilengkapi dengan tanggal hari ini yang telah dipilih sebelumnya.

Tata letaknya fleksibel dan 100% mobile-responsive, sedangkan kode USER-FRIENDLY untuk eksekusi cepat.

Info lebih lanjut / Unduh

Contoh datepicker bootstrap oleh pengguna CodePen

Ini adalah contoh datepicker Bootstrap gratis. Pengguna CodePen telah mengembangkannya. Ini adalah template yang sepenuhnya dapat disesuaikan . Buat perubahan sebagai preferensi Anda.

Contoh ini menyediakan bidang input dengan teks placeholder 'dd.mm.yyyy'. Anda dapat melihat ikon kecil di sisi kanan bidang ini. Setelah mengklik bidang input ini, kalender bulan dan tahun saat ini muncul. Anda dapat melihat semua tanggal bulan ini di atasnya. Pengguna juga dapat membawa kalender ini dengan mengklik ikon kecil di sisi kanan.

Saat Anda memilih tanggal, itu akan DISOROT dengan warna biru di kalender. Warna latar belakang tanggal yang dipilih menjadi biru. Saat mengklik tanggal, tanggal segera muncul di bidang input.

Info lebih lanjut / Unduh

Check-in dan check-out datepicker

Ini adalah contoh datepicker Bootstrap hebat lainnya yang dikembangkan oleh Amanda Louise Acosta Morais. Seperti yang disarankan oleh nama template ini, ini memungkinkan pengguna untuk memilih tanggal check-in dan check-out.

Ada dua bidang input, dengan teks placeholder 'Check-In' dan 'Check-Out' di template ini. Ketika pengguna mengkliknya, sebuah kalender muncul sehingga pengguna dapat memilih tanggal.

Ada ikon kalender kecil dengan teks placeholder yang mengisyaratkan kepada pengguna bahwa datepickers akan terbuka setelah mengklik bidang input.

Info lebih lanjut / Unduh

Bootstrap datepicker oleh Sreekanth Are

Ini adalah template datepicker yang sangat berguna yang dibuat oleh Sreekanth Are. Ini memiliki antarmuka pengguna yang bagus dan bersih. Dari tangkapan layar template ini, Anda dapat melihat bahwa ada kolom input.

Ketika pengguna mengkliknya, mereka dapat melihat tanggal saat ini di bidang input . Dan ketika pengguna mengklik ikon kalender, datepicker muncul. Tanggal ditempatkan di bidang input pada pilihan.

Format tanggal yang digunakan adalah 'yyyy-mm-dd'.

Info lebih lanjut / Unduh

Bootstrap datepicker dengan input material

Contoh datepicker besutan Salah Uddin ini memiliki tampilan material. Halaman web memiliki tiga bidang input. Ketika pengguna mengklik kolom input kedua, datepicker yang sangat modern akan muncul.

Fungsionalitasnya sama dengan datepickers lainnya. Satu-satunya perbedaan adalah bahwa desainnya jauh lebih baik. Ini terlihat sangat keren. Jenis template datepicker modern ini akan memberi pengguna aplikasi web Anda pengalaman pengguna yang luar biasa .

Pengguna situs web Anda akan menyukai datepicker yang luar biasa ini. Jadi jika menurut Anda template ini cukup bagus, Anda bisa menggunakannya di situs web Anda.

Info lebih lanjut / Unduh

Bootstrap datepicker oleh Vaidehi Baviskar

Ini adalah template datepicker Bootstrap keren yang dikembangkan oleh pengguna CodePen bernama Vaidehi Baviskar. Seperti yang Anda lihat dari tangkapan layar contoh ini, ada judul di atas bidang input, 'Pilih Tanggal:.'

Ini memberitahu pengguna untuk memilih tanggal. Secara default, Anda dapat melihat tanggal saat ini di bidang input. Saat Anda mengklik bidang input atau ikon kecil , datepicker muncul.

Anda dapat melihat semua tanggal dari bulan ini di alat datepicker ini.

Anda dapat memilih tanggal dari alat ini dan tanggal yang dipilih akan muncul di kolom input.

Info lebih lanjut / Unduh

Bootstrap datepicker oleh pengguna CodePen

Ini adalah contoh datepicker yang sangat sederhana. Ini terlihat sangat mirip dengan contoh sebelumnya. Dalam contoh ini, ada dua field input dengan dua datepicker.

Tanggal saat ini disorot dengan latar belakang kuning dalam contoh pemilih tanggal ini, dan ketika pengguna mengklik tanggal tertentu, warna latar belakangnya berubah menjadi biru.

Saat tanggal saat ini disorot, menjadi mudah bagi pengguna untuk dengan cepat menemukan tanggal saat ini dari alat ini dan dengan mudah memilih tanggal. Jika mereka ingin memilih tanggal saat ini, mereka dapat dengan cepat melakukannya saat tanggal saat ini disorot.

Mereka dapat langsung melihat tanggal saat ini dari semua tanggal di bulan ini.

Info lebih lanjut / Unduh

Template Datepicker oleh Jowi Englis

Ini adalah contoh datepicker standar yang dibuat oleh Jowi Englis, pengguna CodePen. Seperti yang dapat kita lihat dari tangkapan layar, ada judul di atas bidang input, 'Tanggal kalender:'.

Anda selalu dapat mengubahnya menjadi sesuatu yang lebih bermakna dan pantas. Ikon kalender di kolom input terlihat keren. Teks placeholder dari bidang input adalah 'Pilih Tanggal', yang merupakan keterangan yang sangat tepat untuk pemilih tanggal ini.

Saat Anda mengklik bidang input, pemilih tanggal yang cantik muncul, di mana tanggal saat ini disorot dengan latar belakang biru.

Dari datepicker ini, pengguna situs web Anda tidak hanya dapat memilih tanggal dari bulan berjalan, mereka juga dapat memilih tanggal dari bulan dan tahun yang berbeda.

Info lebih lanjut / Unduh

Bootstrap datepicker oleh Richard Bailey

Ini adalah contoh datepicker Bootstrap mengagumkan yang dikembangkan oleh Richard Bailey. Template datepicker ini akan memungkinkan pengguna aplikasi web Anda untuk memilih rentang tanggal. Jadi ada dua datepicker yang disediakan dalam contoh ini.

Ada dua bidang input, mengklik masing-masing bidang akan menampilkan datepicker. Jika Anda ingin pengunjung situs web Anda memilih rentang tanggal, Anda dapat menggunakan template gratis ini.

Karena sepenuhnya dapat disesuaikan, Anda dapat menyempurnakan desain dengan memodifikasi kode. Saat pengguna memilih dua tanggal dari pemilih tanggal, rentang tanggal muncul di halaman web, tepat di bawah bidang input.

Info lebih lanjut / Unduh

Bootstrap datepicker oleh Jose Castillo

Jika Anda memerlukan datepicker untuk situs web Anda, Anda tidak perlu lagi membuatnya dari awal. Anda dapat mengunduh template ini dan mengintegrasikannya ke dalam situs web Anda.

Anda dapat mengubah desain agar terlihat lebih baik. Seperti yang terlihat dari tangkapan layar di atas, ada dua bidang input . Ketika Anda mengklik salah satu dari mereka, datepicker muncul di layar.

Tanggal saat ini memiliki latar belakang kuning. Jadi pengguna dapat dengan cepat mengidentifikasinya dari daftar tanggal yang ditampilkan di datepicker.

Info lebih lanjut / Unduh

Pemetik tanggal bootstrap oleh Valentin

Pena ini memiliki dua bidang input dengan dua datepicker. Saat Anda mengklik bidang input, datepicker muncul dengan sangat lancar. Anda dapat melihat efek visual yang sangat keren ketika datepicker terbuka.

Efek visual seperti itu sangat meningkatkan pengalaman pengguna. Anda dapat menggunakan template ini jika Anda mencari contoh datepicker yang sangat keren. Ini adalah contoh datepicker yang luar biasa yang dirancang dengan Bootstrap.

Untuk melihat lebih dekat pada contoh ini, klik tombol 'Pratinjau' di bawah dan lihat pratinjau yang bagus dari contoh ini.

Info lebih lanjut / Unduh

Bootstrap datepicker oleh Atanas Atanasov

Ini adalah contoh bagus dari datepicker Bootstrap gratis. Jika Anda mencari datepicker yang sangat standar , gunakan yang ini.

Saat Anda mengklik ikon kalender, datepicker muncul. Meskipun contoh datepicker ini tidak menyoroti tanggal saat ini, namun terlihat sangat sederhana dan kuat.

Anda dapat melihatnya di kolom input saat Anda memilih tanggal tertentu. Jika Anda memerlukan judul di atas bidang input, Anda dapat menambahkannya.

Info lebih lanjut / Unduh

Bootstrap datepicker oleh M Gambil

Ini adalah contoh datepicker keren yang dikembangkan oleh M Gambil. Ada bidang teks tempat Anda dapat memasukkan beberapa teks. Di atas bidang teks, ada judul dengan 'Masukkan tanggal'. Ini memberitahu pengguna untuk memasukkan tanggal.

Saat Anda mengklik bidang teks, datepicker muncul. Saat Anda mengklik tanggal, itu akan ditampilkan di bidang teks . Ada area di bawah bidang teks untuk menampilkan output. Di area itu, Anda dapat melihat teks yang disebut 'Tanggal adalah:'.

Info lebih lanjut / Unduh

Bootstrap datepicker oleh tuanitpro

Contoh datepicker Bootstrap ini memberi Anda kotak teks sederhana. Ketika Anda mengkliknya, datepicker muncul. Anda dapat melihat tanggal yang dipilih di bidang teks. Ini ditunjukkan dengan cara ini: '8/22//2019'. Jika Anda lebih suka format tanggal yang berbeda , ubah format tanggal dari kode.

Dan jika Anda perlu meningkatkan desain, Anda bisa melakukannya.

Karena ini adalah contoh kode sumber terbuka, Anda dapat membuat perubahan pada kode untuk menyempurnakan template agar terlihat bagus di situs web Anda.

Info lebih lanjut / Unduh

Template datepicker oleh Priyank Panchal

Ini adalah template datepicker berkualitas tinggi yang dikembangkan oleh Priyank Panchal. Ini memiliki dua bidang input, bidang 'Dari' dan bidang 'Ke'. Bidang ini memungkinkan pengguna untuk memilih rentang tanggal.

Saat Anda mengklik bidang input, datepickers muncul.

Tanggal yang dipilih ditampilkan di kolom input. Ada juga tombol dalam contoh ini. Ketika Anda mengkliknya, Anda dapat melihat pesan . Anda dapat menentukan apa yang akan terjadi ketika pengguna mengklik tombol dari kode.

Jika Anda tidak memerlukan tombol ini, Anda dapat menghapusnya.

Info lebih lanjut / Unduh

Datepicker oleh Jacob Montgomery

Contoh datepicker ini memiliki tombol, mengklik yang membuka modal. Kemudian Anda dapat melihat bidang teks, mengklik yang menunjukkan pemilih tanggal. Judul yang ditempatkan di atas bidang input ini adalah 'Datepicker'.

Jika Anda akan menggunakan template ini, ubah judulnya menjadi sesuatu yang lebih sesuai atau hapus jika menurut Anda tidak perlu.

Ada tombol 'Tutup' di bawah bidang teks. Mengkliknya menutup modal.

Info lebih lanjut / Unduh

Contoh datepicker oleh Javier Buron

Ini adalah contoh datepicker keren lainnya yang dibuat oleh Javier Buron. Seperti yang Anda lihat dari tangkapan layar di atas, ada bidang teks di atas untuk heading.

Ketika pengguna mengklik bidang input, mereka dapat melihat pemilih tanggal yang dapat mereka gunakan untuk memilih tanggal. Ketika tanggal dipilih, itu akan ditampilkan di bidang teks. Anda harus mengubahnya menjadi sesuatu yang lebih bermakna dan cocok jika Anda ingin mengintegrasikan template ini ke dalam situs web Anda.

Itu juga ditampilkan sebagai output di bawah bidang teks. Outputnya ditampilkan dengan cara ini: 'Hasil: 22/09/2029'. Pertimbangkan untuk menghilangkan bagian keluaran jika Anda tidak memerlukannya.

Info lebih lanjut / Unduh

Bootstrap datepicker oleh Peter Schoning

Contoh datepicker Bootstrap gratis yang menakjubkan ini dibuat oleh Peter Schoning memiliki latar belakang hijau yang bagus.

Contoh ini dilengkapi dengan bidang teks yang membuka datepicker. Ini menunjukkan kepada Anda tanggal bulan ini, yang dapat Anda gunakan untuk pilihan Anda.

Anda juga dapat memilih tanggal dari bulan yang berbeda dari tahun berjalan atau tahun yang berbeda . Tanggal yang dipilih ditampilkan dalam bidang teks ini: '08/15/2029′.

Anda dapat mengubah format tanggal dari kode, menyesuaikannya dengan kebutuhan Anda.

Info lebih lanjut / Unduh

Contoh datepicker oleh pengguna CodePen

Pena ini adalah formulir pencarian. Ini memiliki bidang teks dengan judul 'Beberapa Kriteria', di mana pengguna harus memasukkan kriteria pencarian. Kemudian pengguna harus memasukkan rentang tanggal menggunakan kolom input yang disediakan.

Saat mengklik bidang input, datepickers muncul, yang dengannya pengguna dapat memilih tanggal untuk rentang tanggal. Ketika pengguna menentukan rentang tanggal, mereka dapat melakukan operasi pencarian dengan mengklik tombol 'Telusuri'.

Pengguna juga dapat mengosongkan kolom input dengan mengklik tombol 'Hapus'. Ingatlah bahwa mengklik tombol 'Telusuri' tidak akan menampilkan hasil pencarian apa pun kepada Anda karena ini hanyalah contoh sederhana yang menunjukkan pemilih tanggal.

Ini bukan aplikasi yang lengkap .

Info lebih lanjut / Unduh

Pikiran terakhir

Pada artikel ini, Anda memiliki daftar contoh datepicker Bootstrap berkualitas tinggi. Saya harap Anda menyukai mereka. Jika Anda memeriksa kode dari contoh-contoh ini, Anda dapat memahami bahwa membuat datepickers semacam ini adalah pekerjaan yang sederhana.

Membuat datepicker tidak akan memakan banyak waktu. Tapi mengapa menulis kode dari awal saat Anda mendapatkan template gratis yang siap pakai? Menggunakan salah satu contoh datepicker ini daripada membuatnya dari awal adalah ide yang bagus.

Jika Anda merasa bahwa contoh perlu diperbaiki, Anda dapat melakukannya dengan mudah dengan memodifikasi kode. Dengan cara ini, Anda bisa sangat produktif.

Dengan menggunakan template, Anda dapat menyelesaikan proyek situs web Anda dengan cepat. Template gratis ini akan mempercepat proses pengembangan Anda.