JQuery Datepicker adalah salah satu jquery yang sering digunakan dalam memilih tanggal, bulan, dan tahun. jQuery Datepicker cukup populer dikalangan web designer karena jQuery Datepicker memberikan kemudahan bagi pengguna website.
Berikut langkah penggunaan JQuery Datepicker,
1. Download JQuery UI di link Berikut, kemudain lakukan ekstrak file yang di download tersebut.
2. Buat folder js untuk menyimpan file
jquery-1.10.2.js dan jquery-ui.js. Folder themes untuk menyimpan file style jquery-ui.css.3. Include-kan file css dan js yang ada dalam folder ter-ekstrak tadi ke dalam tag <head> seperti berikut
<head>
<title>Sample Datepicker</title>
<link rel="stylesheet" href="themes/smoothness/jquery-ui.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="ui/jquery-ui.js"></script>
</head>
4. Tuliskan script untuk memanggil datepicker,
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker();
});
</script>
5. Buat tag HTML nya,
<p><input type="text" id="datepicker"></p>
6. Berikut hasil dari script datepicker diatas
Script keseluruhan untuk memanggil datepicker
<html>
<head>
<title>Sample Datepicker</title>
<link rel="stylesheet" href="themes/smoothness/jquery-ui.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="ui/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<p><input type="text" id="datepicker"></p>
</body>
</html>
Selamat mencoba dan semoga bermanfaat.
2 Komentar
yang di didownload jquery nya versi yang mana?
BalasHapusdan filenya banyak ketika di ekstrak, apakah cukup yang tiga itu saja yang di copy?
thanks
Lebih bagusnya pake jQuery versi yang terbaru.
HapusUntuk file yang dibutuhkan cukup dengan 3 file itu saja untuk menampilkan datepicker. Terima kasih