Menampilkan Tanggal dengan Mode Kalender Menggunakan JQuery UI

tanggal kalender gb1

Hello sob,

Sebelumnya sekilas telah dibahas tentang Jquery disini:
Jquery sendiri memperkenalkan penggunaan plugin , sehingga sobat bisa berkreasi tanpa batas. Salah satunya adalah dengan JQuery UI (User Interface) , dimana ini adalah plugin yang sangat populer dan banyak digunakan, yang komponennya meliputi:
  • Accordion
  • Button & Autocomplete
  • Datepicker
  • Dialog
  • Drag & Drop
  • Effect & Animation
  • dll
Sesuai topik bahasan kali ini, kita akan membuat form sederhana dimana untuk input tanggal dengan Jquery UI datepicker. Effecknya akan seperti gambar dibawah ini:

tanggal kalender gb2

Langsung aja kita bahas caranya:

1. Pertama persiapkan file-file library dari Jquery yang meliputi:
  • Style Jquery UI (css/smoothness/jquery-ui-1.9.0.custom.css)
  • Library Jquery (jquery-1.8.2.js)
  • Library Jquery UI (jquery-ui-1.9.0.custom.js)
  • Semua file silahkan didownload DISINI
tanggal kalender gb3

isi folder JS
tanggal kalender gb4


2. Buat file dengan nama index.php, dan copas kode berikut:



Penjelasan singkatnya:

<link rel="stylesheet" href="js/css/smoothness/jquery-ui-1.9.0.custom.css" />

sobat copas file jquery-ui-1.9.0.custom.css dan tempatkan pada folder js (atau sobat bisa tempatkan di folder apa saja) , dan pastikan path nya sesuai di href="path/jquery-ui-1.9.0.custom.css" . File ini adalah file yang mengatur tampilan dari kotak kalendernya (style css nya).

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

Dan baris kode ini adalah baris kode yang memanggil file library dari Jquery.

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

Ini adalah baris kode memanggil library plugin Jquery UI nya.

<script>
$(document).ready(function(){
$("#tanggal").datepicker();
});
</script>


  • $(document).ready(function(){ ... = Jquery akan dijalankan saat halaman html selesai dibaca atau dokumen sudah ready.
  • $("#tanggal").datepicker(); = disini efek Jquery akan di jalankan untuk form html dengan id= "tanggal", dan akan dikenai efek datepicker.
Dan berikut baris html yang akan dikenai efek datepicker :
<input type="text"id="tanggal" />

Pada form input dengan id="tanggal" akan dikenai efek datepicker diatas, coba anda hilangkan id tersebut maka efek datepicker pun tidak akan berlaku lagi untuk form input itu.

Okay itu aja latihan hari ini, SELAMAT MENCOBA !!

Subscribe to receive free email updates:

0 Response to "Menampilkan Tanggal dengan Mode Kalender Menggunakan JQuery UI"

Post a Comment