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 & 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?
