Dengan menggunakan library jQuery UI kita dengan mudah membuat datepicker. Datepicker adalah sebuah aplikasi untuk memilih tanggal. Berikut akan dijelaskan langkah-langkah pembuatannya.
Pertama-tama kita membuat input :
Tanggal: <input id=”tanggal”>
Kemudian dilanjutkan dengan include file-file yang diperlukan:
<script src=”development-bundle/jquery-1.6.2.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.core.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.datepicker.js”>
</script>
Dan terakhir adalah coding sesuai kebutuhan:
<script>
(function($){
$(“#tanggal”).datepicker();
})(jQuery);
</script>
Coding seluruhnya :
<!DOCTYPE html>
<html>
<head>
<title>Datepicker</title>
<link rel=”stylesheet” href=”css/smoothness/jquery-ui-1.8.16.custom.css”>
</head>
<body>
Tanggal: <input id=”tanggal”>
<script src=”development-bundle/jquery-1.6.2.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.core.js”>
</script>
<script src=”development-bundle/ui/jquery.ui.datepicker.js”>
</script>
<script>
(function($){
$(“#tanggal”).datepicker();
})(jQuery);
</script>
</body>
</html>
Demonya ada di http://aris.proweb.asia/datepicker.html dengan tampilan seperti gambar di bawah ini:
Kunjungi www.proweb.co.id untuk menambah wawasan anda.