Membuat Input Kalender pada Form dengan Javascript

Saya masih ingin bercerita tentang pengalaman saya mengerjakan tugas praktikum basis data,(ga penting??!) he he he.. ya sudahlah ceritanya nanti saja.
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:
    • 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 frameborder="0" height="189" id="gToday:normal:./calender/agenda.js" name="gToday:normal:./calender/agenda.js" scrolling="no" src="./calender/ipopeng.htm" style="left: -500px; position: absolute; top: -500px; visibility: visible; z-index: 999;" width="174">
    


  • 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

    Teman-teman juga bisa melihat artikel lain tentang datepicker plugin jQuery di sini : http://sekedar-tutorial.blogspot.com/2014/05/membuat-form-input-tanggal-date-picker.html

    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 ^_^

    BAGIKAN KE:

    21 komentar:

    1. bener2 membantu.....bagus sekali tutorialnya, cuma gimana ganti warna defaultnya supaya gak biru yah?

      BalasHapus
    2. Mantep gan tutorialnya kebetulan saya juga mau bikin psb online

      BalasHapus
    3. bagus2, dah ane praktekin buat input from_date and to_date. Jadi ada 2 date, cuma pengaturan posisinya terlalu ke bawah punya ane, gak bisa disebelah form inputan or di bawahnya persis. Malah jauh ke bawah. Nah itu yg mana ya ngatur posisinya buat ke atasin?

      BalasHapus
    4. kalau mau ganti format jadi dd/mm/yyyy gmn ya??

      BalasHapus
    5. iya cara ganti format dd-mm-yyyy gmn ya ?

      BalasHapus
    6. Manthabbbbbbbbbbbbbbb gan

      BalasHapus
    7. bagi yang nanya gimana caranya mengganti format menjadi dd/mm/yyyy
      caranya adalah
      1. buka folder calender
      2. pilih normal.js dan edit
      3. pada baris ke 8 (jika belum ada mengedit) ubah menjadi var giDatePos=0
      4. save dan selesai

      BalasHapus
    8. kenapa bila saya tekan pada kalendar..namun takde kalendr yang muncul?

      BalasHapus
    9. sudah di hapus malah keluar juga kelender nya ya??brrrr

      BalasHapus
    10. sudah bisa dipakai tapi tidak tersimpan pada database
      tgl_lahir date isinya kosong

      BalasHapus
    11. " 3. Berikutnya tambahi kode script berikut ini pada bagian akhir dari kode program form inputan : "
      Kod ape yg perlu ditambah?Mohon pencerahan lebih detail.

      BalasHapus
    12. sudah detail, sila coba lagi (please try again) :D

      BalasHapus
    13. Andi Sholihin saya dah berjaya create calender. Tapi bagaimana nak tukar format date..?saya mahu format date macam ini 22012014

      BalasHapus
    14. ga berfungsi di chrome

      BalasHapus
    15. berfungsi kok gan, coba dicek lagi mungkin ente salah ketik

      BalasHapus
    16. gimana cara biar berfungsi di chrome ya? di IE dan mozilla sih udah bisa...

      BalasHapus