Zebra_Datepicker, a lightweight datepicker jQuery plugin

Get the latest updates on this jQuery plugin via RSS

A super-lightweight, highly configurable, cross-browser date picker jQuery plugin

Zebra_Datepicker is a small, compact and highly configurable datepicker jQuery plugin, meant to enrich forms by adding the datepicker functionality to them. This jQuery plugin will automatically add a calendar icon to the indicated input fields which, when clicked, will open the attached datepicker. Users can easily jump between months and years due to the datepicker’s intuitive interface. The selected date will be entered in the input field using the date format of choice, configurable in the datepicker’s options.

Features:

  • it is small – it weights around 21KB minified
  • it’s compact – unlike other datepickers, this datepicker is one-file only
  • it’s cross-browser – works in every major browser; works also in Internet Explorer 6 where it uses an iFrameShim to stay above select controls
  • has a default color scheme that blends-in well with almost any design, and it’s easily customizable through the well-organized CSS file; two additional themese are included, one of them being for use with Twitter Bootstrap
  • offers an intuitive interface fast and easy navigation through months and years
  • offers an intuitive mechanism for disabling dates and date ranges using a syntax similar to cron‘s syntax
  • supports defining of custom weekend days for countries that don’t have the weekend on Saturday and Sunday
  • supports most of date formats you can think of, borrowing the syntax of PHP’s date function
  • supports all sorts of combinations for starting and ending dates
  • date pickers can be “paired” – where one or more date pickers will use the value of another date picker as starting date
  • supports internationalization
  • works by automatically attaching a small calendar icon to the indicated input fields which displays the attached datepicker when clicked.

Thanks to Aeron Glemann for building a datepicker for MooTools where he came up with the idea of disabling dates using a syntax similar to cron’s!

Top

Requirements

Zebra_Datepicker has no dependencies other than jQuery 1.5.2+ but requires that the page you are using the plugin on to have a strict doctype like

<!doctype html>

Top

How to use

First, load the latest version of jQuery either from a local source or from a CDN.

Load the Zebra_Datepicker jQuery plugin

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

Load one of the available themes (default, metallic, bootstrap)

<link rel="stylesheet" href="path/to/default.css" type="text/css">

Now, within the DOM-ready event, attach the Zebra_Datepicker plugin to a <input type=”text”> control

$(document).ready(function() {

    // assuming the controls you want to attach the plugin to 
    // have the "datepicker" class set
    $('input.datepicker').Zebra_DatePicker();

 });

This will attach a calendar icon to the specified element(s). Clicking the icon, will make the date picker visible.

To get a reference to the instance of Zebra_DatePicker attached to an element do:

var $zdp = $('#element').data('Zebra_DatePicker');

Demos

1. A date picker with defaults settings.

$('#datepicker-example1').Zebra_DatePicker();

 

2. Dates can be selected only in the future, starting one day in the future.

$('#datepicker-example2').Zebra_DatePicker({
  direction: 1    // boolean true would've made the date picker future only
                  // but starting from today, rather than tomorrow
});

 

3. Dates can be selected only in the future, starting today. Also, Saturday and Sundays are always disabled.

$('#datepicker-example3').Zebra_DatePicker({
  direction: true,
  disabled_dates: ['* * * 0,6']   // all days, all monts, all years as long
                                  // as the weekday is 0 or 6 (Sunday or Saturday)
});

 

4. The selectable dates are in the interval starting tomorrow and ending 10 days from tomorrow.

$('#datepicker-example4').Zebra_DatePicker({
  direction: [1, 10]
});

 

5. Dates can be selected between 2 specific dates

$('#datepicker-example5').Zebra_DatePicker({
  // remember that the way you write down dates
  // depends on the value of the "format" property!
  direction: ['2012-08-01', '2012-08-12']
});

 

6. Dates can be selected in the future, starting with a specific date

$('#datepicker-example6').Zebra_DatePicker({
  // remember that the way you write down dates
  // depends on the value of the "format" property!
  direction: ['2012-08-01', false]
});

 

7. The second date picker’s starting date is the value of the first date picker + 1

$('#datepicker-example7-start').Zebra_DatePicker({
  direction: true,
  pair: $('#datepicker-example7-end')
});

$('#datepicker-example7-end').Zebra_DatePicker({
  direction: 1
});

 

8. Set the format of the returned date:

$('#datepicker-example8').Zebra_DatePicker({
  format: 'M d, Y'
});

 

9. Show week number

$('#datepicker-example9').Zebra_DatePicker({
  show_week_number: 'Wk'
});

 

10. Start with the “years” view – recommended for when users need to select their birth date. Remember that you can always switch between views by clicking in the header of the date picker between the “previous” and “next” buttons!

$('#datepicker-example10').Zebra_DatePicker({
  view: 'years'
});

 

11. Stop after month selection

$('#datepicker-example11').Zebra_DatePicker({
  format: 'm Y'   //  note that becase there's no day in the format
                  //  users will not be able to select a day!
});

 

12. Handle the “onChange” event. If a callback function is attached to the “onChange” event, it will be called whenever the user changes the view (days/months/years), as well as when the user navigates by clicking on the “next”/”previous” icons in any of the views. The callback function called by this event takes two arguments – the view (days/months/years) and the “active” elements (not disabled) in that view, as jQuery elements allowing for easy customization and interaction with particular cells in the date picker’s view:

