Tutorial Membuat Input Tanggal menggunakan jQuery DatePicker

Tutorial Membuat Input Tanggal menggunakan jQuery DatePicker
Di Posting Oleh : wandi
Kategori : javascript Pemprograman web

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.

Baca juga Menghitung Luas Segitiga dengan Javascript

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>