Haloooo..
Sharing lagi nih, kali ini aku mau sharing tentang javascript datepicker. Jadi ceritanya aku mau nampilin beberapa textbox yang ada datepickernya (multiple textbox) gitu dalam satu tabel.Contohnya kayak gambar di bawah ini. Ada kolom development due date yang jumlahnya dinamis kemudian tiap textbox di kolom tersebut kalo di klik muncul datepickernya.
Nah aku kan nyari-nyari. Aku nemu tuh javascriptnya dan contoh penggunaan datepickernya. Tapi cuma di satu textbox. Pernah dulu aku juga mengalami masalah yang sama seperti ini Pas aku lagi magang, bikin aplikasi pendaftaran online. Cuma pas itu jumlah textboxnya terbatas cuma tiga terus akhirnya aku ngakalinnya dengan ngebuat tiga id datepicker. Jadi ada datepicker1, datepicker2, dan datepicker3. Masing-masing id itu dibuat di textbox yang berbeda.
Dan sekarang nemuin kasus kaya gitu lagi cumang lebih kompleks dikit. Hehe 😀 Jumlah textboxnya sekarang dinamis(tidak tentu) cuma disesuaikan dengan jumlah yang ada di development area (lihat gambar). Nah lo pusing kaan. Kemudian mikir mikir mikir akhirnya nemu deh cara ngakalinnya.
Ga jauh beda sama yang dulu. Caranya bikin id sebanyak jumlah data di development area. Buat bikin id nya itu dilakukan looping. Loopingnya pake for di javascript sejumlah data di development area. Buat nyari datanya itu aku bikin
<input type=”hidden” id=”jum_area” value=”$jum_area” />. Di javascript kita bakal baca nilai dari id=jum_area.
Oke deh, cukup penjelasannya sekarang mari kita langsung ke TKP.
Ini nih fungsi barunya :
$(function() {
var jum_weak = $(“#jum”).val();
for(var i=1 ; i <= jum_weak ; i++)
{
$( “#datepicker”+i ).datepicker({
changeMonth : true,
changeYear : true,
dateFormat : ‘dd-mm-yy’,
yearRange : ‘-2:+10’
});
}
});
Oh iya sebelumnya kalian harus mendownload js nya dulu yah.. Ini list js nya :
http://js/jquery-1.9.1.min.js
http://js/jquery-ui.js
<link rel=”stylesheet” type=”text/css” href=”css/jquery-ui.css”>
Meja Duniaku 