$('#datepicker-example12').Zebra_DatePicker({

  // execute a function whenever the user changes the view (days/months/years),
  // as well as when the user navigates by clicking on the "next"/"previous"
  // icons in any of the views
  onChange: function(view, elements) {

    // on the "days" view...
    if (view == 'days') {

      // iterate through the active elements in the view
      elements.each(function() {

        // to simplify searching for particular dates, each element gets a
        // "date" data attribute which is the form of:
        // - YYYY-MM-DD for elements in the "days" view
        // - YYYY-MM for elements in the "months" view
        // - YYYY for elements in the "years" view

        // so, because we're on a "days" view,
        // let's find the 24th day using a regular expression
        // (notice that this will apply to every 24th day
        // of every month of every year)
        if ($(this).data('date').match(/\-24$/))

          // and highlight it!
          $(this).css({
            backgroundColor:    '#C40000',
            color:              '#FFF'
          });

      });

    }

  }

});

 

13. Calendar is always visible. Set the “always_visible” property to point to a jQuery
element which to contain the date picker

$('#datepicker-example13').Zebra_DatePicker({
  always_visible: $('#container')
});

 

14. Using data attributes

Any property of the date picker can also be set via data-attributes. All you have to do is take any property described in the “Configuration” section and prefix it with “data-zdp_”. One important thing to remember is that if the value of the property is an array you’ll have to use double quotes inside the square brackets and therefore single quotes around the attribute – see the example below:

<input type="text" id="datepicker-example14" 
data-zdp_direction="1" data-zdp_disabled_dates='["* * * 0,6"]'>
$('#datepicker-example14').Zebra_DatePicker();

Top

Configuration

All parameters are optional.

Note that any of the properties below may also be set via HTML5 data attributes. To do this you have prefix the name of the property you want to set with “data-zdp_”. One important thing to remember is that if the value of the property is an array you’ll have to use double quotes inside the square brackets and therefore single quotes around the attribute. See example 14 from above.

always_visible boolean

Should the date picker be always visible? 

Setting this property to a jQuery element will result in the date picker being always visible, the indicated element acting as the date picker’s container;

days array

Days of the week. Sunday to Saturday.

Default is
[‘Sunday’, ‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’, ‘Saturday’]

days_abbr mixed

Abbreviated names of days.

By default, the abbreviated name of a day consists of the first 2 letters from the day’s full name. While this is common for most languages, there are also exceptions for languages like Thai, Loa, Myanmar, etc. where this is not correct. For these cases, specify an array with the abbreviations to be used for the 7 days of the week; leave it FALSE to use the first 2 letters of a day’s name as the abbreviation.

Default is FALSE

default_position string

The position of the date picker relative to the element it is attached to.

Note that, regardless of this setting, the date picker’s position will be automatically adjusted to fit in the view port, if needed.
Possible values are “above” and “below”.
Default is “above”

direction mixed

Direction of the calendar.

A positive or negative integer: n (a positive integer) creates a future-only calendar beginning at n days after today; -n (a negative integer) creates a past-only calendar ending n days before today; if n is 0, the calendar has no restrictions. use boolean true for a future-only calendar starting with today and use boolean false for a past-only calendar ending today.

You may also set this property to an array with two elements in the following combinations:

– first item is boolean TRUE (calendar starts today), an integer > 0 (calendar starts n days after today), or a valid date given in the format defined by the “format” attribute (calendar starts at the specified date), and the second item is boolean FALSE (the calendar has no ending date), an integer > 0 (calendar ends n days after the starting date), or a valid date given in the format defined by the “format” attribute and which occurs after the starting date (calendar ends at the specified date)

– first item is boolean FALSE (calendar ends today), an integer < 0 (calendar ends n days before today), or a valid date given in the format defined by the "format" attribute (calendar ends at the specified date), and the second item is an integer > 0 (calendar ends n days before the ending date), or a valid date given in the format defined by the “format” attribute and which occurs before the starting date (calendar starts at the specified date)

[1, 7] – calendar starts tomorrow and ends seven days after that

[true, 7] – calendar starts today and ends seven days after that

[‘2013-01-01′, false] – calendar starts on January 1st 2013 and has no ending date (“format” is YYYY-MM-DD)

[false, ‘2012-01-01′] – calendar ends today and starts on January 1st 2012 (“format” is YYYY-MM-DD)

Note that “disabled_dates” property will still apply!

Default is 0 (no restrictions).

disabled_dates mixed

An array of disabled dates in the following format: ‘day month year weekday’ where “weekday” is optional and can be 0-6 (Saturday to Sunday); The syntax is similar to cron’s syntax: the values are separated by spaces and may contain * (asterisk) – (dash) and , (comma) delimiters: 

[‘1 1 2012′] would disable January 1, 2012;

[‘* 1 2012′] would disable all days in January 2012;

[‘1-10 1 2012′] would disable January 1 through 10 in 2012;

[‘1,10 1 2012′] would disable January 1 and 10 in 2012;

[‘1-10,20,22,24 1-3 *’] would disable 1 through 10, plus the 22nd and 24th of January through March for every year;

[‘* * * 0,6′] would disable all Saturdays and Sundays;

