Cara Membuat Kalender Dengan JQuery
usahawan-maju - Secara sederhana kalender adalah suatu sistem pengelompokan hari yang bisa mengkoordinir sosialisasi, keagamaan, komersial, dan lainnya yang memberi nama pada sebuah periode yang disebut waktu (seperti nama hari, bulan, dan tahun) . Kemudian dari proses yang ada nama-nama tersebut dikenal sebagai tanggal kalender. Adanya tanggal tersebut bisa didasarkan dari gerakan-gerakan benda di luar angkasa seperti peredaran matahari dan bulan. Nama kalender juga dapat mengacu pada sebuah alat yang mampu mengilustrasikan sistem tersebut seperti kalender dinding atau kalender digital.
Saat membuat aplikasi berbasis web terkadang kita perlu membuat inputan sebuah tanggal. Sebenarya caranya banyak sekali, tergantung selera anda dan cara mengaplikasikan selera input data gambar. Kita bisa menggunakan select atau combobox atau input manual juga bisa, yang penting tujuan dari pada aplikasi kita bisa tercapai sesuai dengan algoritma program aplikasi yang kita butuhkan.
Namun ada cara lagi ada design kalender yang akan muncul apabila kita klik dan tinggal pilih saja tanggal sesuai dengan tanggal yang akan kita inputkan. Penggunaan cara ini kita memerlukan sebuah library tambahan yang biasanya kita bisa dapatkan free, apalagi kalo bukan Jcalender yang menggunakan javascript. Mungkin lebih jelasnya coba perhatikan baris script berikut :
<script type="text/javascript" src="js1/calendarDateInput.js"></script>
<script src="images/datetimepicker_css.js" type="text/javascript"></script>
Penjelasan kode diatas kurang lebih sebagai berikut :
- Library calendarDateInput.js adalah library yang akan kita butuhkan, pada contoh saya simpan pada folder js1, namun nanti masalah penyimpanan terserah anda. Silahkan download ya cari di google, hehehhe. Jangan lupa cari juga JQuery yang ini datetimepicker_css.js . Kita membutuhkan 2 JQurey tersebut. Kemudian untuk script lengkapnya anda bisa mencobanya dengan script berikut :
//Script lengkap sebagai berikut :
<script type="text/javascript" src="js1/calendarDateInput.js"></script><script src="images/datetimepicker_css.js" type="text/javascript"></script>
<input type="text" name="tgl_tayang" id="tgl_tayang" readonly="readonly"/>
<a href="javascript:NewCssCal('tgl_tayang','ddmmyyyy')">
<img src="images/b_calendar.png" class="cal" width="16" height="16" alt="Pick a date">
</a>
Silahkan simpan dengan extensi .PHP saya menggunakan cara tersebut. Kurang lebih hasilnya sebagai berikut :
Jadi Kalender akan muncul jika kita klik icon atau gambar kalender, kemudian kita pilih tanggal dan value dari tanggal tersebut akan diterima pada textbox yang telah kita siapkan.
.
