Menampilkan Pilihan Bulan dan Tahun (Dropdown) Dan Menentukan Range Tahun Pada JQuery UI Datepicker

Pada artikel sebelumnya sudah dibahas mengenai penggunaan datepicker dalam membantu pembuatan aplikasi web terutama dalam penulisan tanggal. Pada artikel ini akan dibahas bagaimana cara memilih tahun dan bulan dengan lebih mudah seperti pada saat kita akan memilih bulan dan tahun pada tanggal lahir diperlukan dropdown / pilihan untuk memudahkan dalam memilih bulan dan tahun lahir kita.
Berikut adalah sintak untuk pemanggilan datepicker biasa,
$(function() {
      $("#datepicker").datepicker();
});  


Pada syntak javascript pemanggilan datepicker diatas untuk membuat tambahan dropdown pada bulan dan tahun, kita hanya cukup menambahkan changeYear dan changeMonth di dalam datepicker tersebut seperti berikut,
$(function() {
      $("#datepicker").datepicker({
           changeMonth : true,
           changeYear : true
      });
});


Sehingga tampilan dari jQuery datepicker tersebut menjadi seperti ini

Pada gambar diatas terlihat pada bagian atas terdapat pilihan / dropdown untuk bulan dan tahun.
Untuk pilihan tahun kita juga bisa membatasi berapa tahun kedepan dan berapa tahun kebelakang yang perlu di tampilkan di dropdown tersebut, dengan cara menambahkan sintak yearRange seperti berikut,
$(function() {
      $("#datepicker").datepicker({
           changeMonth : true,
           changeYear : true,
           yearRange : -50:+50
      });
});

Pada yearRange terdapat nilai -50:+50 menandakan bahwa -50 adalah 50 tahun kebelakang dari tahun sekarang sedangkan +50 adalah 50 tahun kedepan dari tahun sekarang. Misalnya sekarang tahun 2015, yang akan tampil di dropdown dari tahun 1965(2015-50) s/d 2065 (2015+50).

Semoga bermanfaat.