[’01 07 2012′, ’02 07 2012′, ‘* 08 2012′] would disable 1st and 2nd of July 2012, and all of August of 2012

Default is FALSE, no disabled dates.

enabled_dates mixed

An array of enabled dates in the same format as required for “disabled_dates” property. To be used together with the “disabled_dates” property by first setting the “disabled_dates” property to something like “[* * * *]” (which will disable everything) and the setting the “enabled_dates” property to, say, “[* * * 0,6]” to enable just weekends.

Default is FALSE.

first_day_of_week integer

Week’s starting day. 

Valid values are 0 to 6, Sunday to Saturday.

Default is 1, Monday.

format string

Format of the returned date. 

Accepts the following characters for date formatting: d, D, j, l, N, w, S, F, m, M, n, Y, y borrowing syntax from (PHP’s date function).

Note that when setting a date format without days (‘d’, ‘j’), the users will be able to select only years and months, and when setting a format without months and days (‘F’, ‘m’, ‘M’, ‘n’, ‘t’, ‘d’, ‘j’), the users will be able to select only years.

Also note that the value of the “view” property (see below) may be overridden if it is the case: a value of “days” for the “view” property makes no sense if the date format doesn’t allow the selection of days.

Default is ‘Y-m-d’.

header_captions object

Captions in the datepicker’s header, for the 3 possible views: days, months, years 

For each of the 3 views the following special characters may be used borrowing from PHP’s “date” function’s syntax: m, n, F, M, y and Y; any of these will be replaced at runtime with the appropriate date fragment, depending on the currently viewed date. two more special characters are also available Y1 and Y2 (upper case representing years with 4 digits, lowercase representing years with 2 digits) which represent “currently selected year – 7″ and “currently selected year + 4″ and which only make sense used in the “years” view.

Even though any of these special characters may be used in any of the 3 views, you should use m, n, F, M for the “days” view and y, Y, Y1, Y2, y1, y2 for the “months” and “years” view or you may get unexpected results!

Text and HTML can also be used, and will be rendered as it is, as in the example below (the library is smart enough to not replace special characters when used in words or HTML tags):

header_captions: {
    'days':     'Departure:<br>F, Y',
    'months':   'Departure:<br>Y',
    'years':    'Departure:<br>Y1 - Y2'
}

Default is

header_captions: {
    'days':     'F, Y',
    'months':   'Y',
    'years':    'Y1 - Y2'
}
header_navigation array

HTML to be used for the previous month/next month buttons 

