Membuat Form Input Tanggal Kalender (Date Picker) Dengan Zebra DatePicker

Mumpung ada sedikit waktu luang kali ini saya mau sharing tentang datepicker menggunakan Zebra DatePicker, sebuah plugin JQuery untuk menginput tanggal ke form HTML dengan berbagai fitur canggih.

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 ^_^


BAGIKAN KE:

51 komentar:

  1. saya uda menggunakan zebra datepicker , tapi kendalanya , format yang ke input ke database , format Y-m-d.
    dan pada tanggal sekarag input.
    gimana cara biar bisa pake format indonesia, dan input ke database nya.
    ane pake CI.

    ReplyDelete
    Replies
    1. cara inputnya bisa langsung pake fungsi STR_TO_DATE di Query-nya gan, misalnya gini:

      INSERT 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

      Delete
  2. mas,, kalo tanggal n bulanx diganti ndonesia gimana caranya/.. ??
    ex: januari , februari, maret april mei, dst


    mohon bantuanx...

    ReplyDelete
    Replies
    1. coba gini mas:

      $('#datepicker-example11').Zebra_DatePicker({
      months : [‘Januari’, ‘Februari’, ‘Maret’, ‘April’, ‘Mei’, ‘Juni’, ‘Juli’, ‘Agustus’, ‘September’, ‘Oktober’, ‘November’, ‘Desember’]
      });

      Delete
  3. mas, mau tanyak nih..
    kalau inputan tanggal nya harus yang hari minggu gimana ya ?

    ReplyDelete
    Replies
    1. $('#tanggal').Zebra_DatePicker({
      disabled_dates: ['* * * 1-6']
      });

      Delete
  4. 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

    ReplyDelete
    Replies
    1. wah belum pernah saya coba di bootstrap. mungkin bisa pake bootstrap datepicker https://bootstrap-datepicker.readthedocs.org/en/latest/

      Delete
  5. Mas, Kalau merubah urutan pilihan bagaimana?,
    inikan yang dipilih duluan tahun, bulan baru tanggal. bagaimana caranya agar urutan pilihan menjadi tanggal, bulan baru tahun. (klik tanggal, bulan baru tahun)

    ReplyDelete
    Replies
    1. defaultnya memang seperti itu mas, coba klik saja bulan dibagian atas kalendernya

      Delete
  6. mas, gimana caranya inputan tanggal hanya dapat dilakukan tanggal sekarang dan tanggal masa lalu bukan tanggal masa depan?....

    mohon bantunaya

    ReplyDelete
    Replies
    1. gini mas agan :

      $('#tanggal').Zebra_DatePicker({
      direction: false
      });

      , sudah dijelaskan di nomor 2 di atas

      Delete
  7. 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.
    tolong bantuannya

    ReplyDelete
    Replies
    1. masak sih? ada yang salah kali.. coba lagi, selamat berjuang :D

      Delete
  8. Mas.. 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.

    ReplyDelete
    Replies
    1. set aja langsung atribut VALUE di inputnya mbak, misalnya :

      <input type="text" name="tanggal" id="tanggal" value="<?php echo date('l, d-m-Y'); ?>" /> pada

      Delete
  9. mas mau tanya biar datepickernya tampil dibawah input text gimana ?

    ReplyDelete
    Replies
    1. cukup tambahkan div dengan id mas, contoh :

      Tanggal 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>

      Delete
  10. style datepicker waktu nongol setnya dimana ya bro?

    ReplyDelete
  11. gan, biar format waktunya tidak masuk kedalam database gimana ya? saya ingin yang masuk database hanya format tanggalnya saja

    ReplyDelete
  12. Makasih tutorialnya Gan,
    kalo pengen tampilin tglnya hanya dalam satu bulan yang berjalan gmn ya Gan?

    ReplyDelete
    Replies
    1. caranya setting parameter direction ke awal bulan dan akhir bulan gan, contohnya gini :

      var 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]
      });

      Delete
  13. 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

    ReplyDelete
    Replies
    1. bisa gan, caranya setting direction-nya ke awal bulan dan akhir bulan ini. contohnya :

      var 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]
      });

      Delete
    2. contoh versi pastebin :
      http://pastebin.com/hGpXekkQ

      Delete
  14. Mas mau nanya, udah saya ikuti tutorial diatas, tapi tidak muncul tanggalnya hanya teks input aja yang ada, mohon bantuannya...

    ReplyDelete
    Replies
    1. ikuti tutorial diatas, pelan2 aja bacanya trus praktekkan. bisa kok.

      Delete
  15. mantap bang, terima kasih ilmu nya.
    kalau berkenan kunjungan balik ke blog newbie

    http://ody-stmik.blogspot.co.id/

    ReplyDelete
  16. mas sy udh coba dan berhasil, tapi saat saya masukin ke Codeigniter ko ga muncul ya mas, tolong pencerahannya

    ReplyDelete
    Replies
    1. mungkin library2-nya tidak ter-load mas bro. coba lihat di-inspect lalu klik console ada error apa?

      Delete
  17. Mas aku udah coba dan berhasil
    tapi kenapa kalo digunakan lebih dari satu dalam satu form kok yang muncul hanya satu ya
    Mohon pencerahannya
    Terima kasih

    ReplyDelete
    Replies
    1. selector id inputnya harus dibedakan mungkin mas bro, misalnya

      <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>

      Delete
    2. selector id input ya bisa di bikin looping ga gan?
      alo bisa contoh ya gimana gan?
      thanks,

      Delete
  18. mas Tanggal di date picker yang kedua otomatis terisi 3 hari setelah picker yang pertama bagai mana membuatnya mas..?

    ReplyDelete
  19. gan itu semua dalam satu file atau beberapa ??
    ane coba gagal terus..
    mohon balasannya gan.

    ReplyDelete
    Replies
    1. ada beberapa file js sama css gan, udah ada petunjuknya sama contohnya di download. ikuti aja gan.

      Delete
  20. thanks sangat membantu dan bermanfaat sekali

    ReplyDelete
  21. gan butuh pencerahan kenapa gak bisa masuk database
    nih proses insertnya
    mysql_query("insert into ajukansurat values('','$no','$judul','$tanggal','$bulan','$tahun','$jenissurat','$lampiran','$deskripsi')");

    ReplyDelete
  22. gan, 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 :(

    ReplyDelete
  23. tanggal yang dapat dipilih adalah tanggal sekarang dan kebelakang gimana gan?

    ReplyDelete
    Replies
    1. ke belakang itu yang akan datang apa yang sudah lewat? mainnya tinggal atur direction-nya true atau false.
      yg sudah lewat contohnya :

      $("#datepicker-example1").Zebra_DatePicker({
      direction:false
      });

      Delete
  24. malam mas, saya sedang buat form dimana pada form tersebut terdapat 2 textbox datepicker yaitu tanggal_terbit dan tanggal_kadaluarsa (bersebelahan).
    pada textbox tanggal_terbit datepicker bisa muncul tapi kenapa pada textbox tanggal_kadaluarsa datepickernya ga muncul yah.
    mohon pencerahannya. salam.

    ReplyDelete
  25. 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 ?
    mohon bantuan nya , terima kasih

    ReplyDelete
  26. gan mau tanya. naro scriptnya ditu dibagian index (file demo yang di download) atau mana ya. jadi gantiin file utama yaitu:


    $(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

    ReplyDelete
  27. mas tanya,klo tanggal kemaren agar bisa ditampilkan juga.gmn ya caranya?
    mohon bimbingan nya mas.udah mumet saya ini.hehe

    ReplyDelete