JQuery UI Datepicker adalah plugin sangat dapat dikonfigurasi yang menambahkan fungsi datepicker ke halaman Anda. Anda dapat menyesuaikan format tanggal dan bahasa, membatasi rentang tanggal yang dipilih dan menambahkan tombol dan pilihan navigasi Sekarang kita buat form input sederhana sebagai tampilan inputannya.
<h1>jQuery UI DatePicker Sederhana</h1>
<form>
<label>Tanggal: </label>
<input type="text"
id="datepicker" />
</form>
Beberapa
file jQuery dibawah ini perlu ditambahkan untuk menampilkan inputan penanggalan
supaya jQuery DatePicker ini bisa berfungsi dengan baik, terdapat dua
JavaScript dan satu stylesheet jQuery:
Kita masukan
ketiga file di atas setelah elemen
<head>
<link rel="stylesheet"
href="jquery-ui.css" type="text/css"/>
<script src="jquery-1.10.2.js"
type="text/javascript"></script>
<script src="jquery-ui.js"
type="text/javascript"></script>
script ini yang paling penting untuk
dimasukan, lihat atribut id yang tertera di dalam form input
dengan yang diberi nilai datepicker, sehingga script-nya dibuat:
<script>
$(function() {
$(
"#datepicker" ).datepicker();
});
</script>
Kita
tambahkan sedikit style untuk melengkapi tampilan akhir nanti.
<style>
body {
background:
#f5f5f5;
margin: 0;
padding:
20px 0 0 0;
text-align:
center;
font-size:
16px;
}
h1 {
color: #222;
font-size:
24px;
}
</style>
.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker
Sederhana</title>
<link rel="stylesheet"
href="jquery-ui.css" type="text/css"/>
<script src="jquery-1.10.2.js"
type="text/javascript"></script>
<script src="jquery-ui.js"
type="text/javascript"></script>
<script>
$(function() {
$(
"#datepicker" ).datepicker();
});
</script>
<style>
body {
background:
#f5f5f5;
margin: 0;
padding:
20px 0 0 0;
text-align:
center;
font-size:
16px;
}
h1 {
color: #222;
font-size:
24px;
}
</style>
</head>
<body>
<h1>jQuery UI DatePicker Sederhana</h1>
<form>
<label>Tanggal: </label>
<input type="text"
id="datepicker" />
</form>
</body>
</html>
Jika
berhasil tampilan akhirnya akan seperti ini:
Sekian Dan terimakasih V: Semoga bermanfaat untuk teman – teman dan lihat juga tutorial lainnya di Mudabeda
0 komentar:
Post a Comment