default is [‘&#171;’,’&#187;’]

inside boolean

Should the icon for opening the datepicker be inside the element? 

If set to FALSE, the icon will be placed to the right of the parent element, while if set to TRUE it will be placed to the right of the parent element, but *inside* the element itself

Default is TRUE.

lang_clear_date string

the caption for the “Clear” button. 

months array

Months names. 

Default is

[‘January’, ‘February’, ‘March’, ‘April’, ‘May’, ‘June’, ‘July’, ‘August’, ‘September’, ‘October’, ‘November’, ‘December’],

months_abbr mixed

Abbreviated names of months.

By default, the abbreviated name of a month consists of the first 3 letters from the month’s full name. While this is common for most languages, there are also exceptions for languages like Thai, Loa, Myanmar, etc. where this is not correct. For these cases, specify an array with the abbreviations to be used for the months of the year; leave it FALSE to use the first 3 letters of a month’s name as the abbreviation.

Default is FALSE

offset array

The offset, in pixels (x, y), to shift the date picker’s position relative to the top-right of the icon that toggles the date picker or, if the icon is disabled, relative to the top-right corner of the element
the plugin is attached to. 

Note that this only applies if the position of element relative to the browser’s viewport doesn’t require the date picker to be placed automatically so that it is visible!

Default is [5, -5].

pair object

If set as one or more jQuery elements with Zebra_Datepicker attached, those particular date pickers will use the current date picker’s value as starting date 

Note that the rules set in the “direction” property will still apply, only that the reference date will not be the current system date but the value selected in the current date picker.

Default is FALSE (not paired with another date picker)

readonly_element boolean

Should the element the calendar is attached to, be read-only? 

If set to TRUE, a date can be set only through the date picker and cannot be entered manually.

Default is TRUE.

select_other_months boolean

Should days from previous and/or next month be selectable when visible? 

Note that if the value of this property is set to TRUE, the value of “show_other_months” will be considered TRUE regardless of the actual value!

Default is FALSE.

show_clear_date mixed

Should the “Clear date” button be visible? 

Accepted values are:

– 0 (zero) – the button for clearing a previously selected date is shown only if a previously selected date already exists; this means that if the input the date picker is attached to is empty, and the user selects a date for the first time, this button will not be visible; once the user picked a date and opens the date picker again, this time the button will be visible.

– TRUE will make the button visible all the time

– FALSE will disable the button

Default is “0” (without quotes)

show_icon boolean

Should a calendar icon be added to the elements the plugin is attached to? 

When set to TRUE the plugin will attach a calendar icon to the elements the plugin is attached to.

Default is TRUE.

show_other_months boolean

should days from previous and/or next month be visible? 

Default is TRUE.

show_select_today mixed

Should the “Today” button be visible? 

Setting this property to anything but a boolean FALSE will enable the button and will use the property’s value as caption for the button; setting it to FALSE will disable the button

Default is “Today”.

show_week_number mixed

Should an extra column be shown, showing the number of each week? 

Anything other than FALSE will enable this feature, and use the given value as column title. For example, show_week_number: ‘Wk’ would enable this feature and have “Wk” as the column’s title.

Default is FALSE.

start_date string

A default date to start the date picker with 

Must be specified in the format defined by the “format” property, or it will be ignored!

Note that this value is used only if there is no value in the field the date picker is attached to!

Default is FALSE.

view string

How should the date picker start: 

Valid values are “days”, “months” and “years”.

Note that the date picker is always cycling days-months-years when clicking in the date picker’s header, and years-months-days when selecting dates (unless one or more of the views are missing due to the date’s format)

Also note that the value of the “view” property may be overridden if the date’s format requires so! (i.e. “days” for the “view” property makes no sense if the date format doesn’t allow the selection of days)

Default is “days”.

weekend_days array

Days of the week that are considered “weekend days” 

Valid values are 0 to 6, Sunday to Saturday.

Default is [0,6] (Saturday and Sunday).

zero_pad boolean

Should day numbers < 10 be padded with zero?

When set to TRUE, day numbers < 10 will be prefixed with 0.

Default is FALSE.

Events

onChange   Callback to be executed whenever the user changes the view (days/months/years), as well as when the user navigates by clicking on the “next”/”previous” icons in any of the views;

The callback function called by this event takes 3 arguments – the first argument represents the current view (can be “days”, “months” or “years”), the second argument represents an array containing the “active” elements (not disabled) from the view, as jQuery elements, allowing for easy customization and interaction with particular cells in the date picker’s view, while the third argument is a reference to the element the date picker is attached to, as a jQuery object.

For simplifying searching for particular dates, each element gets a “date” data attribute whose format depends on the value of the “view” argument:

– YYYY-MM-DD for elements in the “days” view
– YYYY-MM for elements in the “months” view
– YYYY for elements in the “years” view

Here’s how we could highlight the 24th day of each month of each year:

$('element').Zebra_DatePicker({

  // execute a function whenever the user changes the view 
  //(days/months/years), as well as when the user 
  // navigates by clicking on the "next"/"previous" icons 
  // in any of the views
  onChange: function(view, elements) {

    // on the "days" view...
    if (view == 'days') {

      // iterate through the active elements in the view
      elements.each(function() {

        // to simplify searching for particular dates, 
        // each element gets a "date" data attribute which 
        // is the form of: 
        // - YYYY-MM-DD for elements in the "days" view
        // - YYYY-MM for elements in the "months" view
        // - YYYY for elements in the "years" view

        // so, because we're on a "days" view,
        // let's find the 24th day using a regular 
        // expression (notice that this will apply to 
        // every 24th day of every month of every year)
        if ($(this).data('date').match(/\-24$/))

          // and highlight it!
          $(this).css({
            backgroundColor:    '#C40000',
            color:              '#FFF'
          });

        });

      }
    }
});
onClear   Callback function to be executed when the user clicks the “Clear” button.

The callback function takes a single argument:
– a reference to the element the date picker is attached to, as a jQuery object (deprecated – use the “this” keyword inside the callback function to refer to the element the date picker is attached to)

onOpen   Callback function to be executed when the date picker is shown

The callback function takes a single argument:
– a reference to the element the date picker is attached to, as a jQuery object (deprecated – use the “this” keyword inside the callback function to refer to the element the date picker is attached to)

onSelect   Callback function to be executed when a date is selected 
The callback function takes 4 parameters:
– the date in the format specified by the “format” attribute;
– the date in YYYY-MM-DD format
– the date as a JavaScript Date object
– a reference to the element the date picker is attached to, as a jQuery object

Methods

 

First, get a reference to the plugin like

var datepicker = $('element').data('Zebra_DatePicker');

Then call a method like

datepicker.update();
destroy  

Removes the plugin from an element

show  

Shows the date picker (unless the “always_visible” property is set to TRUE)

hide  

Hides the date picker (unless the “always_visible” property is set to TRUE)

update   Updates configuration options at run-time, and recalculates date picker’s icon position relative to the parent element. You should call this method whenever you show/hide/reposition the parent element, or alter the parent element’s dimensions;

The method accepts an optional argument – an object with configuration options to update:

var datepicker = $('element').data('Zebra_DatePicker');
datepicker.update({
  direction: 1
});

If you just want to update the icon’s position, simply call the method without any arguments:

var datepicker = $('element').data('Zebra_DatePicker');
datepicker.update();

Top 

Download

version 1.8.9
If you find this library to be useful to you, you can support the author by donating a small amount via PayPal:

Zebra_Datepicker is distributed under the LGPL.

In plain English, this means that you have the right to view and to modify the source code of this software, but if you modify and distribute it, you are required to license your copy under a LGPL-compatible license, and to make the entire source code of your derivation available to anybody you distribute the software to.

You also have the right to use this software together with software that has different licensing terms (including, but not limited to, commercial and closed-source software), and distribute the combined software, as long as state that your software contains portions licensed under the LGPL license, and provide information about where the LGPL licensed software can be downloaded.

If you distribute copies of this software you may not change the copyright or license of this software.


You may also like:

Top

Changelog

Click on a version to expand/collapse information.

version 1.8.9 (May 20, 2014)
  • added a new “header_captions” property, useful for customizing captions in the datepicker’s header, for the 3 possible views: days, months, years; thanks to Lodewyk and Ram for suggesting;
  • added a new “onOpen” event for executing callback functions when the date picker is shown;
  • users can now always use the next/previous buttons; thanks to Mozart for suggesting;
  • the “this” keyword in callbacks now correctly refer to the element the datepicker is attached to; thanks to syahman for reporting;
  • when having a date formats without year, the “years” view will not be visible anymore; thanks to MarkG;
  • the “onSelect” callback takes an extra argument – the ISO 8601 week number of the selected date;
  • fixed a bug when having non ASCII characters in month names; thanks to straightdog and Muhobrc for reporting, and to D-ominik for providing a fix;
  • fixed an issue with the “pair” attribute which, when given as a data attribute, would cause a JavaScript error; thanks to Domenico Giambra;
  • fixed a bug with the iFrame shim in IE6 which was not working as expected and “selects” elements where shown above the date picker; thanks to chenghong for reporting;
  • fixed a minor bug where the date picker would close for any key press not just for the ESC key; thanks to nacho for reporting;
  • fixed a minor bug where, when looking at the “months” view, the selected month would always be highlighted even if the user would switch years; thanks to Yoyee Zhu for reporting;
  • updated jQuery version in the examples folder to 1.11.1;
version 1.8.8 (December 09, 2013)
  • added integration with Grunt
  • the library is now available as a Bower package
version 1.8.7 (November 28, 2013)
  • added a new “header_navigation” property allowing custom HTML for the next/previous months buttons; thanks to norlin;
  • fixed a minor bug with paired date pickers;
  • minor performance tweaks;
version 1.8.6 (October 05, 2013)
  • added a new “strict” property which controls whether default values, in the input field the date picker is attached to, should be deleted if they are not valid according to “direction” and/or “disabled_dates”, and which is set to FALSE by default; previously the plugin was always removing such dates; thanks Morten;
  • fixed a bug width selectable dates of other months than the current one having an incorrect class attached to them; thanks to Khoomei for spotting this!
  • fixed a bug where when clearing dates of always-visible datepickers, the class indicating the “selected” state of cells was not being removed;
  • removed some old code that was used back when the calendar icon was absolutely positioned and because of which the calendar icon was invisible if the parent element was placed in a parent element with “display: none”; thanks to Michael Residori;
  • updated jQuery version used in examples to 1.10.2;
version 1.8.5 (September 21, 2013)
  • properties can now be set via data attributes; thanks to Yuriy Silvestrov who suggested this a long time ago;
  • fixed a bug where if the “show_icon” property was set to FALSE an open date picker would not close upon window resize and therefore it would remain in an incorrect position if the parent element was to change position during the process; thanks Marco;
version 1.8.4 (August 11, 2013)
  • added a “destroy” method; thanks TeckniX;
  • date picker now disappears upon window resize; previously it would remain in the same position upon window resize, even though the parent element could be repositioned in the process; thanks hanneslinder;
  • fixed a position bug that appearing in newer versions of Firefox where Firefox sets the “display” property of <input> elements to “inline” instead of “inline-block” as do the other browsers; thanks to discotizer;
version 1.8.3 (August 04, 2013)
  • fixed a bug where the plugin would freeze for certain combinations of disabled/enabled dates; thanks Yogesh;
  • fixed a bug where having two paired date picker with “direction” set to FALSE, the second date picker will not obey this rule once a date is selected in the first date picker; thanks Shane M;
  • fixed a bug where when having paired date pickers, the “Today” button was sometimes available although it shouldn’t have been; thanks Matt;
  • fixed some indenting issues and the scope of some variables; thanks W. van Kuipers;
  • fixed a few minor issues reported by JSFiddle’s JSHint;
  • minor update of source code regarding optimal usage of jQuery for creating the wrapper around the parent element;
version 1.8.2 (July 02, 2013)
  • fixed a bug where the calendar icon was in fact taking up space in page; due to this I completely changed the way the calendar icon is placed and hopefully I didn’t brake it completely :)
  • the date picker’s “update” method is now automatically called upon page resize and thus taking care of the case when the date picker is attached to an element part of a fluid design
