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>
Selamat Mencoba!
mirwan says
mau bertanya
file2 ini di copy ke folder mana
Mohon pencerahannya
Ahmad Fahrurroji says
Bisa ditempatkan dalam satu folder aja dulu dengan index.html gan
mirwan says
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
Ahmad Fahrurroji says
Contoh bikin folder “datepicker” masukan semua file tersebut termasuk file index.html dalam satu folder
Silahkan bisa lihat di SINI.
mirwan says
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
Ahmad Fahrurroji says
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.
Adil says
mas, bisa dijelasin mas gimana teknisnya membuat id dan class berbeda untuk beberapa datepicker?
Ario says
Semoga membantu
$(function() {
$( "#datepickermasuk" ).datepicker();
$( "#datepickerkeluar" ).datepicker();
});
mirwan says
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
});
});
Ahmad Fahrurroji says
datepicker cukup pake satu saja
yandra says
terima kasih banyak gan , sehat selalu
Android Maker says
Nice article
ren says
gak work..
uda di coba sama percis kyax di atas..
saya pake bootstrap..
ngaruh gx ya coding nya ?
Ahmad Fahrurroji says
Coba cek ulang lagi
masfuadi iskandar syah says
work gan, dan berhasil 🙂 makasih ilmunya 🙂
Ahmad Fahrurroji says
Sama-sama gan, semoga bermanfaat.
tama pandi says
bang, jquery nya mmg segitu panjang ya scriptnya ya bang,..
alnya klw di buka scriptnya membingungkan bang,..
Ahmad Fahrurroji says
jQuery memang seperti itu, itu sudah default yang perlu dibuat adalah kustom javascript nya.
Dwi Listiani says
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
Ahmad Fahrurroji says
Coba seperti ini :
$( ".selector" ).datepicker({
dateFormat: "dd-mm-yy"
});
arunawawi says
Terima Kasih Masta buat sharing ilmunya
Ahmad Fahrurroji says
Sama-sama semoga bermanfaat
aldi febriyanto says
Itu nanti formatnya gimana ya mas?
kok kebanyakan formatnya bulan/tanggal/tahun?
Ahmad Fahrurroji says
DatePicker memang seperti itu gan, format yang dimaksud seperti apa yah?
Aman says
gan untuk ngatur format tanggal gimana ?
ane pengen format nya tuh “dd-mm-yyyy”
Ahmad Fahrurroji says
bisa set seperti ini
$( ".selector" ).datepicker({
dateFormat: "dd-mm-yyyy"
});