Menggunakan jQueryUI Datepicker

menggunakan jQueryUI Datepicker didalam form web aplikasi anda. Jadi user tidak perlu repot-repot memilih tanggal-tanggal didalam combo box lagi. tetapi cukup dengan memilih tanggal dalam sebuah window kecil dengan GUI yang user friendly.

Untuk bisa menggunakan jQueryUI datepicker, anda harus mendownload paket jQueryUI terlebih dahulu dari web official di sini, klik tombol download yg ada disebelah kanan lalu masukkan folder jqueryui tersebut didalam folder web aplikasi anda. Anda bisa juga memilih theme yg anda inginkan sebelum mendownload. Dalam contoh saya yg ada di demo adalah jQueryUI dengan menggunakan theme smoothness

Untuk bisa menggunakan jqueryUI pada form web aplikasi anda, anda harus mengincludekan file core dari jqueryUI dan CSS nya. Tentunya juga dengan library jquery diatas nya seperti dibawah ini

 

<link type="text/css" href="jqueryui/css/smoothness/jquery-ui-1.8.6.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="jqueryui/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jqueryui/js/jquery-ui-1.8.6.custom.min.js"></script>


Dalam tutorial ini saya akan memberikan banyak contoh atau variasi-variasi dalam menggunakan jqueryui datepicker ini. Misalnya kita mempunyai form html seperti dibawah ini


<form method="post" action="">
<table id="tabelForm" align="center" cellpadding="4">
<tr>
<td width="150" align="right">1. Tanggal<td>
<td>
<input type="text" size="15" id="date1" />
<span class="pesan">[default]</span class="pesan">
<td>
</tr>
<tr>
<td align="right">2. Tanggal<td>
<td>
<input type="text" size="15" id="date2" />
<span class="pesan">[dengan date format, misalnya dd-mm-yy]</span class="pesan">
<td>
</tr>
<tr>
<td align="right">3. Tanggal<td>
<td>
<input type="text" size="15" id="date3" />
<span class="pesan">[hanya bisa milih dari range tanggal tertentu, contoh ini menampilkan<br />tanggal yg bisa dipilih
adalah dimulai dari 20 hari sebelum hari ini, sampai dengan 1 bulan lewat 1 hari ini dari hari ini.
]</span class="pesan">
<td>
</tr>
<tr>
<td align="right">4. Tanggal<td>
<td>
<input type="text" size="15" id="date4" />
<input type="text" id="altDate4" size ="35" />
<span class="pesan">[mengembalikan nilai tanggal di input text alternatif dengan format yang lain juga]</span>
<td>
</tr>
<tr>
<td align="right">5. Tanggal<td>
<td>
<div id="inlineDatepicker"></div>
<span class="pesan">[display inline, menampilkan langsung datepickernya]</span>
<td>
</tr>
<tr>
<td align="right">6. Tanggal<td>
<td>
<input type="text" size="15" id="date6" />
<span class="pesan">
[Pilihan bulan dan tahun dalam combo box]
</span>
<td>
</tr>
<tr>
<td align="right">7. Tanggal<td>
<td>
<input type="text" size="15" id="date7" />
<span class="pesan">
[munculkan tanggal selain bulan yg lagi ditampilkan, dan bisa dipilih]
</span>
<td>
</tr>
<tr>
<td align="right">8. Tanggal<td>
<td>
<input type="text" size="15" id="date8" />
<span class="pesan">
[munculkan tampilan minggu keberapa]
</span>
<td>
</tr>
<tr>
<td align="right">9. Tanggal<td>
<td>
<input type="text" size="15" id="date9" />
<span class="pesan">
[munculkan beberapa bulan sekaligus]
</span>
<td>
</tr>
<tr>
<td align="right">10. Tanggal<td>
<td>
<input type="text" size="15" id="date10" />
<span class="pesan">
[munculkan datepicker dari button]
</span>
<td>
</tr>
<tr>
<td align="right">11. Tanggal<td>
<td>
<input type="text" size="15" id="date11" />
<span class="pesan">
[muncul dengan animasi]
</span>
<td>
</tr>
</table>
</form>

 

Berikut adalah script javascript untuk memanggil atau mendeklarasikan jqueryui datepicker nya

$(document).ready(function(){
/*
1. panggilan default
*/
$("#date1").datepicker();

/*
2. dengan date format, misalnya dd-mm-yy
*/
$("#date2").datepicker({
dateFormat:"dd-mm-yy"
});

/*
3. hanya bisa milih dari range tanggal tertentu, contoh ini menampilkan
tanggal yg bisa dipilih adalah dimulai dari 20 hari sebelum hari ini,
sampai dengan 1 bulan lewat 1 hari ini dari hari ini.
*/

$("#date3").datepicker({
dateFormat:"dd-mm-yy",
minDate: -20,
maxDate: "+1M +1D"
});

/*
4. mengembalikan nilai tanggal di input text alternatif
dengan format yang lain juga

*/
$("#date4").datepicker({
dateFormat:"dd-mm-yy",
altField: "#altDate4",
altFormat: "DD, d MM, yy"
});

/*
5. display inline, menampilkan langsung datepickernya
*/
$("#inlineDatepicker").datepicker();

/*
6. Pilihan bulan dan tahun dalam combo box
*/
$("#date6").datepicker({
dateFormat:"dd-mm-yy",
changeMonth:true,
changeYear:true
});

/*
7. munculkan tanggal selain bulan yg lagi ditampilkan, dan bisa dipilih
*/

$("#date7").datepicker({
dateFormat:"dd-mm-yy",
showOtherMonths: true,
selectOtherMonths: true
});

/*
8. munculkan tampilan minggu keberapa
*/

$("#date8").datepicker({
dateFormat:"dd-mm-yy",
showWeek: true,
firstDay: 1
});

/*
9. munculkan beberapa bulan sekaligus
*/

$("#date9").datepicker({
dateFormat:"dd-mm-yy",
numberOfMonths: 3
});

/*
10. munculkan datepicker dari button
*/

$("#date10").datepicker({
dateFormat:"dd-mm-yy",
showOn: 'button',
buttonText: '...',
});

/*
11. muncul dengan animasi
*/

$("#date11").datepicker({
dateFormat:"dd-mm-yy",
showAnim:"bounce"
});
});

Untuk link downloadnya silakan download di link terkait

http://www.nikolius-luiso.web.id/posting/Menggunakan_jQueryUI_Datepicker

 

Sumber : http://www.nikolius-luiso.web.id

 

 

Kunjungi www.prowebpro.com untuk menambah wawasan anda.

Web Design Packages

Paket BasicPaket BusinessPaket Corporate

Address

PT. Proweb Indonesia

 

Please visit: www.proweb.co.id