Datepicker
Bagi para developer web mesti tidak merasa asing lagi dengan jQuery DatePicker. Ini biasa digunakan dalam pengembangan web yang memerlukan input penanggalan berdasarkan kalender yang dilekatkan pada bidang form input.
Cara kerja yang sederhana, DatePicker ini berfokus pada input (klik, atau menggunakan tombol tab) untuk membuka sebuah kalender interaktif dengan sedikit overlay. Pilih tanggal, klik di tempat lain pada halaman (blur input), atau tekan tombol Esc untuk menutup. Jika tanggal yang dipilih, umpan balik ditampilkan sebagai nilai input.
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 lainnya dengan mudah.
Secara default, kalender datepicker terbuka dengan sedikit overlay ketika bidang teks terkait mencapai fokus. Untuk kalender inline, cukup melampirkan datepicker dengan div atau span.
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>Nah, 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>Berikut ini script lengkap cara membuat input tanggal dengan jQuery DatePicker menjadi seperti ini.
<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.12.4.min.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>
<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.12.4.min.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:
Jika ada pertanyaan silakan berkomentar.
Jangan Lupa like dan share.
Belajar Pemrograman di fajaryusuf.com aja. :)
Jangan Lupa like dan share.
Belajar Pemrograman di fajaryusuf.com aja. :)
MATERI JQUERY
Jika anda baru dalam belajar jquery belajarlah dari materi pertama :
Materi ke-1 : Mengenal lebih JQUERY
Materi ke-2 : Memahami Selector, Install, dan Latihan
Materi ke-3 : Event
Materi ke-4 : Effect
Materi ke-5 : Berkreasi dengan Plugin
Materi ke-6 : Datepicker
Materi ke-7 : Accordion
Jika anda baru dalam belajar jquery belajarlah dari materi pertama :
Materi ke-1 : Mengenal lebih JQUERY
Materi ke-2 : Memahami Selector, Install, dan Latihan
Materi ke-3 : Event
Materi ke-4 : Effect
Materi ke-5 : Berkreasi dengan Plugin
Materi ke-6 : Datepicker
Materi ke-7 : Accordion
Comments