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:

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

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

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


    mohon bantuanx...

    BalasHapus
    Balasan
    1. coba gini mas:

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

      Hapus
  3. Kalangkong Brow...

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

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

      Hapus
  5. 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

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

      Hapus
  6. 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)

    BalasHapus
    Balasan
    1. defaultnya memang seperti itu mas, coba klik saja bulan dibagian atas kalendernya

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

    mohon bantunaya

    BalasHapus
    Balasan
    1. gini mas agan :

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

      , sudah dijelaskan di nomor 2 di atas

      Hapus
  8. 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

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

      Hapus
  9. 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.

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

      Hapus
  10. mas mau tanya biar datepickernya tampil dibawah input text gimana ?

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

      Hapus
  11. style datepicker waktu nongol setnya dimana ya bro?

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

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

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

      Hapus
  14. 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

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

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

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

    BalasHapus
    Balasan
    1. ikuti tutorial diatas, pelan2 aja bacanya trus praktekkan. bisa kok.

      Hapus
  16. mantap bang, terima kasih ilmu nya.
    kalau berkenan kunjungan balik ke blog newbie

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

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

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

      Hapus
  18. 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

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

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

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

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

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

      Hapus
  21. thanks sangat membantu dan bermanfaat sekali

    BalasHapus