version 1.8.1 (June 29, 2013)
  • fixed a small bug where setting the “show_other_months” property to FALSE and having a full empty row of cells would result in the cells having the wrong height
version 1.8.0 (June 28, 2013)
  • fixed a bug where deciding whether the “next” and “previous” buttons should be shown, the script was not always working as expected; thanks jojo;
  • fixed a bug where the date picker was not working in IE8 and below; thanks sascha and Souli for reporting;
  • fixed a bug in the “metallic” theme;
  • added a new property called “show_select_today” which when set to TRUE allows for quick selection of the current date; thanks Matt Coady; read more in the see the documentation;
  • changed the name of the “always_show_clear” property to “show_clear_date” and it now can be true, false or 0 (zero), instead of just true or false; see the documentation;
  • changed the caption of the “clear date” button from “Clear” to “Clear date”;
  • minor optimizations in the code;
version 1.7.7 (May 26, 2013)
  • fixed a bug where setting the “direction” property was not working as expected when having the “format” set to just years or months and “direction” was set to an array of 2 integers; like [2011-2013] when “format” was set to “Y”; thanks Kai;
  • fixed a bug where sometimes the date picker was appearing too far to the right relative to the icon; thanks Mark;
version 1.7.5 (May 06, 2013)
  • additional fixes related to the buggy positioning of the date picker’s icon when the date picker in scenarios involving different CSS resets and frameworks;
  • fixed a bug affecting some more rarely used date formats; thanks MSP
