Membuat Form Input Tanggal Kalender (Date Picker) Dengan Zebra DatePicker
1. Apa itu Datepicker?
Datepicker adalah sebuah program javascript berbentuk seperti kalender yang dapat dipasang di form HTML untuk menginput atau memasukkan tanggal dengan valid dan sesuai dengan format yang diinginkan. Dengan datepicker kita dapat mempermudah melakukan validasi terhadap inputan user yang berupa tanggal sehingga data yang dimasukkan bisa lebih valid dan mencegah user memasukkan tanggal yang tidak valid seperti 31 Februari, kan gak pernah ada tuh tanggal 31 Februari?
2. Sedikit tentang Zebra Datepicker
Zebra Datepicker adalah plugin datepicker canggih dan mudah digunakan. Program javascript ini adalah plugin JQuery sehingga jika kita ingin menggunakannya Zebra Datepicker kita harus memanggil JQuery terlebih dahulu. Untuk yang belum kenal JQuery saya jelaskan sedikit, JQuery adalah javascript framework yang mampu mengatasi permasalahan yang rumit di javascript, untuk kalian yang baru belajar pemrograman web sangat disarankan mempelajari JQuery. Jangan takut! JQuery mudah dipelajari dan banyak sekali tutorial tentang JQuery jadi tidak ada alasan untuk tidak mencoba.
3. Kesaktian Zebra Datepicker
Agar kesaktian Zebra Datepicker dapat kita saksikan secara langsung, berikut ini saya coba tampilkan demo programnya yang diterjemahkan dari website resmi Zebra Datepicker:
Kebutuhan
Zebra_Datepicker tidak memiliki depedensi/kebutuhan selain jQuery 1.5.2 dan versi diatasnya, tapi halaman yang menggunakan plugin ini harus menggunakan "strict doctype" seperti ini:
<!doctype html>
Cara Menggunakan
Pertama, panggil jQuery versi terakhir baik dari local maupun dari internet.
<script src="folder/library/jquery.min.js" type="text/javascript"></script>
Lalu panggil Zebra_Datepicker jQuery plugin, seperti berikut ini:
<script src="path/to/zebra_datepicker.js" type="text/javascript"></script>
Setelah itu, panggil tema yang tersedia (default, metallic, bootstrap) :
<link href="path/to/default.css" rel="stylesheet" type="text/css"></link>
Nah, di dalam event DOM-ready, arahkan plugin Zebra_Datepicker ke <input type="text" /> contohnya :
$(document).ready(function() {
// diasumsikan elemen yang ingin kita isi datepicker
// sudah memiliki class "datepicker"
$('input.datepicker').Zebra_DatePicker();
});
Hal ini akan menambahkan icon kalender ke elemen yg ditentukan. Jika icon diklik maka datepicker akan muncul.
Untuk mendapatkan reference ke instance Zebra_DatePicker yang ditambahkan ke elemen tersebut, caranya seperti berikut:
var $zdp = $('#element').data('Zebra_DatePicker');
Demo Program
1. Datepicker dengan pengaturan default.
$('#datepicker-example1').Zebra_DatePicker();
2. Tanggal yang bisa dipilih hanya tanggal di masa depan, dimulai dari satu hari di masa setelah hari ini.
$('#datepicker-example2').Zebra_DatePicker({
direction: 1 // tipe boolean true akan membuat date picker hanya untuk tanggal yang akan datang saja
// tapi dimulai dari hari ini, bukan esok hari
});
3. Tanggal dapat dipilih hanya tanggal yang akan datang saja, dimulai dari hari ini. Selain itu, Sabtu dan Minggu selalu dinonaktifkan.
$('#datepicker-example3').Zebra_DatePicker({
direction: true,
disabled_dates: ['* * * 0,6'] // semua hari, semua bulan, semua tahun
// akhir pekan adalah 0 atau 6 (Minggu atau Sabtu)
});
4. Tanggal yang dapat dipilih adalah didalam interval, dimulai dari besok sampai 10 hari setelah besok.
$('#datepicker-example4').Zebra_DatePicker({
direction: [1, 10]
});
5. Tanggal yang dapat dipilih berada diantara 2 tanggal yang ditentukan.
$('#datepicker-example5').Zebra_DatePicker({
// ingatlah bahwa cara penulisan tanggal
// bergantung pada value dari property "format"!
direction: ['2012-08-01', '2012-08-12']
});
6. Yang dapat dipilih adalah tanggal yang akan datang, dimulai dari tanggal yg ditentukan.
$('#datepicker-example6').Zebra_DatePicker({
// ingatlah bahwa cara penulisan tanggal
// bergantung pada value dari property "format"!
direction: ['2012-08-01', false]
});
7. Tanggal di date picker yang kedua dimulai dari isi dari date picker pertama ditambah 1 hari
$('#datepicker-example7-start').Zebra_DatePicker({
direction: true,
pair: $('#datepicker-example7-end')
});
$('#datepicker-example7-end').Zebra_DatePicker({
direction: 1
});
8. Mengatur format dari tanggal yang dipilih:
$('#datepicker-example8').Zebra_DatePicker({
format: 'M d, Y'
});
9. Menampilkan nomor awal pekan
$('#datepicker-example9').Zebra_DatePicker({
show_week_number: 'Wk'
});
10. Memulai dengan pilihan “tahun” – direkomendasikan ketika user memilih tanggal lahirnya. Ingatlah bahwa Anda dapat berganti tampilan dengan meng-klik header date picker diantara tombol “previous” dan “next”
$('#datepicker-example10').Zebra_DatePicker({
view: 'years'
});
11. Berhenti setelah memilih bulan
$('#datepicker-example11').Zebra_DatePicker({
format: 'm Y' // perhatikan bahwa hal itu karena tidak ada hari di dalam format
// user tidak dapat memilih tanggal hari
});
12. meng-handle event "onChange". jika callback function di tempatkan pada event "onChange", ini bisa dipanggil kapanpun user mengubah tampilan (hari/bulan/tahun), serta ketika user meng-klik icon "next"/"previous" di semua tampilan. callback function yang dipanggil oleh event ini mengambil dua argumen/parameter - tampilan (hari/bulan/tahun) dan element yang "aktif" (tidak non aktif) di dalam tampilan tersebut, sebagai elemen jQuery memungkinkan kustomisasi dan interaksi dengan sel-sel tertentu di dalam tampilan date picker:
$('#datepicker-example12').Zebra_DatePicker({
// eksekusi function ketika user mengubah tampilan (hari/bulan/tahun)
// serta ketika user meng-klik tombol "next"/"previous" di tampilan date picker
onChange: function(view, elements) {
// pada tampilan hari...
if (view == 'days') {
// iterasi setiap elemen yg aktif di tampilan saat ini
elements.each(function() {
// untuk memudahkan pencarian tanggal tertentu, setiap elemen mengambil
// atribut data "date" yang berbentuk :
// - YYYY-MM-DD untuk elemen dalam tampilan "hari"
// - YYYY-MM untuk elemen dalam tampilan "bulan"
// - YYYY untuk elemen dalam tampilan "tahun"
// jadi, karena kita berada di tampilan "hari",
// ayo kita temukan tanggal 24 menggunakan regular expression
// (ingat bahwa ini akan diterapkan pada setiap tanggal 24
// setiap bulan pada setiap tahun)
if ($(this).data('date').match(/\-24$/))
// dan sorot tanggal tersebut!
$(this).css({
backgroundColor: '#C40000',
color: '#FFF'
});
});
}
}
});
13. Kalender selalu ditampilkan. Atur properti "always_visible" yang ditujukan ke elemen jQuery
yang akan memuat date picker
$('#datepicker-examples13').Zebra_DatePicker({
always_visible: $('#date-container')
});
Nah, buat contoh pemakaiannya silakan download :
 |
