Zebra Datepicker JQuery

Zebra Datepicker adalah plugin ringan dengan fitur yang lengkap yang dapat kamu pakai untuk membuat tampilan input tanggal, bulan menjadi mudah.  jQuery plugin ini secara otomatis akan menambahkan ikon kalender untuk input yang ditunjukkan, ketika diklik, akan membuka datepicker. Pengguna dapat dengan mudah melompat antara bulan dan tahun karena antarmuka intuitif datepicker ini. Tanggal yang dipilih akan dimasukkan dalam kolom input menggunakan format tanggal pilihan, dikonfigurasi dalam opsi datepicker.

Features:

  • Ukuran file yang kecilnya sekitar 23KB minified
  • Sangat praktis – tidak seperti datepicker lain, datepicker ini hanya satu file
  • Cross-browser – bekerja disemua browser
  •  Compatible dengan AMD dan CommonJS
  • Design warna yang menarik, and dapat dicostum dengan CSS file; ada dua tambahan theme
  • Menawarkan antarmuka yang intuitif yang mudah dan cepat navigasi melalui bulan dan tahun
  • Menawarkan mekanisme intuitif untuk menonaktifkan tanggal dan rentang tanggal menggunakan sintaks mirip dengan sintaks cron ini
  • Bekerja dengan secara otomatis melampirkan ikon kalender kecil untuk bidang masukan ditunjukkan yang menampilkan datepicker terpasang saat diklik.

Download | Demo

 Penggunaan

Load Javascript : 
<script type="text/javascript" src="path/to/zebra_datepicker.js"></script>

Load CSS : 
<link rel="stylesheet" href="path/to/default.css" type="text/css">
Load Script : 
//instan mode
$(document).ready(function() {
    $('#date').Zebra_DatePicker();
 });

//advance mode
$(document).ready(function() {
    $('#date').Zebra_DatePicker({
         direction: 1,    // boolean true would've made the date picker future only
                          // but starting from today, rather than tomorrow
         format: 'M d, Y',
         pair: $('#datepicker-example7-end'),
         onChange: function(view, elements) {
          }
     });
 });
Mengambil data untuk variable : 
var $zdp = $('#element').data('Zebra_DatePicker');
Parameter Deskripsi
always_visible (boolean) Tanggal harus selalu terlihat?
Pengaturan properti ini untuk elemen jQuery akan memunculkan Datepicker terus menerus, elemen yang dituju bertindak sebagai tempat Datepicker muncul
container (element) Secara default, Datepicker dipasang ke dalam ; menggunakan properti ini untuk memberitahu library untuk menampilkan ke elemen kustom - berguna ketika Anda ingin Datepicker pada posisi tertentu.
direction (mixed) - Item pertama adalah boolean TRUE (kalender mulai hari ini), integer> 0 (kalender dimulai n hari setelah hari ini), atau tanggal yang valid diberikan dalam format yang ditetapkan oleh “format” atribut (kalender dimulai pada tanggal yang ditentukan), dan item kedua adalah boolean FALSE (kalender tidak memiliki tanggal berakhir), integer> 0 (kalender berakhir n hari setelah tanggal awal), atau tanggal yang valid diberikan dalam format didefinisikan oleh “format” atribut dan yang terjadi setelah mulai tanggal (kalender berakhir pada tanggal yang ditentukan)

- Item pertama adalah FALSE boolean (kalender berakhir hari ini), integer <0 (kalender berakhir n hari sebelum hari ini), atau tanggal yang valid diberikan dalam format yang ditetapkan oleh "format" atribut (kalender berakhir pada tanggal yang ditentukan), dan item kedua adalah integer> 0 (kalender berakhir n hari sebelum tanggal berakhir), atau tanggal yang valid diberikan dalam format yang ditetapkan oleh “format” atribut dan yang terjadi sebelum tanggal mulai (kalender dimulai pada tanggal yang ditentukan)

[1, 7] - Datepicker besok dan berakhir tujuh hari setelah itu

[true, 7] - kalender dimulai hari ini dan berakhir tujuh hari setelah itu

[ ‘2013-01-01’, false] - kalender dimulai pada 1 Januari 2013 dan tidak memiliki tanggal berakhir ( “format” adalah YYYY-MM-DD)

[false, ‘2012-01-01’] - kalender berakhir hari ini dan mulai pada 1 Januari 2012 ( “format” adalah YYYY-MM-DD)

Perhatikan bahwa “disabled_dates” properti masih akan berlaku!

Default adalah 0 (tidak ada pembatasan).
format (string) Karakter yang dapat dipakai sebagai berikut : d, D, j, l, N, w, S, F, m, M, n, Y, sintaks menggunakan dari (PHP fungsi tanggal).

Perhatikan bahwa ketika menetapkan format tanggal tanpa hari ( 'd', 'j'), pengguna akan dapat memilih hanya tahun dan bulan, dan ketika menetapkan format tanpa bulan dan hari ( 'F', 'm', ' M', 'n', 't', 'd', 'j'), pengguna akan dapat memilih hanya tahun.

Juga mencatat bahwa nilai dari “view” properti (lihat di bawah) dapat diganti jika terjadi: nilai “hari” untuk “view” properti tidak masuk akal jika format tanggal tidak memungkinkan pemilihan hari.

Default adalah ‘Y-m-d’.
disabled_dates (mixed) Susunan tanggal cacat dalam format berikut: ‘hari bulan tahun pada hari kerja’ di mana “hari kerja” adalah opsional dan dapat 0-6 (Sabtu sampai Minggu); sintaks mirip dengan sintaks ini: nilai-nilai dipisahkan oleh spasi dan mungkin berisi * (tanda bintang) - (dash) dan, (koma) pembatas:

[ ‘1 1 2012’] akan menonaktifkan 1 Januari 2012;

[ ‘* 1 2012’] akan menonaktifkan semua hari pada bulan Januari 2012;

[ ‘1-10 1 2012’] akan menonaktifkan 1 Januari hingga 10 tahun 2012;

[ ‘1,10 1 2012’] akan menonaktifkan 1 Januari dan 10 tahun 2012;

[ ‘1-10,20,22,24 1-3 *’] akan menonaktifkan 1 sampai 10, ditambah 22 dan 24 Januari sampai Maret untuk setiap tahun;

[ ‘* * * 0,6 '] akan menonaktifkan semua hari Sabtu dan Minggu;

['01 07 2012 ', '02 07 2012’ , ‘* 08 2012’] akan menonaktifkan 1 dan 2 Juli 2012, dan semua Agustus 2012

Default adalah FALSE, tidak ada tanggal dinonaktifkan.

MENONAKTIFKAN SEMUA TANGGAL DAN TIDAK menentukan SETIDAKNYA SATU ENABLED TANGGAL membuat SCRIPT menjadi INFINITE LOOP untuk mencari TANGGAL aktif saat menampilkan!