Bagi seorang web developer muingkin tidak asing lagi dengan jQuery DatePicker. DatePicker ini biasa dipakai untuk pengembangan web yang memerlukan input data tanggal berdasarkan kalender yang dilekatkan di bidang form input.
Cara kerja DatePicker ini sederhana, DatePicker ini berfokus pada input (ketika klik, atau menggunakan tombol tab) untuk membuka suatu kalender interaktif dengan sedikit animasi. Pilih tanggal, klik di tempat lain pada halaman, atau dengan tekan tombol Esc untuk menutup. Jika tanggal yang dipilih, umpan balik ditampilkan dalam nilai input.
JQuery UI Datepicker merupakan plugin yang dapat dikonfigurasi berfungsi untuk menambahkan fungsi datepicker ke halaman Anda. Anda juga dapat menyesuaikan format tanggal dan bahasa, menambahkan tombol pilihan navigasi lainnya dengan mudah dan membatasi rentang tanggal yang dipilih .
Secara bawaan, kalender datepicker terbuka dengan sedikit overlay ketika field teks terkait mencapai fokus. Untuk kalender inline, cukup melampirkan datepicker dengan span atau div .
Sekarang kita buat form input sederhana sebagai tampilan inputannya.
<h1>Tutorial Menggunakan jQuery UI DatePicker</h1>
<form>
<label>Tanggal: </label>
<input type="text" id="datepicker" />
</form>
Beberapa file jQuery dibawah ini perlu anda tambahkan untuk menampilkan inputan tanggal supaya jQuery DatePicker ini dapat berjalan dengan baik, terdapat dua JavaScript dan satu stylesheet jQuery:
Selanjutnya kita masukan ketiga file ditersebut didalam 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>
Selanjutnya tambahkankan code dibawah ini :
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
Script diatas ini yang paling penting untuk dimasukan, karena seperti yang anda lihat atribut id yang tertera di dalam form input dengan yang diberi nilai datepicker, sehingga script-nya dibuat:
Baca juga Membuat kalkulator dengan JavaScript
Berikut, 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>
Untuk lebih mudahnya, berikut ini script lengkap cara membuat input tanggal dengan jQuery DatePicker menjadi seperti ini.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Tutorial Menggunakan jQuery UI DatePicker</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>Tutorial Menggunakan jQuery UI DatePicker</h1>
<form>
<label>Tanggal: </label>
<input type="text" id="datepicker" />
</form>
</body>
</html>
Terakhir dari saya selamat mencoba dan semoga artikel ini bermanfaat.
Sampai jumpa diartikel yang lainnya.
No comments:
Post a Comment
Komentar yang bermutu Insyaallah akan mendapatkan berkah