Pada saat membuat aplikasi dengan jQuery saya pernah mengalami kesulitan pada pembuatan datePicker dengan choice month & year. Namun sekarang sudah saya temukan bagaimana cara untuk memilih dan menyesuaikan bulan dan tahun pada datePicker dalam jQuery, dan caranya pun sangat mudah.

Langkah pertama untuk memunculkan pilihan bulan dan tahun datePicker adalah dengan menambahkan properties dalam script datePicker yang akan di buat.

Berikut ini adalah script datePicker yang ada dalam grid untuk menampilkan pilihan bulan dan tahun.

{
name:’expiredDate’,
index:’expiredDate’,
width:310,
sorttype:”date”,
editable:true,
editoptions:{size:12, dataInit:function(el){
$(el).datepicker({dateFormat:”yy/mm/dd”,changeMonth: true,changeYear: true});
}
}

}

Inti dari script diatas adalah pada datepicker({dateFormat:”yy/mm/dd”,changeMonth: true,changeYear: true}),

tertera properties yang di gunakan changeMonth: true,changeYear: true , untuk memunculkan choice tahun dan bulan pada tanggal.

Berikutnya adalah script datePicker yang ada dalam form untuk menampilkan pilihan bulan dan tahun.

$(function() {
$(“.date-pick”).datepicker({dateFormat:”yy/mm/dd”,changeMonth: true,changeYear: true});
});

Script diatas adalah Function yang akan di gunakan untuk memanggil datePicker, dalam hal ini form menggukan class date-pick (“.date-pick”) untuk memanggil function datePicker.

Ketentuan untuk membuat datePicker mengeluarkan atau memunculkan pilihan tahun dan bulan adalah hanya menambahkan changeMonth: true,changeYear: true pada lokasi properties.

Berikut ini adalah gambar sebelum menggunakan changeMonth changeYear dan sesudah menggunakan changeMonth changeYear.

DatePicker Tanpa menggunakan changeYear & changeMonth

DatePicker pada Form yang ada dalam grid dan menggunakan chengeYear & changeMonth

DatePicker Dalam Form yang menggunakan chengeYear & changeMonth

Semoga dengan sedikit ilmu ini dapat membantu kita semua dalam membuat program yang lebih baik lagi.

Mohon maaf apabila terdapat kekurangan, trims.

Wassalam.