version 1.7.4 (May 05, 2013)
  • fixed a bug where the date picker was broken if the page was having the “box-sizing” CSS property set to “border-box”, which is the default for most of the CSS frameworks; read more at http://paulirish.com/2012/box-sizing-border-box-ftw;
  • fixed a few bugs related to the positioning of the icon when the date picker was used together with different CSS frameworks and resets;
version 1.7.3 (May 03, 2013)
  • fixed a bug where having in the “disabled_dates” property a rule like [‘* * * *’] (to disable all dates), and then, in the “enabled_dates” property having rules that enable only dates in the future, would send the script in an infinite loop; thanks Miguel Avila;
  • fixed a bug where if a default value did not have days, months and years but only fragments (like, “Feb” or “February” when format was set to “F” or “M” respectively) the current date was used as default date instead; thanks to MSP;
  • fixed a bug where, when searching for the first selectable date the library would sometimes fail and incorrectly show the month *after* the first selectable month;
  • fixed a bug that was introduced in the previous version that could break the script if ranges were used in the “disabled_dates” or “enabled_dates” properties;
  • fixed an issue where if the only the “months” view was visible, the user could still use the “next” and “previous” buttons to change years; thanks MSP
version 1.7.1 (April 26, 2013)
  • fixed a bug where, when the “select_other_months” property was set to TRUE, days selected from outside the current month would be wrong; thanks MSP;
  • fixed an issue where the value of the “select_other_months” property was set to TRUE instead of FALSE as per documentation;
version 1.7.0 (April 22, 2013)
  • fixed an issue where after selecting a date, the focus would go to nowhere and you’d have to start tab-ing from the top of the page; now the focus goes to the element the date picker is attached to;
  • fixed an issue where when setting a format like ‘F’, ‘m’, ‘M’ or ‘n’ (so, months only), users had to also pick a day; thanks John;
  • fixed a bug where in IE7 & 6 the “Clear” button was alternatively visible/invisible for each change of year/month;
  • added a new configuration option: “enabled_dates” which the reverse of the “disabled_dates” property, and which must be used together with the “disabled_dates” property; thanks to Sascha, Pranav Goswami and to all the others that suggested this;
  • the calendar icon is not absolutely positioned anymore, and thus fixing all the issues that it was causing; thanks to all the people who kept insisting :)
  • the “zero_pad” property is now FALSE by default;
  • added 2 new configuration options: “show_other_months” which specified whether days belonging to other than the month being displayed should be shown, and “select_other_months” which specifies whether belonging to other than the month being displayed should be selectable; thanks to Josh;
  • changed the &laquo;, &raquo; and &nbsp; HTML entities to their numerical equivalents bacause they were apparently causing troubles in strict XHTML documents; thanks Martin Luter;
  • optimized a bit the datepicker’s stylesheets (also changed their names, so watch out when you’re upgrading!); also, added a new stylesheet for use with Twitter Bootstrap;
  • added in the documentation the fact that if month names are used with the “direction” property, these must be in English and not the values in the “months_abbr” property; thanks to Manfred;
  • the plugin is now available on GitHub!
version 1.6.7 (January 28, 2013)
  • fixed an issue due to which the plugin was not working with jQuery 1.9.0;
version 1.6.6 (January 15, 2013)
  • fixed a bug where the first selectable date was not computed if the “direction” property was a negative number; thanks to Bastian Flinspach;
version 1.6.5 (January 12, 2013)
  • fixed an issue where, for paired date pickers, only a single date picker could be set using the “pair” property; now any number of date pickers can be set, using a selector; thanks to Morten
version 1.6.4 (January 08, 2013)
  • fixed an error where using “D” in date’s format would crash the script; thanks James
version 1.6.3 (January 02, 2013)
  • fixed a bug where when using paired date pickers and the second date picker would not have the “direction” property set to something different than “0”, the second date picker’s selectable dates would not get updated according to the values in the first date picker; thanks to Martijn
  • fixed some bugs in the alternate CSS;
version 1.6.2 (December 13, 2012)
  • fixed a bug in example 7; thanks Morten
  • fixed a bug where the zero_pad configuration option was being applied only to the days of the current month and not also to the few, non-seletable, days of the next month; thanks Morten
version 1.6.1 (November 03, 2012)
  • fixed a bug where using “M” (abbreviated month names) or “D” abbreviated day names in date format would result in the library returning the first three letters from months/days fullnames rather than the values given to the “months_abbr” and “days_abbr” properties; thanks to mansoft;
  • added a new property: “show_icon” which when set to FALSE will disable the adding of the calendar icon to the elements the plugin is attached to; thanks to maliang47;
  • the date picker’s position is now computed relative to the calendar icon’s top-right corner (instead of top-left corner as it was previously), unless the calendar icon is hidden when the position is calculated relative to the element’s top-right corner; so, remember to adjust the “offset” property when updating the plugin!;
  • the date picker will now open when clicking on the element the plugin is attached to regardless of the fact that the element is read only or not; thanks to Nicky;
