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.
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