Posted by : Just Nanda... Tuesday, June 25, 2013

Yah, pada kali ini saya kan membahas mengenai sebuah fungsi cantik yang ada pada jQuery yang akan membantu kita dalam membuat sebuah kalender yang cantik pula. Nama fungsi tersebut adalah “datepicker”. Datepicker, kalau diartikan satu-satu, date berarti tanggal dan pick berarti ambil. Jadi datepicker  berarti ambil tanggal. Oke, Kelihatan sekali bahasa inggrisnya pas-pasan.
Baik, langsung saja kita lihat skrip dibawah ini.
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Display month &amp; year menus</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      changeMonth: true,
      changeYear: true
    });
  });
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker" /></p>


</body>
</html>
Ini Source Code yang saya ambil langsung dari jqueryui.com

Saya akan memberi penjelasan pada fungsi jQuery saja, berharap teman-teman sudah paham maksud pada tag <HTML>. Jadi, penulisan fungsi JavaScript dituliskan didalam <script></script>. Maka fungsi jQuery yang akan kita gunakan, juga harus dituliskan didalam tag tersebut. Seperti dibawah ini.
<script>
  $(function() {
    $( "#datepicker" ).datepicker({
      changeMonth: true,
      changeYear: true
    });
  });
  </script>
Ket:
$ = Menunjukkan bahwa kita menggunakan jQuery
( "#datepicker" )= Merupakan bagian HTML untuk menjalankan jQuery
datepicker(); = fungsi dari jQuery untuk menampilkan kalender. Pada fungsi ini juga boleh diisikan lagi parameter seperti :
        changeMonth: true,
        changeYear: true
Berfungsi untuk menampilkan bulan serta tahun dan nilai true menunjukkan apakah bulan atau tahun tersebut boleh ditukar.
Perhatikan potongan code berikut!
<p>Date: <input type="text" id="datepicker" /></p>

Nah, pada bagian inilah fungsi jQuery tadi akan dijalankan. Yaitu pada bagian <input> karena memiliki id="datepicker". Sesuai dengan selector ( "#datepicker" ) pada fungsi JavaScript tadi.
Tapi ingat. Ketika teman-teman ingin menggunakan jQuery, jangan lupa untuk menggunakan bagian dibawah ini
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />

Karena bagian ini merujuk ke file dimana fungsi jQuery disimpan. Jadi harus disesuaikan dengan path penyimpanan file jQuery kita.

Dengan demikian, maka kita telah berhasil menciptakan sebuah kalender yang muncul dengan dinamis menggunakan bantuan dari jQuery. Simple kan? 

Leave a Reply

Subscribe to Posts | Subscribe to Comments

- Copyright © 2013 Laboratorium Pemrograman dan Basis Data -Metrominimalist- Powered by Blogger - Designed by Johanes Djogan -