version 1.6 (October 28, 2012)
  • fixed a bug where the algorithm for calculating the ISO 8601 week number was not working correctly; thanks to Christian;
  • fixed a bug where if using the same starting and ending date for the “direction” configuration option, the date picker would behave as if there were no restrictions; thanks to Sachin;
  • fixed a bug where when the system was set to a time zone where daylight saving time would occur at midnight, selecting the particular date where the daylight saving time was applied would result in the plugin returning the previous day; thanks to Arvy!
  • a new “onClear” event is now available; a function attached to this event will be executed when a date is cleared; thanks to Alan for suggesting;
  • added a new configuration option: “zero_pad”; setting it to FALSE will prevent the script from prefixing day numbers < 10 with zeroes (so, it will be "1" instead of "01"); thanks to Nicky for suggesting;
  • added 2 new configuration options: “days_abbr” and “months_abbrs” for specifying custom abbreviations for days and month names (useful for languages where the abbreviation is not as simple as the first 2 or 3 letters); thanks to RATI!;
  • the functions attached to the onSelect and onChange events will now receive an extra argument being a reference to the element the date picker is attached to, as a jQuery object;
version 1.5 (September 30, 2012)
  • a new “onChange” event is now triggered whenever the user changes the view (days/months/years), as well as when the user navigates by clicking on the “next”/”previous” icons in any of the views; the callback function called by this event takes two arguments – the view (days/months/years) and the “active” elements (not disabled) in that view, as jQuery elements allowing for easy customization and interaction with particular cells in the date picker’s view; read more about this in the configuration section; thanks to Russell for suggesting;
  • fixed two bugs introduced in the previous version that made the icon to be incorrectly positioned in Internet Explorer 6, 7 & 8 and also made the library trigger a warning message in these browsers;
  • fixed a bug where setting the “disabled_dates” attribute to something else other than an array, would trigger an error in Internet Explorer 6 & 7; thanks to myapi
version 1.4.2 (September 22, 2012)
  • fixed a bug where the icon would not be placed correctly if the element the plugin is attached to had margins;
  • fixed some small bugs in the CSS and in the JavaScript code;
  • calling the “update” method will now also recalculate the parent element’s position and place the icon accordingly; use it when you show/hide/reposition the parent element or you alter the parent element’s dimensions;
version 1.4.1 (July 29, 2012)
  • fixed a bug where, when two date pickers are paired, the second date picker’s starting date was using the first date picker’s date as starting date *only* after a date was selected in the first date picker and not also when the first date picker already had a default date; thanks to j-Walker
  • fixed an issue where the current system date was not highlighted if it was disabled; thanks to Kevin Twitchell
  • the week number is now shown according to the ISO 8601 standard; thanks to David Moros for the heads up;
version 1.4 (July 08, 2012)
  • fixed a bug where the date picker’s icon was not centered vertically relative to the parent element;
  • added the possibility to select only years and months or just years; this behavior will be automatically triggered when setting an appropriate format – something like “Y-m” will allow users to select only years/months, while something like “Y” will allow users to only select years;
  • if the element the plugin is attached to is disabled, the icon for opening the date picker will be greyed out and the user will not be able to open the date picker; thanks Todd
  • all sorts of imaginable combinations regarding starting and ending dates can now be set – look for the “direction” property in the configuration options for more information;
  • two date picker’s can now be “paired” so that one date picker’s will use the value in the other as starting date; see the “pair” attribute;
  • a callback function can now be set to be executed when the user selects a date; look for the “onSelect” property in the configuration options for more information;
version 1.3.2 (April 20, 2012)
  • included a second stylesheet for users who don’t like the looks of the default one; thanks to daniel for reminding me about it;
  • fixed icon position when inside the element on Opera; thanks Daniel;
  • fixed a bug introduced in the last version that made disabling dates using , (commas) and – (dashes) impossible; thanks Denis;
version 1.3.1 (April 07, 2012)
  • fixed a bug where, starting with jQuery 1.7, the plugin was not working properly in IE6 & IE7; thanks to Warren Taylor;
  • fixed a bug where the “Clear” button broke the date picker’s layout in IE6 & IE7; thanks to Warren Taylor;
version 1.3 (April 02, 2012)
  • added a new property called “start_date” that can be used to specify a default starting date for the date picker, without having to set this value as the default value in the field the date picker is attached to; thanks to Phill;
  • the date picker will now feature a button for clearing a previously selected date; this means that if the input the date picker is attached to is empty, and the user selects a date for the first time, this button will not be visible; once the user picked a date and opens the date picker again, this time the button will be visible; this button can be made permanently visible by setting the newly added “always_show_clear” property to TRUE; the caption of the button can be set through the newly added “lang_clear_date” property; thanks to Marc;
  • the date picker can now be kept visible all the time by setting the newly added “always_visible” property to a jQuery element that will act as the date picker’s container; thanks to red for suggesting this, and to everybody else for insisting :)
  • fixed a bug where if the calendar icon didn’t have any parents with “position: relative”, it would appear at the very top of the page; thanks to Primoz and nzn;
  • fixed a bug where pre-selected years and months were not highlighted if the date format didn’t have days, months and years, but was something particular like “Y-m” or just “Y”;
  • fixed a bug where January was never highlighted in the month picker;
