Saya akan coba membahas satu per satu fitur dari jQueryUI lewat beberapa posting yang akan saya update terus diblog ini. Untuk artikel pertama adalah fitur Datepicker dari jQueryUI

Untuk bisa memakai jQueryUI, anda harus mendownload librarynya terlebih dahulu di websitenya. Ketika posting ini ditulis versi yang terbaru saat itu adalah jQuery UI 1.9.1

Jika sudah maka bisa diload dihalaman mana anda mau memunculkan fitur datepicker ini

<!-- Load jQuery + jQuery UI -->

< script src="js/jquery-1.8.2.min.js">< /script >

< script src="js/jquery-ui-1.9.1.custom.min.js">< /script >

 

<!-- Load jQuery UI CSS -->

<link rel="stylesheet" href="css/jquery-ui-1.9.1.custom.min.css">

jika sudah di load maka datepicker ini siap digunakan.Semua kode untuk menjalankan jQueryUI harus berada didalam scope document ready seperti biasanya. Saya akan membahas beberapa variasi untuk memanggil datepicker ini agar bisa lebih mudah dimengerti untuk cara memakainya

1. Pemanggilan Default
di bagian script anda

$(document).ready(function(){

 /*Default Functionality*/

 $("#datepicker").datepicker(); 

 });

dan dibagian html anda

<input type="text" id="datepicker" />

2. Animation
di bagian script anda

$(document).ready(function(){

 /*Animation*/

 $("#datepicker2").datepicker(); //init

 $("#datepicker2").datepicker("option","showAnim","bounce");

 /*

 opsi bounce bisa diganti macam2 animasinya

 opsi animasinya : show,slideDown,fadeIn,blind,bounce,clip,drop,fold,slide

 */

 });

dan dibagian html anda

<input type="text" id="datepicker2" />

3. Tanggal di Bulan lain
di bagian script anda

$(document).ready(function(){

 $("#datepicker3").datepicker({

 showOtherMonths: true,

 selectOtherMonths: true

 });

 });

dan dibagian html anda

<input type="text" id="datepicker3" />

4. Tampilkan Button Bar
di bagian script anda

$(document).ready(function(){

 /*Tampilkan Button Bar*/

 $("#datepicker4").datepicker({

 showButtonPanel: true,

 currentText: "Hari Ini",

 closeText: "Tutup"

 });

 });

dan dibagian html anda

<input type="text" id="datepicker4" />

5. Display Inline
di bagian script anda

$(document).ready(function(){

 /*Display Inline*/

 $("#datepicker5").datepicker();

 });

dan dibagian html anda

<div id="datepicker5"></div>

6. Display Menu Bulan dan Tahun
di bagian script anda

$(document).ready(function(){

 /*Display menu bulan dan tahun*/

 $("#datepicker6").datepicker({

 changeMonth: true,

 changeYear: true

 });

 });

dan dibagian html anda

<input type="text" id="datepicker6" />

7. Display beberapa bulan sekaligus
di bagian script anda

$(document).ready(function(){

 $("#datepicker7").datepicker({

 numberOfMonths: 3, //jumlah bulan yg mau ditampilkan

 showButtonPanel: true

 }); 

 });

dan dibagian html anda

<input type="text" id="datepicker7" />

8. Format Date
di bagian script anda

$(document).ready(function(){

 /*Format Date*/

 $("#datepicker8").datepicker({

 dateFormat: "dd/mm/yy"

 });

 /*

 formatnya bisa macam2, misalnya : "yy-mm-dd", "d M, y", "d MM, y", "'day' d 'of' MM 'in the year' yy"

 */

 });

dan dibagian html anda

<input type="text" id="datepicker8" />

9. Dengan icon trigger
di bagian script anda

$(document).ready(function(){

 /*Dengan icon trigger*/

 $("#datepicker9").datepicker({

 showOn: "button",

 buttonImage: "calendar.gif",

 buttonImageOnly: true

 });

 });

dan dibagian html anda

<input type="text" id="datepicker9" />

10. Field Alternatif
di bagian script anda

$(document).ready(function(){

 /*Field Alternatif*/

 $("#datepicker10").datepicker({

 altField: "#alternate",

 altFormat: "DD, d MM, yy"

 });

 });

dan dibagian html anda

<input type="text" id="datepicker10" /> <input type="text" id="alternate" size="30" />

11. Set Rentang Tanggal
di bagian script anda

$(document).ready(function(){

 /*Set Rentang Tanggal*/

 $("#datepicker11").datepicker({

 minDate: -20, //kurang 20 hari dari hari ini

 maxDate: "+1M +10D" //lebih satu bulan 10 hari dari hari ini

 });

 /*

 atau bisa dimasukkan juga dengan format tanggal seperti ini "mm/dd/yyyy" -> 11/20/2012

 */

 });

dan dibagian html anda

<input type="text" id="datepicker11" />

12. Display Informasi Minggu ke
di bagian script anda

$(document).ready(function(){

 /*display informasi minggu ke*/

 $("#datepicker12").datepicker({

 showWeek: true,

 firstDay: 1

 });

 /*

 first day menandakan minggu dimulai dari hari apa..di contoh dikasih nilai 1 berarti mulai dari hari senin

 */

 });

dan dibagian html anda

<input type="text" id="datepicker12" />

Begitulah kira2 untuk memakai Datepicker dari jQueryUI ini, ini hanyalah beberapa contoh basic yang sering digunakan di aplikasi-aplikasi web based biasanya.

Untuk melihat Demo Tutorial ataupun mau mendownload source codenya bisa ke blog saya saja langsung lewat link dibawah ini
View Demo dan Download Source Code