Datepicker adalah opsi luar biasa yang disediakan dengan antarmuka pengguna untuk memudahkan pengguna memilih tanggal dalam format yang benar. Pada artikel ini, kita akan menambahkan pemilih tanggal ke halaman web, menggunakan plugin jQuery
plugin jQuery Datepicker disediakan dengan berbagai opsi dan metode, yang digunakan untuk menyesuaikan antarmuka pengguna pemilih tanggal dan widget kalender
Mari kita punya contoh, untuk melihat bagaimana menambahkan plugin ini untuk menyediakan antarmuka pengguna pemilih tanggal ke halaman web. Dengan contoh ini, pertama kita akan menampilkan kalender secara default tanpa menggunakan penyesuaian apa pun dengan bantuan opsi dan metode yang disediakan
Untuk menambahkan pemilih tanggal jQuery, kita harus mengikuti langkah-langkah berikut
- Tambahkan file perpustakaan javascript yang diperlukan seperti biasa seperti yang telah kita lakukan dengan event handler jQuery lainnya, seperti, Drag/Drop, Show/Hide dan lain-lain. , untuk mengakses metode dan opsi jQuery yang diperlukan. /li>
- Tautkan halaman web dengan CSS eksternal yang berisi gaya untuk tema kalender
- Panggil penangan acara pemilih tanggal untuk menampilkan widget kalender sebagai munculan
Select Date:
Pada kode di atas, kami telah menambahkan pustaka Javascript yang diperlukan sebagai sumber untuk mengakses fungsi bawaan jQuery. Untuk itu, kita dapat merujuk ke pustaka ini baik dengan menggunakan URL langsung yang membutuhkan internet atau kita dapat membuat salinan lokal dari file-file ini dengan mengunduh versi terbaru dari situs web resmi jQuery
Setelah itu, date picker() dipanggil dengan referensi id elemen input HTML. Jadi, secara default, elemen input adalah target, di mana tanggal yang dipilih akan ditampilkan, dan juga digunakan untuk memicu acara ke widget kalender popup
Jika kita ingin memiliki dua elemen secara terpisah, untuk memicu acara pemilih tanggal dan untuk mengisi respons, kita perlu menggunakan opsi dan metode plugin pemilih tanggal jQuery yang tersedia
Metode Opsi Datepicker di jQuery
Ada beberapa opsi dan metode yang disediakan oleh plugin jQuery Datepicker. Misalnya, daftar berikut berisi beberapa opsi plugin jQuery yang digunakan untuk menyesuaikan pengaturan pemilih tanggal
Pilihan
- buttonImage – Opsi ini berisi jalur atau nama gambar yang akan ditampilkan, saat mengklik apa widget kalender akan menjadi popup
- buttonImageOnly – Opsi pemilih tanggal ini hanya menampilkan gambar tanpa efek tombol di sekitarnya
- buttonText – Opsi ini seperti atribut alt dari tag HTML , yang digunakan untuk menampilkan teks alternatif yang diberikan jika ada masalah dalam menampilkan gambar ke browser.
- showOn – Ini dapat berisi nilai-nilai seperti fokus, tombol dan keduanya untuk menampilkan widget kalender dengan kejadian masing-masing, seperti, pada bidang input target pemfokusan, pada mengklik tombol
- dateFormat – Seperti yang dapat kita tebak dengan mudah, opsi ini digunakan untuk memberikan format yang diperlukan dari tanggal yang dipilih
- minDate, maxDate – Ini akan menunjukkan jumlah tanggal minimum dan maksimum yang dapat dipilih masing-masing
Semua opsi termasuk yang tidak ditentukan dalam daftar di atas, digunakan untuk menerapkan perubahan sehubungan dengan pemilih tertentu
Mari kita memiliki contoh untuk bekerja dengan pemilih tanggal beberapa opsi dari daftar di atas
JQuery DatePickerSelect Date:
Jika Anda tidak memiliki gambar seperti yang ditentukan dalam skrip di atas, maka nilai opsi buttonText akan ditampilkan ke browser
Metode
Metode datepicker digunakan untuk melakukan berbagai fungsi termasuk beberapa fungsi tanggal yang sudah dikenal, seperti pengambil dan penyetel tanggal. Beberapa fungsi tersebut adalah,
- getDate – Untuk mendapatkan tanggal saat ini
- setDate – Untuk mengatur tanggal tertentu yang harus dalam format tanggal saat ini
- sembunyikan – Untuk menghapus tampilan kalender yang baru dibuka
- opsi – Fungsi ini akan digunakan sebagai pengambil atau penyetel opsi pemilih tanggal berdasarkan argumen yang diterima. Misalnya, jika tidak ada argumen saat memanggil metode ini, metode ini akan mengembalikan semua opsi pemilih yang tersedia sebagai pasangan kunci dan nilai. Jika kita memberikan nama opsi dan nilai untuknya, maka nilai akan ditetapkan untuk nama opsi yang diberikan
Terlepas dari daftar fungsi di atas, plugin ini juga menyertakan beberapa fungsi utilitas untuk melakukan operasi seperti menghapus pengaturan pemilih tanggal default, memformat tanggal, dan sebagainya.
Misalnya, fungsi setDefaults() digunakan untuk menghapus setelan default dengan menentukan opsi dan nilai yang diperlukan. Dan kodenya adalah,
JQuery DatePickerFrom Date:
Dengan menggunakan fungsi setDeafults() ini, kita dapat menerapkan opsi satu kali untuk semua instance pemilih tanggal yang tersedia di situs web kita
Kami menggunakan cookie untuk menawarkan pengalaman menjelajah yang lebih baik, menganalisis lalu lintas situs, dan mempersonalisasi konten. Baca tentang cara kami menggunakan cookie dan cara Anda dapat mengontrolnya di Kebijakan Cookie kami. Jika Anda terus menggunakan situs ini, Anda menyetujui penggunaan cookie kami