version 1.2 (February 05, 2012)
  • the icon for opening the datepicker is now, by default, *inside* the parent element rather than to its right; the old behaviour can still be achieved by setting the newly added “inside” property to FALSE;
  • fixed a bug where the default view, as defined in the settings, was correctly used only the first time; subsequent clicks would open the datepicker in the “day picker” view, regardless of how it was set;
  • fixed a bug where the currently selected years and months were not highlighted in the datepicker; only the current system year and month were highlighted previously;
  • fixed a bug where, if a range of selectable dates was given, users could still navigate to years/months outside the given range (although no dates could be selected from these years/months as they were disabled);
version 1.1.2 (September 11, 2011)
  • fixed a bug where unavailable months and years could also be clicked and thus sending the user to a month with no selectable dates;
version 1.1.1 (August 29, 2011)
  • fixed a bug regarding event delegation that would crash the script in certain scenarios; thanks to Sebi Popa for spotting it!
version 1.1 (August 24, 2011)
  • fixed a bug where trying to re-initialize the date picker would attach an extra calendar icon and an extra date picker to the element; thanks to Murat for reporting;
  • the “direction” property was enhanced and now can also be an array where the first value indicates the starting date and the direction of calendar, and the second value is the number of selectable days; thanks to FranckM for suggesting;
  • week numbers can now also be shown using the show_week_number property (thanks to Jorgen for suggesting);
  • if the readonly_element property is set to true (default), the date picker is also shown when the user clicks the input field; thanks to Tomek for suggesting;
  • pressing the ESC key will now close the date picker;
  • examples are now also available in the downloadable package;
version 1.0, bugfix (May 27, 2011)
  • a bug was fixed that prevented the script from using the date in the text box as default date
version 1.0 (May 26, 2011)
  • initial release

Top

1040 responses to “Zebra_Datepicker, a lightweight datepicker jQuery plugin”

Follow the comments via RSS
  • Soma Basu, 2014-09-19, 13:34

    I am trying to change the id datepicker-example7-start to startDate and datepicker-example7-end to endDate.How to i change the id on my project.Because i am trying to change the id but is not working.
    Please help.

    Reply
  • Martijn, 2014-09-24, 13:34

    Found another bug:
    On line 2482, you retrieve the picker width and height, and apply it to several element further on. This is dangerous, because retrieving widths and heights that way gets you pixels.

    In my case, the dp_header gets set to 100px width, while the daypicker is actually set to 100%.

    So please either support relative units as well, or just don’t do styling in javascript.

    Reply
  • Martijn, 2014-09-24, 13:35

    If you could host this picker on github, we could actually help developing it by proposing pull requests… Or at least by opening a proper issue, so you don’t have to plough through a sea of comments.

    Just a friendly hint ;)

    Reply
  • Martijn, 2014-09-24, 14:34

    Fix, starting at line 2480:

    // get the day picker's width and height
    var width = daypicker.css("width"),
        height = daypicker.css("height");
    
    Reply
  • Martijn, 2014-09-24, 16:14

    Found another error:

    TypeError: matches is null
    Line 2561

    Possibly related to:

    format: "l d F 'y"

    Because it’s trying to parse a class “date_1980528″, which doesn’t match at all. But that’s a class the zebra datepicker put there itself. I didn’t do that.

    This points to a typical “spooky action at a distance”, a common antipatter where two seemingly unrelated things are somehow loosely affecting one another.

    Again, I would propose a fix, but this will just result in a sea of comments with no structure and no real fix.

    Reply
    • Stefan Gabos, 2014-09-24, 18:06

      is this happening with the latest version? if so, what is the line number

  • Passchendaele, 2014-10-14, 19:49

    The ‘Zebra_DatePicker dp_hidden’ div occupies the bottom of the page – large white space at the bottom. How can I fix this?

    Reply
    • Passchendaele, 2014-10-14, 20:04

      changing it to display: none works, but what’s the impact? so far, so good..

  • Ramakrishna, 2014-10-15, 08:16

    I stuck @ z-index problem. I am showing this date picker on jquery ui dialog… unfortunately this date picker taking less z-index that jquery ui model dialog.

    I think some modification in the script level while rendering date picker.

    Reply
    • Stefan Gabos, 2014-10-15, 12:30

      Change the zIndex in the CSS file

  • Ramakrishna, 2014-10-24, 13:06

    I have a situation like if user selects date from one datepicker depend datepicker must start from the same date. but currently pair is showing next day onwards. can you please give alternative way.

    Reply
  • Ramakrishna, 2014-10-25, 15:34

    I want to show one date format to user and I need to send another date format to server.. how come it is possible with this. I need this badly. Help me out please

    Reply
  • nacee, 2014-11-05, 14:59

    Hi, you’re doing great.
    I would ask that if you have the time and feel like you can do a ‘timepicker’ and a ‘datetimepicker’.
    Thanks!

    Reply
  • MacDev, 2014-11-05, 21:33

    how to change the datepicker size?

    Reply
  • searcher, 2014-11-06, 13:42

    how could i enter date manually in input textbox field with additional functioning of zebra datepicker .Help me out please

    Reply

Leave a Reply

Your email address will not be published
You can use <strong>, <em>, <a>, <img>, <code>
Characters are not case-sensitive