Sabtu, 21 Mei 2011

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

    20 komentar:

    Anonim mengatakan...

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

    Anonim mengatakan...

    makasih gan :beer:

    Wawan mengatakan...

    Mantep gan tutorialnya kebetulan saya juga mau bikin psb online

    Anonim mengatakan...

    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?

    Anonim mengatakan...

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

    Anonim mengatakan...

    iya cara ganti format dd-mm-yyyy gmn ya ?

    astheams mengatakan...

    makasih...

    Alisa Nindya mengatakan...

    makasih atas infonya..

    Harisss mengatakan...

    Manthabbbbbbbbbbbbbbb gan

    Anonim mengatakan...

    Bagusss

    febrian mengatakan...

    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

    hanis mengatakan...

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

    Harahap's.co.au mengatakan...

    sudah di hapus malah keluar juga kelender nya ya??brrrr

    joe mengatakan...

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

    fadid mohd mengatakan...

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

    Andi Sholihin mengatakan...

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

    fadid mohd mengatakan...

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

    Anonim mengatakan...

    ga berfungsi di chrome

    Andi Sholihin mengatakan...

    berfungsi kok gan, coba dicek lagi mungkin ente salah ketik

    Anonim mengatakan...

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

    Poskan Komentar

    Silakan berkomentar di blog ini, komentar Anda menjadi alasan kenapa saya harus menulis ^_^

     
    © Copyright .::Berbagi Cerita::. 2011 - Some rights reserved | Powered by Blogger.com.
    Template Design by Herdiansyah Hamzah | Published by Borneo Templates and Theme4all
    [tutup]