a

Tuesday, 21 February 2012

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.
Post di

13 comments:

  1. Ashokani Ashz22 April 2012 at 22:29

    terimakasih saya ucapkan...
    artikel ini sangat membantu saya..
    :)

    ReplyDelete
  2. Anonymous30 March 2013 at 18:01

    I will immediately snatch your rss as I can't find your email subscription hyperlink or e-newsletter service. Do you've any?
    Kindly allow me know in order that I may just subscribe.
    Thanks.

    Feel free to surf to my web page; soal cpns

    ReplyDelete
  3. Anonymous5 April 2013 at 07:23

    Icing or frosting is the creamy topping added to baked
    goods, such as cakes and cupcakes for decorating purposes.
    This would be true in the case of any tiered wedding or birthday
    cake, and also when other items, such as fresh
    flowers, are being added to the display. While working with these
    edible sheets make sure to complete doing the printing job in advance and then store
    them in a zip-loc bag.

    Also visit my weblog; kue lapis keju

    ReplyDelete
  4. Anonymous10 April 2013 at 23:36

    8 oz. Whether you are a skilled chef or a novice in the kitchen, appliances save time and energy.
    50 a movie.

    Here is my web page; commoner.bitv-test.de

    ReplyDelete
  5. Anonymous2 May 2013 at 20:37

    When someone writes an piece of writing he/she retains the plan of a user in his/her brain that how
    a user can know it. Therefore that's why this paragraph is great. Thanks!

    Here is my blog ... jasa seo murah

    ReplyDelete
  6. Anonymous24 May 2013 at 03:06

    The Lego figure has an evil face, a detailed body with a cape and
    removable helmet as well as the inevitable red lightsaber.
    In 1947, together with his son Godtfred, Kristiansen obtained samples of
    interlocking plastic bricks produced by Kiddicraft. Included in the furnishings for this area are several books, a telescope, and the Vanishing Cabinet.



    Feel free to surf to my web page acsocial.com

    ReplyDelete
  7. Anonymous24 May 2013 at 15:52

    Packed in groups of four or eight they supply you a cost effective way
    of purchasing a set for your dinner table. The Gorham Fairfax
    silver 4-piece place setting by way of example,
    is one in the most popular flatware items that the business has
    today. You can get napkin rings which have graduation caps with them, or tie them
    yourself with tassels, just like the ones on caps.

    ReplyDelete
  8. Anonymous29 May 2013 at 00:20

    Remember - F, VVS, VS, SI and I - the most valuable at the
    start of the scale. When in doubt, you can always take your high
    quality Cubic Zirconia gold or platinum jewelry to a local
    jeweler to be professionally cleaned and polished.

    Carat - Diamond size is directly linked to stone cost.


    Feel free to visit my blog ... http://moainet.jp/wiki/index.php?title=%E5%88%A9%E7%94%A8%E8%80%85:SteffenAy

    ReplyDelete
  9. Anonymous29 May 2013 at 07:27

    I use it to make daily smoothies, grate food, make whipped cream and of course to generate my masterpiece strawberry daiquiris.
    Today so many people are becoming very health conscious,
    we have been becoming more interested in the things we eat & a
    lot more so regarding the foods our little ones eat.
    The hand blender is generally used by smaller 1 or 2 person tasks whilst the counter top version is for bigger or
    harder to complete jobs for example making smoothies and ice cold
    mixed drinks.

    My web blog - http://smokersgroove.com/index.php?do=/profile-75622/info

    ReplyDelete
  10. Anonymous29 May 2013 at 11:27

    Proper brewing temperature is critical to making a good cup
    of coffee. Many people love to drink their coffee hot and mixed with different
    flavors, while some would prefer to possess their coffee
    cold. Also, regular ground coffee should remain in contact while using
    water for between 6 to 8 min.

    Also visit my web site ... Coffee maker

    ReplyDelete
  11. Anonymous29 May 2013 at 22:30

    Using lots of brightly coloured soft fruits, a number of
    bananas take body, and yogurt, milk, as well as coconut milk being a base, a
    give you a variety will exist to fit every taste.
    Its 3-cup capacity blending beaker is very large enough to accommodate the constituents you are going to combine for kitchen work.
    Not just that, Kenwood hand blenders have usability and peace of mind in
    mind.

    My blog post ... kitchenaid ksb560

    ReplyDelete
  12. Anonymous30 May 2013 at 22:48

    Vacuum cleaners with bags need to be replaced frequently.
    As can be seen from the above applications, cleaners of this type have a wide
    variety of uses. For bagless vacuum machines, check the compartment
    where dust is stored.

    Also visit my website :: dyson animal

    ReplyDelete

Subscribe to: Post Comments (Atom)