Spesifik Date Pada Datepicker jQuery

/ February 26, 2011 / 25 Comments / Komunitas Blogger, Komunitas Design, Komunitas Programmer, Komunitas Web

Jquery adalah sebuah tools berbasis javascript yang powerfull untuk digunakan dalam website. Banyak tools yang disediakan oleh jQuery salah satunya adalah datepicker

Datepicker dalam jQuery terlihat seperti pada gambar berikut.
Datepicker

Cara kerjanya adalah dengan mengintegrasikan sebuah field text dengan datepicker script pada jquery maka ketika field form tersebut diklik akan muncul sebuah tabel kalender yang dapat diklik untuk memasukkan nilai tanggal tersebut pada field form tadi.

Dengan demikian keberadaan datepicker pada jQuery ini sangat membantu sekali. Nah muncul sebuah permasalahan yang signifikan bila kita menginginkan sebuah kalender yang memiliki spesifikasi tanggal yang bisa disesuaikan dengan database? Misalkan disebuah sekolah yang menginginkan tanggal availablenya tanggal 1, 3, 9, dsb.

Karena datepicker defaultnya menampilkan semua tanggal, sehingga apabila digunakan dalam aplikasi yang menginginkan keberadaan tanggal yang spesifik tentunya tidak dapat dilakukan.

Untungnya jQuery sifatnya fleksible dalam artian dapat disetting dengan memasukkan beberapa variable tertentu sehingga permasalahan diatas dapat diselesaikan

Berikut code listingnya:

$('#datepicker').datepicker({

dateFormat: ‘yy-mm-dd’,
beforeShowDay: enableAllTheseDays
});

var enabledDays = [“2-20-2011”, “2-24-2011”];

function enableAllTheseDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < enabledDays.length; i++) {
if($.inArray((m+1) + ‘-‘ + d + ‘-‘ + y,enabledDays) != -1) {
return [true];
}
}
return [false];
}

Demikian semoga bermanfaat.. 🙂

Tags: , , , ,