Custom Search

Monday, September 12, 2011

Membuat Input Tanggal dengan jquery UI (DatePicker)

Kadang kita perlu memasukkan tanggal dalam sebuah form input. Jika selama ini, kita memasukkan tanggal secara manual (yang kadang user memasukkan dengan format yang tidak sesuai/tidak lengkap). Untuk menghindari kesalahan user dalam memasukkan tanggal, kita bisa menggunakan jquery UI (DatePicker) . Untuk menggunakan DatePicker, langkahnya seperti berikut :
1. Download jquery UI di link berikut ini. Anda bisa memilih theme yang di gunakan.


2. Ekstrak file yang telah di download tadi ke dalam folder dalam server.
3. Include-kan file css dan js yang ada dalam folder ter-ekstrak tadi.

4. Tambahkan skrip java script berikut, untuk memanggil datepicker.

Keterangan :
changeMonth: true, untuk mengaktifkan combo box pilihan bulan.
changeYear: true, untuk mengaktifkan combo box pilihan tahun.
yearRange : range tahun yang akan di tampilkan, berarti (2011-66 = 1945), sehingga tahun yang akan ditampilkan adalah dari tahun 1945 - 2011. Untuk menambah range 5 tahun setelah 2011 maka bisa di tambahkan '-66:+5'

5. Buat form inputnya seperti berikut ini.


6. Tampilan datepicker ketika di panggil di browser, terlihat seperti berikut.

Sehingga pengguna tinggal memilih tanggal yang akan di masukkan, sehingga akan memperkecil kesalahan memasukkan format tanggal yang di inputkan. Semoga bermanfaat.

18 comments:

  1. thank for good info

    ReplyDelete
  2. Anonymous6:31 AM

    makasih

    ReplyDelete
  3. wah kita coba dech, mudah-mudahan klop dengan web saya

    ReplyDelete
  4. Anonymous11:31 PM

    thanks berat gan.

    ReplyDelete
  5. Anonymous11:08 AM

    Bright reds, mixed with rich browns or beautiful soft greens coupled with deeper shades of emerald green or
    even beautiful butterscotch yellows are perfect options if you need just a pop of
    color. Hence, many people usually choose this gemstone for wedding
    and engagement rings. Proper care will increase the life span of your cord.



    Here is my blog ... backpackingbrazil.com

    ReplyDelete
  6. Anonymous7:37 PM

    I am really loving the theme/design of your blog. Dο you eѵer run into anу browser compаtibilitу issues?
    A few of my blog viѕitors have complаined about my ωebѕіte not working
    сorrectly in Explorer but looks great in Chгome.
    Do уou have any advice to hеlp fiх this issuе?


    Ηere iѕ mу websіte ... Lloyd Irvin

    ReplyDelete
  7. Anonymous11:20 AM

    You might choose to give them recent albums of their most
    favorite bands, a ticket to some concert or
    possibly an i - Pod touch. When looking at giving
    a gift to your baby, you may choose to just
    rush out and purchase him or her a toy store's valuation on toys, dolls, stuffed animals, and also other goodies. Cosmetic salesgirls, should they do not apply make-up, will not be capable to represent the product well.

    Take a look at my web blog anakoelho.blogspot.com

    ReplyDelete
  8. manteb gan tutornya keren..

    ReplyDelete
  9. sangat membantu bos..
    http://effectsjoss.blogspot.com/

    ReplyDelete
  10. nice post sob..
    article yang menarik,saya tunggu article berikutnya yach.hehe..
    maju terus dan sukses selalu...
    salam kenal yach...
    kunjungi blog saya juga ya sob,banyak tuh article2 yang seru buat dibaca..
    agen situs poker online indonesia uang asli,poker online terpercaya dan teraman...
    http://chaniaj.blogspot.com/ dan situs kesayangan kami http://oliviaclub.com dan https://www.facebook.com/pages/Benua-poker/683720458370743?fref=ts
    serta sites.google kebanggaan kami https://sites.google.com/site/pokeronlineterpopuler/
    di oliviaclub.com poker online uang asli terbaik di indonesia dengan teknologi teraman dan tercanggih.
    main dan ajak teman anda bergabung dan dapatkan 20%+20% referral fee dari house commision untuk turnover teman ajakan anda...

    ReplyDelete
  11. Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?
    Jika ya, silahkan kunjungi website ini www.kumpulbagi.com untuk info selengkapnya.

    Oh ya, di sana anda bisa dengan bebas mendowload music, foto-foto, video dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)

    ReplyDelete
  12. gan kalau untuk 2 input caranya bagaimana
    contoh mau buat tanggal masuk dan tanggal keluar, mohon pencerahannya

    ReplyDelete