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.
<!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:
Lihat DEMO
Selamat Mencoba!
mau bertanya
file2 ini di copy ke folder mana
Mohon pencerahannya
Bisa ditempatkan dalam satu folder aja dulu dengan index.html gan
Pak
Masih tidak keluar tanggalnya di input field kira kira apa ya penyebabnya
untuk file
1.jquery.js
2.jquery-ui.js
3.jqueri-ui.css
diletakan di folder mana, seperti 3 file tersebut
Mohon pencerahannya
Salam
mR
Contoh bikin folder “datepicker” masukan semua file tersebut termasuk file index.html dalam satu folder
Silahkan bisa lihat di SINI.
pak
done it’s working, terima kasih
kalau untuk multple gimana pak atau dengan kata lain ingin buat lebih dari 1 datepicker dalam 1 page contoh
1. tanggal masuk
2. tanggal keluar
salam
MR
Datepicker bisa cukup satu saja, gunakan ID & Class untuk membedakannya. Datepicker pake ID, nah untuk tanggal masuk dan tanggal keluar pake Class. Penamaannya bebas yang penting mudah diingat.
mas, bisa dijelasin mas gimana teknisnya membuat id dan class berbeda untuk beberapa datepicker?
Semoga membantu
$(function() {$( "#datepickermasuk" ).datepicker();
$( "#datepickerkeluar" ).datepicker();
});
Pak tidak mau juga tanggalnya seperti ini
jQuery UI Datepicker – Display month & year menus
$(function() {
$( “#datepicker” ).datepicker({
changeMonth: true,
changeYear: true
});
});
$(function() {
$( “#datepicker” ).datepicker({
changeMonth: true,
changeYear: true
});
});
datepicker cukup pake satu saja
terima kasih banyak gan , sehat selalu
Nice article
gak work..
uda di coba sama percis kyax di atas..
saya pake bootstrap..
ngaruh gx ya coding nya ?
Coba cek ulang lagi
work gan, dan berhasil 🙂 makasih ilmunya 🙂
Sama-sama gan, semoga bermanfaat.
bang, jquery nya mmg segitu panjang ya scriptnya ya bang,..
alnya klw di buka scriptnya membingungkan bang,..
jQuery memang seperti itu, itu sudah default yang perlu dibuat adalah kustom javascript nya.
maaf gan numpang nnya, untuk set ukuranny bisa ga gan? bagaimana ya?? itu kan outputnya bulan/tangal/tahun, nah kalau diganti jadi tanggal/bulan/tahun bisa gan? mohon bimbingannya gan
Coba seperti ini :
$( ".selector" ).datepicker({
dateFormat: "dd-mm-yy"
});
Terima Kasih Masta buat sharing ilmunya
Sama-sama semoga bermanfaat
Itu nanti formatnya gimana ya mas?
kok kebanyakan formatnya bulan/tanggal/tahun?
DatePicker memang seperti itu gan, format yang dimaksud seperti apa yah?
gan untuk ngatur format tanggal gimana ?
ane pengen format nya tuh “dd-mm-yyyy”
bisa set seperti ini
$( ".selector" ).datepicker({
dateFormat: "dd-mm-yyyy"
});