Membuat Datepicker dengan JQuery

Penulis: Tim Editor | Kategori: JQuery | Tanggal Terbit: | Dilihat: 2812 kali

Datepicker merupakan salah satu teknik Jquery yang paling populer dan sering digunakan untuk membuat aplikasi berbasis web. Datepicker merupakan sebuah pop-up kalender yang digunakan untuk menginputkan tanggal, bulan dan tahun secara keseluruhan melalui sebuah textbox. Pada intinya jika textbox tersebut terseleksi, maka aka ditampilkan pop-up kalender sehingga membatu sekali bagi pengguna seperti pada gambar berikut.

Okey langsung saja kita akan praktek membuat datepicker.

Langkah pertama untuk dapat membuat DatePicker yaitu download terlebih dahulu plugin Jquery dan Jquery datepicker

Untuk mendownload Jquery dan Jquery datepicker silahkan Klik disini

Atau Anda dapat mendownload fullscriptnya pada akhir artikel ini.

Berikut adalah contoh script membuat datepicker dengan Jquery.

<!doctype html>
<html>
<head>
<title>Datepicker</title>
<link type="text/css" href="JQuery/theme/base/jquery-ui.css" rel="stylesheet">
<link type="text/css"  href="JQuery/theme/base/jquery.ui.datepicker.css"  rel="stylesheet">
</head>
<body>

<h4>Datepicker</h4>
 
 Date <input type="text" id="tanggal" name="tanggal">

<script  src="JQuery/jquery-2.1.0.min.js"></script>
<script src="JQuery/jquery.ui.core.js"></script>
<script src="JQuery/jquery.ui.datepicker.js"></script>

<script>
$('#tanggal').datepicker({
		format: 'yyyy-mm-dd',
		daysOfWeekDisabled: "0",
		autoclose:true
    });
</script>

<style>
div.ui-datepicker{
 font-size:12px;
}
</style>
</body>

</html>

Download Full Scriptnya Disini