Membuat Inputan Tanggal Seperti Kalender Dengan JQuery

Cara yang termudah untuk membuat inputan tanggal seperti kalender adalah dengan menggunakan plugin dari JQuery. Salah satu plugin yang populer saat ini adalah JQuery UI, dan didalam plugin JQuery UI terdapat salah satu komponen bernama datepicker, nah komponen datepicker lah yang akan kita gunakan untuk membuat inputan tanggal seperti kalender. Datepicker berguna untuk mengambil tanggal dari sistem kalender yang ada di komputer sehingga memudahkan kita untuk memilih tanggal karena susunan tanggalnya pércis seperti kalender. Penasaran????…… Yuk kita langsung saja ke TKP..

Pertama Anda download dulu plugin JQuery UI pada situs resminya di http://jqueryui.com. O iya.. Saat artikel ini dibuat JQuery UI sudah mencapai versi 1.11.1, tentu saja ada beberapa penyesuaian cara penggunaannya, namun kalau menurut penulis pada versi ini cara penggunaannya lebih praktis. Selanjutnya kita akan langsung terapkan JQuery UI pada program yang akan kita buat, jadi Anda buat file baru dengan nama file datepicker.html lalu perhatikan langkah-langkah berikut ini :

  1. Panggil file CSS JQuery UI yang nama filenya jquery-ui.css, adapun script programnya adalah sebagai berikut :
  2. Panggil file library JQuery yang nama filenya js yang berada pada folder external/jquery, adapun script programnya adalah sebagai berikut :
  3. Panggil library JQuery UI yang nama filenya jquery-ui.js, adapun script programnya adalah sebagai berikut :
  4. Buat sebuah selektor pada script program JQuery, yang mana selektor tersebut akan kita terapkan nantinya pada elemen milik HTML. Adapun script programnya dapat dilihat sebagai berikut :
  5. Terapkan selektor yang telah dibuat oleh script program JQuery diatas pada elemen milik HTML, adapun script programnya dapat dilihat sebagai berikut :

Untuk lebih jelasnya perhatikan script program dibawah ini :

Jalankan script program datepicker.html pada browser Anda maka tampilannya akan seperti gambar dibawah ini :

datepicker

Om Yenda, apa format input penanggalannya bisa dirubah??.. Kalau contoh yang diatas kan untuk memisahkan tanggal, bulan, dan tahun pakai garis miring, nah bagaimana kalau format pemisahannya memakai tanda strip. Terus saya pernah melihat sebuah datepicker yang mana pemilihan bulan dan tahunnya bisa dipilih berdasarkan objek combobox, nah cara seperti itu bagaimana membuatnya????…. Buka kembali file  datepicker.html Anda, lalu modifikasi script program JQuery-nya seperti berikut ini :

Jalankan script program yang telah Anda modifikasi sehingga tampilannya akan berubah seperti gambar dibawah ini :

datepicker2

Hadirnya JQuery memang memudahkan para developer web untuk lebih mengembangkan setiap aplikasi yang akan dibangun, buktinya untuk membuat inputan tanggal ini kita lebih sedikit menulis script program dibandingkan kita harus membuat inputan tanggal menggunakan PHP, butuh script program yang cukup panjang untuk membuatnya. Sungguh melelahkan cara seperti itu. Hee..

Oke, penulis cukupkan sampai disini, sampai bertemu lagi di artikel berikutnya..

Sumber Artikel : http://purbadian.com/category-article-4-jquery–ajax.html

Leave a Reply

Your email address will not be published. Required fields are marked *