Wednesday Jan 20, 2010
Modification Js Calender
JsCalender adalah sesuatu yang sudah kita kenal berfungsi untuk memberi kemudahan bagi seseorang untuk menginputkan sebuah tanggal(Date). Dan kita tahu bahwa format tanggal(Date) tersebut adalah angka. Yang biasa adalah dengan format "yyyy/MM/dd" atau kebalikannya, baik dengan sebuah pemisah yang berbentuk "/" atau "-". Kemudian jika kita ingin untuk mengubah bulan yang berwujud angka menjadi huruf (misal bulan 01 menjadi bulan January)....??? Bagaimanakah caranya...???
Maka pada kesempatan ini saya ingin sharing sedikit tentang hal tersebut. Dan saya mohon isi Kritik dan Saran yang membangun... agar bisa menyempurnakan untuk yang lebih baik.
Kita langsung ke contoh saja...
Pertama kita buat sebuah html file. Pada contoh ini saya beri nama Date.html
Dan Inilah codingnya :
Date.html
1: <html>2: <head>3: <title>Date Modification</title>4: <link rel="stylesheet" type="text/css" media="all" href="jscalendar-1.0/calendar-win2k-cold-2.css" title="win2k-cold-1" />5: <script type="text/javascript" src="jscalendar-1.0/calendar.js"></script>6: <script type="text/javascript" src="jscalendar-1.0/lang/calendar-en.js"></script>7: <script type="text/javascript" src="jscalendar-1.0/calendar-setup.js"></script>8: <script type="text/javascript" src="Date.js"></script>9: </head>10: <body>11: <form name="form1" action="" id="form1" method="post">12: <input type="text" name="e_input" id="put" value=""/>13: <input type="hidden" name="event" value="" size="23" id="f_date_a" onchange="Format();">14: <img src="jscalendar-1.0/img.gif" id="f_trigger_a" style="cursor: pointer; border: 1px solid red;" title="Date selector" onmouseover="this.style.background='red';" onmouseout="this.style.background=''" />15: </form>16: <script type="text/javascript">17: Calendar.setup({18: inputField : "f_date_a", // id of the input field19: ifFormat : "%d-%m-%Y", // format of the input field20: showsTime : true, // will display a time selector21: button : "f_trigger_a", // trigger for the calendar (button ID)22: singleClick : false, // double-click mode23: step : 1 // show all years in drop-down boxes (instead of every other year as default)24: });25: </script>26: </body>27: <html/>
Kemudian kita buat Date.js
Date.js
1: function Format(){2: /**fungsi untuk memberikan nilai y dengan mengambil input value dari form name="form1" dengan input id="f_date_a"*/3: var y = document.form1.f_date_a.value;4: /**memberikan nilai pada variable hari dengan substring(0,2) dari y. jika format dari input value js calender "dd/MM/yyyy" */5: var hari = y.substring(0,2);6: /**memberikan nilai pada variable bulan dengan substring(3,5) dari y. jika format dari input value js calender "dd/MM/yyyy"*/7: var bulan = y.substring(3,5);8: /**memberikan nilai pada variable bln dengan nama Bulan berdasarkan nilai dari variable bulan.*/9: if(bulan == '01'){10: var bln = 'Januari';11: } else if(bulan == '02'){12: var bln = 'Februari';13: } else if(bulan == '03'){14: var bln = 'Maret';15: } else if(bulan == '04'){16: var bln = 'April';17: } else if(bulan == '05'){18: var bln = 'Mei';19: } else if(bulan == '06'){20: var bln = 'Juni';21: } else if(bulan == '07'){22: var bln = 'Juli';23: } else if(bulan == '08'){24: var bln = 'Agustus';25: } else if(bulan == '09'){26: var bln = 'September';27: } else if(bulan == '10'){28: var bln = 'Oktober';29: } else if(bulan == '11'){30: var bln = 'November';31: } else if(bulan == '12'){32: var bln = 'Desember';33: }34: /**memberikan nilai pada variable tahun dengan substring(6,10) dari y. jika format dari input value js calender "dd/MM/yyyy"*/35: var tahun = y.substring(6,10);36: /**memberikan nilai value pada form name="form1" input id="put". dengan format tampilan adalah "dd-MM-yyyy". Anda bisa memodifikasi sesuai kebutuhan*/37: document.form1.put.value=hari+'-'+bln+'-'+tahun;38: }
dan jangan lupa untuk menaruh folder jscalender di folder tempat anda menaruh 2 file ini. Jika sudah semua maka silahkan dicoba.
Untuk penjelasan codingnya adalah sebagai berikut :
Sebenarnya pada Date.html ada dua(2) input untuk tanggal ini. ini terlihat pada coding pada baris ke-12 dan 13.
<input type="text" name="e_input" id="put" value=""/>
<input type="hidden" name="event" value="" size="23" id="f_date_a" onchange="Format();">
untuk e_input adalah yang akan tampil pada layer kita. dan yang type hidden adalah yang sebenarnya hasil dari jsCalender.
Kemudian
onchange="Format();"
yang berada di input dengan nama "event" berfungsi untuk memanggil sebuah function dengan nama Format. Dan function tersebut berada dalam Date.js yang telah kita buat.
Pada Date.js yang kita buat, kita berusaha untuk memisahkan antara tanggal-bulan-tahun dengan cara substring, dan kita simpan dalam sebuah variable bernama hari,bulan, dan tahun. Dan pada coding Date.js terdapat sebuah baris seperti ini
document.form1.put.value=hari+'-'+bln+'-'+tahun;
berfungsi untuk menampilkan sebuah nilai pada form name="form1" input id="put" dengan sebuah tampilan dari tanggal-bulan-tahun. yang berformat "dd-MM-yyyy". Anda pun bisa untuk mengganti tampilan tersebut sesuai kebutuhan Anda.
selamat mencoba. Dan semoga bermanfaat.