Taukah kamu, apa
itu datepicker ?
Datepicker adalah
sebuah input penanggalan berdasarkan kalender yang dilekatkan pada bidang form
input. Datepicker menggunakan include JQuery UI Datepicker, yang merupakan
library untuk dapat memanggil fungsi datepicker itu sendiri. Sedangkan multiple
datepicker yaitu dimana dalam satu form terdapat dua input datepicker yang
bekerja bersamaan.
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.
Secara default,
kalender datepicker terbuka dengan sedikit overlay ketika bidang teks terkait
mencapai fokus. Untuk kalender inline, cukup melampirkan datepicker dengan
div atau span.
1. Masukan library yang kamu butuhin, seperti
:
lah kita masukin di antara <head> … </head>, seperti code berikut : <link rel="stylesheet" href="jquery-ui.css" type="text/css"/>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>
2. 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();
$( "#datepicker2" ).datepicker();
});
</script>
Gunakan satu “$( "#datepicker" ).datepicker(); “ saja apabila kamu hanya menggunakan satu
datepicker.
3. Dan berikut ini code lengkapnya :
<!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.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#datepicker2" ).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 Awal: </label>
<input type="text" id="datepicker" />
<br>
<label>Tanggal Akhir: </label>
<input type="text" id="datepicker2" />
</form>
</body>
</html>
Hasil runing program :
Untuk yang ingin code lengkap dapat diunduh disini
Mas kalo dalam 1 form kita ada 5 data tanggal brti kita hrs masuke #datapicker sampai 5x gitu $("#datepicker2").datepicker()
ReplyDelete.....
$("#datepicker5").datepicker() gitu kah??