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.

16 comments:

  1. thank for good info

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

    ReplyDelete
  3. Anonymous11:31 PM

    thanks berat gan.

    ReplyDelete
  4. Anonymous4:41 PM

    thanks bgt sobat

    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. gan kalau untuk 2 input caranya bagaimana
    contoh mau buat tanggal masuk dan tanggal keluar, mohon pencerahannya

    ReplyDelete
  11. Sewa Mobil Pontianak dengan harga murah

    ReplyDelete