Integrasi jsCalendar
Aug. 25, 2010
Postingan kali ini saya akan, keluar dari topic yang biasanya saya bahas yaitu mengintegrasikan jsCalendar ke dalam form kita, berhubung ini sering digunakan untuk mempermudah pengisian tanggal maupun jam ke dalam form kita.
Untuk library javascripnya kita tidak perlu susah susah membuatnya karenya sudah ada yang membuat, untuk librarynya bisa di download sini,
Langsung saja ke proses installasi < :D
Pertama taruh folder src yang ada di dalam archive yang telah di download di tempat mana saja yang penting tahu alamat filenya, untuk lebih mudah di contoh ini saya meletakkannya di satu folder dengan web yang akan terintegrasikan.
Langkah Selanjutnya adalah memanggil file js/css yang di butuhkan di dalam <head>?..</head>
<head><link rel="stylesheet" type="text/css" href="src/css/jscal2.css" /><link rel="stylesheet" type="text/css" href="src/css/border-radius.css" /><link rel="stylesheet" type="text/css" href="src/css/gold/gold.css" /><script type="text/javascript" src="src/js/jscal2.js"></script><script type="text/javascript" src="src/js/lang/en.js"></script></head>
nah pastikan alamat url file sudah benar karena kalo salah nanti tidak akan muncul calendarnya.
Kemudian berikan id di input text yang akan di gunakan untuk menampilkan tanggal sesudah di select, dan di button untuk menampilkan calendarnya.
<input id="getter"><input id="setter" type="button" value="Set Date">
Langkah selanjutnya setting untuk calendarnya. di taruh di bawahnya script di atas.
<input id="getter"><input id="setter" type="button" value="Set Date"><script>Calendar.setup({trigger : "setter",inputField : "getter",onSelect : function() { this.hide() }});</script>
Langkah yang terakhir Debugging :D, klo yakin sudah benar semua langkah ini tidak perlu di gunakan.
Jika popup tanggal tidak muncul maka coba di cek di url js/css nya dan id triggernya.
Sekian postingan dari saya semoga dapat berguna :)