Membuat Input Kalender pada Form dengan Javascript

Tentu sobat sudah tidak asing lagi dengan input tanggal lahir pada form pendftaran seperti gambar berikut ini :

nah, masalahnya bagaimana kita mengatur jumlah hari dalam bulan tersebut? misalnya kalau user tidak sengaja menginputkan tanggal 31 pada bulan februari? tentu saja tersebut tidak valid karena tidak ada tanggal 31 pada bulan februari. pernahkah sobat berpikir bagaimana membuat input kalender (misalnya: input tanggal lahir) dengan tampilan yang keren dan dapat menangani kesalahan input tanggal? saya juga berpikiran demikian. setelah cari di google, saya menemukan tutorial yang bagus dan keren dari blog http://ri32.wordpress.com/ tentang cara membuat input kalender dengan menggunakan javascript. tampilannya juga keren sob,lihat gambar berikut ini.

untuk membuat input kalender kita butuh sourcecode kalender javascriptnya, kalau tidak salah namanya PopCalendarXP. Silakan Download dulu.

Download PopCalendarXP Disini

Setelah sobat mendownloadnya ikuti langkah-langkah berikut ini.

1. Copy folder "calender" ke folder dimana form inputan berada sehingga file form inputan satu folder dengan folder "calender". masih bingung? lihat gambar aja dech sob.
   
2. Selanjutnya adalah memanggil kalender kedalam form, Edit file form inputan Anda lalu disebelah kanan textbox tanggal tambahi script berikut ini: <a href="javascript:void(0)" onClick="if(self.gfPop)gfPop.fPopCalendar(document.biodata.tgl_lahir);return false;" ><img name="popcal" align="absmiddle" style="border:none" src="./calender/calender.jpeg" width="34" height="29" border="0" alt=""></a>
• Keterangan : pada bagian gfPop.fPopCalendar(document.biodata.tgl_lahir)
  biodata adalah nama form inputan sedangkan tgl_lahir adalah nama textbox yang akan diisi dengan tanggal,
  perhatikan gambar berikut:
  
  
  yang ini juga:
3. Berikutnya tambahi kode script berikut ini pada bagian akhir dari kode program form inputan :
   <!-- PopCalendar(tag name and id must match) Tags should not be enclosed in tags other than the html body tag. --> <iframe width=174 height=189 name="gToday:normal:./calender/agenda.js" id="gToday:normal:./calender/agenda.js" src="./calender/ipopeng.htm" scrolling="no" frameborder="0" style="visibility:visible; z-index:999; position:absolute; top:-500px; left:-500px;"> </iframe>
4. Selesai dech, Sekarang waktunya testing.

Cukup mudah kan Sobat? Sebagai bahan pembelajaran saya sertakan juga Demo Program Input Kalender sederhana Silahkan didownload.

Download Demo Input Kalender

Karena saya baru belajar web, pasti terdapat banyak kesalahan. untuk itu saya butuh koreksi, kritik dan saran dari Sobat sekalian. Semoga tutorial ini bermanfaat, salam hangat ^_^


sumber :  http://sekedar-tutorial.blogspot.com