Datepicker adalah adalah salah satu komponen yang paling banyak ditemui di form yang memerlukan tanggal. Ada banyak komponen input tanggal , namun yang paling populer dan paling mudah implementasinya sejauh ini adalah Jquery UI Datepicker.

Kode jQuery UI datepicker

Contoh tampilan default dan kode dari jquery UI Datepicker

Selain implementasi yang mudah, kostumasi dari input inipun sangat banyak dan kita akan membahas pada point Opsi opsi yang bisa diterapkan agar komponen ini benar benar efesien dan mudah dipakai oleh user.  Berikut ini adalah Opsi opsi yang sering dipakai untuk menampilkan Datepicker sesuai kebutuhan.

Opsi dan Contoh Value Keterangan 
dateFormat:yy-mm-dd Memformat tanggal yang akan di kirim di form, format lain dd-mm-yy, dd/mm/YY dan sebagainya
defaultDate: ‘2002-01-01’ Memilih tanggal Default saat user mengarahkan kursor ke Input form. Defaultnya adalah tanggal Hari ini. Dari contoh disamping default datenya adalah tanggal 1 januari 2002. 
changeYear:true User Boleh mengubah tahun  ( akan muncul combo year)
changeMonth:True User Boleh mengubah bulan  ( akan Muncul combo bulan)
showWeek: true Menampilkan Minggu ke – N di samping kiri tanggal
firstDay:1 Menampilkan Senin sebagai awal Minggu. Tanggal default biasanya menjadikan hari minggu sebagai hari pertama. Anda bisa berexperiment dan mencoba mengubah dari angka 0-6. 
numberOfMonths: 2 Menampilkan 2 bulan dalam satu tampilan, nilai defaultnya 1, silahkan ganti dari 1-3 bulan sesuai kebutuhan. Umumnya aplikasi maximal menampilkan 3 bulan. 
minDate:-10 Tanggal yang bisa dipilih  Maximal 10 hari kebelakang sejak tanggal hari ini. 
maxDate:+10 Tanggal yang bisa dipilih  Maximal 10 hari kedepan sejak tanggal hari ini.  MinDate dan MaxDate sering dikombinasikan. 
showButtonPanel: true Menampilkan tombol TODAY dan DONE dibagian bawah kalendar. 

Semua opsi tersebut bisa di kombinasikan agar hasil akhirnya sesuai kebutuhan form anda. Sebenarnya masih ada beberapa opsi lain yang jarang dipakai, namun jika anda tertarik mempelajarinya silahkan buka  https://api.jqueryui.com/datepicker

Categories: jQuery

Candra Adi Putra

Candra Adi Putra S.Kom adalah Alumni STMIK AKAKOM Yogyakarta. hubungi saya di candraadiputra (at) gmail (dot) com