Cara menambahkan datepicker di PHP dengan Ajax

Datepicker merupakan sebuah komponen yang banyak bisa dijumpai dalam berbagai bahasa pemrograman diantaranya yaitu pada pemrograman berbasis Visual Basic. komponen ini mempermudah kita dalam memilih tanggal dengan menampilkan sebuah kalendar yang kemudian dapat kita pilih tanggalnya. Lalu bagaimana dengan php? dapatkah kita menggunakan datepicker di php? jawabannya adalah bisa. dengan menggunakan ajax kita dapat menambahkan datepicker di php.

Dalam tutorial ini saya tidak membuat sendiri datepicker menggunakan ajax tersebut melainkan menggunakan Vista-Like Ajax Calendar yang dibuat oleh dev.base86.com Vista-Like Ajax Calendar yang dibuat oleh dev.base86.com ini memerlukan Mootools Javascript Framework agar dapat digunakan. Tapi jangan khawatir pada file yang anda download di url http://dev.base86.com/scripts/vista-like_ajax_calendar_version_2.html Mootools Javascript Framework sudah disertakan.

Untuk dapat menggunakan Vista-Like Ajax Calendar ini anda terlebih dahulu harus mendownload filenya pada link http://dev.base86.com/scripts/vista-like_ajax_calendar_version_2.html dimana ketika anda mengekstrak filenya akan terdapat 4 buah folder dan satu buah file contoh (example.html). dari 4 folder tersebut terdapat 2 folder penting yang harus ada jika anda ingin menggunakan Vista-Like Ajax Calendar yaitu folder jslib dan inc nah kedua folder ini yang wajib anda sertakan dalam web anda.

Dalam kasus ini saya menggunakan style standar dari Vista-Like Ajax Calendar sehingga saya tidak membutuhkan folder adobe_cs3 dan folder apple_widget yang ada dalam folder images (folder ini tidak saya sertakan pada project). saya juga tidak menyertakan file vlaCal-v2.1-adobe_cs3.css dan vlaCal-v2.1-apple_widget.css yang terdapat pada folder styles.

Setelah semua file yang dibutuhkan siap maka selanjutnya adalah menggunakan Vista-Like Ajax Calendar dalam project website kita. Langkahnya adalah sebagai berikut :
1. Letakan script berikut ini tepat dibawah <head> :

<link rel="stylesheet" media="screen" href="styles/vlaCal-v2.1.css" type="text/css" />
<script type="text/javascript" src="jslib/mootools-1.2-core-compressed.js"></script>
<script type="text/javascript" src="jslib/vlaCal-v2.1-compressed.js"></script>

2. Dibawah script tersebut tambahkan juga script berikut ini :

<script type="text/javascript">
window.addEvent('domready', function() {
new vlaDatePicker('exampleI', { openWith: 'togglePicker', offset: { y: -2, x: 2 }, separateInput: { day: 'day', month: 'month', year: 'year' } });
});
</script>

3. Berikutnya adalah design tampilannya seperti gambar berikut ini :

Gimana buatnya? ya pake css lah.. pasti bisa kan? ;) hohoho tenang dalam file contoh yang saya berikan. semuanya sudah tersedia.. anda bisa mendownloadnya dengan mengklik disini.

4. Nah untuk memanggil datepickernya cukup tambahkan id="togglePicker" pada gambar kalender yang ada pada textfield tersebut. script lengkapnya adalah seperi berikut ini :

<img src="images/calendar.gif" id="togglePicker" class="pickerImg" width="13px" height="12px" alt="" />

class="pickerImg" merupakan css yang dapat anda tambahkan sendiri untuk mengatur posisi tampilnya datepicker tersebut.

Ok.. selesai sudah datepickerpun sudah bisa digunakan pada project web anda. berikut tampilan dari datepicker tersebut :