Kolom Pencarian pada suatu website adalah hal yang sangat penting bagi kenyamanan pengunjung. Karena dengan adanya fitur pencarian, pengunjung yang datang dapat mencari sesuatu yang sedang dicari tanpa perlu repot mencari satu-persatu disetiap halamanya. Selain menghemat waktu tentunya saja dapat langsung dapat mendapatkan apa yang kita cari. Kolom pencarian itu sendiri memiliki berbagai macam fungsi, bisa mencari nama barang, merk barang, atau pun berdasarkan tanggal.

Pada tutorial kali ini kita akan belajar membuat date picker dengan Jquery UI. Date picker ini adalah plugin dari Jquery UI untuk membantu kalian dalam membuat tanggalan dengan tampilan yang sangat mudah dipahami. Tentu saja hal ini akan berhubungan dengan kolom pencarian website kalian berdasarkan tanggal. Untuk membuat date picker ini sangatlah mudah. Kalian bisa ikuti langkah-langkah seperti dibawah ini.

Buat file html seperti berikut.

tanggal.html

Setelah sudah kalian save dan lihat hasilnya dibrowser kalian. Jika berhasil maka akan seperti ini.

Table pada gambar diatas hanya contoh saja ya, jadi belum bisa diproses dengan pencarian berdasarkan tanggal. Karena file ini masih dalam bentuk html.

Jika tampilanya sudah seperti gambar diatas, kalian bisa coba untuk mengklik kolom text diatas table, maka akan muncul popup kalender  seperti gambar dibawah ini.

Setelah itu kalian bisa pilih tanggal sesuai keinginan kalian. Jika sudah maka akan mendapatkan format tanggal pada kolom text seperti ini.

Hasilnya seperti itu. Namun jika kalian ingin merubah format tanggalnya, kalian bisa mengedit script dibawah ini.

Menjadi seperti ini.

Dengan menambahkan dateFormat dengan nilai ‘yy-mm-dd’ yang artinya merubah format menjadi tahun-bulan-hari. Mudah bukan ?

Oke sekian pembahasan mengenai membuat date picker dengan Jquery UI. Semoga pada kesempatan berikutnya kita akan memodifikasi datepicker dengan PHP.

Salam damai.