Masih dengan Jquery-UI dan kali ini saya akan membahas tentang Cara Menggunakan Datepicker dengan Jquery-UI. Datepicker ini merupakan salah satu fitur pada Jquery-UI yang digunakan untuk memudahkan pengguna maupun para programmer dalam menentukan atau memilih tanggal,bulan,serta tahun.
Sungguh luar biasa fitur jquery-ui ini, mari kita coba mulai menggunakan datepicker jquery-ui. Langkah pertama jalankan/run text-editornya lalu kita membutuhkan yang namanya library dari jquery serta jquery-uinya teman-teman bisa lihat pada gambar dibawah ini :
Pada library diatas saya menggunakan CDN jquery library jadi harus terhubung dengan internet. Oke kita sudah mengkoneksikan librarynya langkah selanjutnya teman-teman buat element htmlnya seperti pada gambar dibawah ini :
- Cara Menggunakan Datepicker dengan Jquery-UI
Oke, setelah kode htmlnya sudah dibuat maka langkah selanjutnya kita gunakan fungsi jquerynya untuk mengaktifkan datepicker pada jquery-ui. Contohnya bisa teman-teman lihat pada gambar dibawah ini :
Pada kode diatas merupakan default datepicker dari jquery, jika teman-teman jalankan/run dibrowser maka tampilan hasilnya masih default seperti pada gambar dibawah ini :
Pada gambar hasil default diatas masih banyak kekurangan ya teman-teman, contohnya kita tidak bisa memilih bulan dan tahun secara cepat, atau bisa dibilang memilihnya masih satu-persatu per-bulan. Dan untuk mengkostumisasinya teman-teman hanya menambahkan kode jquery nya seperti pada gambar dibawah ini :
Pada gambar diatas sudah saya berikan komentar untuk kostum bulan,tahun serta yang lainnya. Dan coba silahkan teman-teman jalankan kembali maka hasilnya akan menjadi seperti pada gambar dibawah ini :
Bagaimana ? cukup simple dan mudah ya teman-teman. Dan sekarang teman-teman dapat memilih bulan dan tahun secara cepat hehe. Oke kalau begitu saya rasa cukup sampai disini pembahasan tentang Cara Menggunakan Datepicker dengan Jquery-UI. Semoga bermanfaat dan sampai bertemu dipembahasan selanjutnya.
Terimakasih