| Download Demo Program |
Ya begitulah yang dapat jelaskan, untuk lebih jelasnya silakan teman-teman mengunjungi website aslinya di http://stefangabos.ro/jquery/zebra-datepicker
Seperti biasa, saya tunggu kritik dan saran dari teman-teman pembaca. Salam Blogger Madura ^_^
saya uda menggunakan zebra datepicker , tapi kendalanya , format yang ke input ke database , format Y-m-d.
BalasHapusdan pada tanggal sekarag input.
gimana cara biar bisa pake format indonesia, dan input ke database nya.
ane pake CI.
cara inputnya bisa langsung pake fungsi STR_TO_DATE di Query-nya gan, misalnya gini:
HapusINSERT INTO table_mahasiswa (nama, alamat, tanggal_lahir) VALUES('ANDI S', 'SURABAYA', STR_TO_DATE('12-03-1990', '%d-%m-%Y'));
untuk referensi lengkapnya silakan kunjungi http://dev.mysql.com/doc/refman/5.5/en/date-and-time-functions.html#function_date-format
Makasih gan :D
BalasHapusmas,, kalo tanggal n bulanx diganti ndonesia gimana caranya/.. ??
BalasHapusex: januari , februari, maret april mei, dst
mohon bantuanx...
coba gini mas:
Hapus$('#datepicker-example11').Zebra_DatePicker({
months : [‘Januari’, ‘Februari’, ‘Maret’, ‘April’, ‘Mei’, ‘Juni’, ‘Juli’, ‘Agustus’, ‘September’, ‘Oktober’, ‘November’, ‘Desember’]
});
Kalangkong Brow...
BalasHapuskeren....... mau Coba ah
BalasHapusmas, mau tanyak nih..
BalasHapuskalau inputan tanggal nya harus yang hari minggu gimana ya ?
$('#tanggal').Zebra_DatePicker({
Hapusdisabled_dates: ['* * * 1-6']
});
Maaf mas mau tanya, kalo saya pakainya di dalam modal bootstrap gimana ya mas? udah saya coba, tapi kalendernya munculnya di luar modal bootstrapnya. ketika di klik di kalender, jadinya malah keluar dari modal. terimakasih sebelumnya
BalasHapuswah belum pernah saya coba di bootstrap. mungkin bisa pake bootstrap datepicker https://bootstrap-datepicker.readthedocs.org/en/latest/
HapusMas, Kalau merubah urutan pilihan bagaimana?,
BalasHapusinikan yang dipilih duluan tahun, bulan baru tanggal. bagaimana caranya agar urutan pilihan menjadi tanggal, bulan baru tahun. (klik tanggal, bulan baru tahun)
defaultnya memang seperti itu mas, coba klik saja bulan dibagian atas kalendernya
Hapusmas, gimana caranya inputan tanggal hanya dapat dilakukan tanggal sekarang dan tanggal masa lalu bukan tanggal masa depan?....
BalasHapusmohon bantunaya
gini mas agan :
Hapus$('#tanggal').Zebra_DatePicker({
direction: false
});
, sudah dijelaskan di nomor 2 di atas
mas mau tanya dong saya sudah download zebra_datepicker nya nah saya mau coba yang bulan dan tahun seperti yang mas jelaskan pada artikel poin 11, saya sudah ganti script yang di poin 11, tapi ko gak berfungsi yah css nya.
BalasHapustolong bantuannya
masak sih? ada yang salah kali.. coba lagi, selamat berjuang :D
HapusMas.. gimana caranya agar formnya otomatis terisi dengan tanggal hari ini..? terus gimana agar bisa tersimpan di database dengan format lengkap (Hari, Tanggal-Bulan-Tahun). btw saya tidak menggunakan database yang mysql tapi langsung tersimpan di file php.
BalasHapusset aja langsung atribut VALUE di inputnya mbak, misalnya :
Hapus<input type="text" name="tanggal" id="tanggal" value="<?php echo date('l, d-m-Y'); ?>" /> pada
mas mau tanya biar datepickernya tampil dibawah input text gimana ?
BalasHapuscukup tambahkan div dengan id mas, contoh :
HapusTanggal Lahir :
<input type="text" name="tanggal_lahir" id="tanggal_lahir" />
<br />
<div id="datepicker_container">
</div>
lalu javascriptnya :
<script type="text/javascript">
$(document).ready(function(){
$('#tanggal_lahir').Zebra_DatePicker({
format: 'd-F-Y',
always_visible : $("#datepicker_container")
});
});
</script>
style datepicker waktu nongol setnya dimana ya bro?
BalasHapusgan, biar format waktunya tidak masuk kedalam database gimana ya? saya ingin yang masuk database hanya format tanggalnya saja
BalasHapusMakasih tutorialnya Gan,
BalasHapuskalo pengen tampilin tglnya hanya dalam satu bulan yang berjalan gmn ya Gan?
caranya setting parameter direction ke awal bulan dan akhir bulan gan, contohnya gini :
Hapusvar date = new Date();
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
var awalBulan = firstDay.getFullYear() + '-' + ("0" + (firstDay.getMonth() + 1)).slice(-2) + '-' + ("0" + firstDay.getDate()).slice(-2);
var akhirBulan = lastDay.getFullYear() + '-' + ("0" + (lastDay.getMonth() + 1)).slice(-2) + '-' + lastDay.getDate();
$('#tanggal').Zebra_DatePicker({
direction:[awalBulan, akhirBulan]
});
mas jika yang ingin dirubah-rubah cm tanggalnya aja sedangkan bulan dan tahun gbs dirubah bs apa g ya ..trs klo bisa mohon tutornya ..tx
BalasHapusbisa gan, caranya setting direction-nya ke awal bulan dan akhir bulan ini. contohnya :
Hapusvar date = new Date();
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
var awalBulan = firstDay.getFullYear() + '-' + ("0" + (firstDay.getMonth() + 1)).slice(-2) + '-' + ("0" + firstDay.getDate()).slice(-2);
var akhirBulan = lastDay.getFullYear() + '-' + ("0" + (lastDay.getMonth() + 1)).slice(-2) + '-' + lastDay.getDate();
$('#tanggal').Zebra_DatePicker({
direction:[awalBulan, akhirBulan]
});
contoh versi pastebin :
Hapushttp://pastebin.com/hGpXekkQ
Mas mau nanya, udah saya ikuti tutorial diatas, tapi tidak muncul tanggalnya hanya teks input aja yang ada, mohon bantuannya...
BalasHapusikuti tutorial diatas, pelan2 aja bacanya trus praktekkan. bisa kok.
Hapusmantap bang, terima kasih ilmu nya.
BalasHapuskalau berkenan kunjungan balik ke blog newbie
http://ody-stmik.blogspot.co.id/
mas sy udh coba dan berhasil, tapi saat saya masukin ke Codeigniter ko ga muncul ya mas, tolong pencerahannya
BalasHapusmungkin library2-nya tidak ter-load mas bro. coba lihat di-inspect lalu klik console ada error apa?
HapusMas aku udah coba dan berhasil
BalasHapustapi kenapa kalo digunakan lebih dari satu dalam satu form kok yang muncul hanya satu ya
Mohon pencerahannya
Terima kasih
selector id inputnya harus dibedakan mungkin mas bro, misalnya
Hapus<input type="text" id="tanggalsatu" name="tanggalsatu" />
<input type="text" id="tanggaldua" name="tanggaldua" />
lalu panggil di js-nya:
<script type="text/javascript">
$(document).ready(function(){
$("#tanggalsatu").Zebra_DatePicker();
$("#tanggaldua").Zebra_DatePicker();
});
</script>
selector id input ya bisa di bikin looping ga gan?
Hapusalo bisa contoh ya gimana gan?
thanks,
Makasih gan ! It works :D
BalasHapusmas Tanggal di date picker yang kedua otomatis terisi 3 hari setelah picker yang pertama bagai mana membuatnya mas..?
BalasHapusgan itu semua dalam satu file atau beberapa ??
BalasHapusane coba gagal terus..
mohon balasannya gan.
ada beberapa file js sama css gan, udah ada petunjuknya sama contohnya di download. ikuti aja gan.
Hapusthanks sangat membantu dan bermanfaat sekali
BalasHapusgan butuh pencerahan kenapa gak bisa masuk database
BalasHapusnih proses insertnya
mysql_query("insert into ajukansurat values('','$no','$judul','$tanggal','$bulan','$tahun','$jenissurat','$lampiran','$deskripsi')");
muncul error apa?
Hapusgan, ane kok gak bisa muncul terus ya ? cuma text box kosong, ane coba input zebra datepickernya ke php yang udah jadi mau ditambahin form tanggal aja, tapi gak muncul terus, mohon pencerahannya dong :(
BalasHapustanggal yang dapat dipilih adalah tanggal sekarang dan kebelakang gimana gan?
BalasHapuske belakang itu yang akan datang apa yang sudah lewat? mainnya tinggal atur direction-nya true atau false.
Hapusyg sudah lewat contohnya :
$("#datepicker-example1").Zebra_DatePicker({
direction:false
});
oke mas terimakasih
BalasHapusmalam mas, saya sedang buat form dimana pada form tersebut terdapat 2 textbox datepicker yaitu tanggal_terbit dan tanggal_kadaluarsa (bersebelahan).
BalasHapuspada textbox tanggal_terbit datepicker bisa muncul tapi kenapa pada textbox tanggal_kadaluarsa datepickernya ga muncul yah.
mohon pencerahannya. salam.
maaf gan mau bertanya,untuk yang no 7 nama pada example end pair dan example end kedua harus sama apa gimana?, dan juga untuk isi nya apa ada yang di bedakan dengan isi yang pertama ?
BalasHapusmohon bantuan nya , terima kasih
gan mau tanya. naro scriptnya ditu dibagian index (file demo yang di download) atau mana ya. jadi gantiin file utama yaitu:
BalasHapus$(document).ready(function(){
$('#tanggal').Zebra_DatePicker({
format: 'd-F-Y',
months : ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'],
days : ['Minggu','Senin','Selasa','Rabu','Kamis','Jum\'at','Sabtu'],
days_abbr : ['Minggu','Senin','Selasa','Rabu','Kamis','Jum\'at','Sabtu']
});
});
diganti dengan sesuai point yang kita inginkan atau bagaimana? soalnya sudah di coba tapi munculnya malah gak ada logo kalendernya
mas tanya,klo tanggal kemaren agar bisa ditampilkan juga.gmn ya caranya?
BalasHapusmohon bimbingan nya mas.udah mumet saya ini.hehe
Assalamualaikum, maaf saya mau nanya. Knpa ya wktu di form input kalender ny kan tampil, tpi kok pas disimpan tanggal gak tersimpan di database, trus gak bisa tampil juga di tabel yg ad di form. Mohon bantuannya. Terima kasih
BalasHapusklo mau tampilin yyyy/mm/dd (kalender hari ini dan waktu hari ini sesuai di komputer yang di gunakan)waktu otomatis gimana yah gan??
BalasHapusTerimakasih buat share ilmu nya gan,
BalasHapusGan, saya mau tanya
kenapa pas saya sudah input dan simpan ke dalam html
tapi tanggal yang sudah saya input malah tidak tersimpan/tampil
ID nama alamat beli tanggal tanggal2 ket aksi aksi 2
5 saccx cdrht [object Object] [object Object] sfgnkukuku Hapus Edit
saya create html biasa tanpa ada database php