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 the plugin’s CSS file

<link rel="stylesheet" href="path/to/zebra_datepicker.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')
});

Top

Configuration

All parameters are optional.

always_show_clear boolean

Should the “Clear” button be always visible? 

By default, 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.

The caption of the button can be changed through the lang_clear_date property.

Setting this property to TRUE will make this button visible all the time.
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;

Note that when this property is set to TRUE, the “always_show_clear” property will be automatically set to TRUE.
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

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’.
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 TRUE.
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_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

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();
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.7.5
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 thas 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.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

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

Follow the comments via RSS
  • PieterA, 2012-04-25, 13:34

    Great plugin. Ant suggestion on how to make a ajax-call to a server with the $element.val() as soon as a new date is selected?

    tnx

    Reply
    • Stefan Gabos, 2012-04-28, 19:30

      currently there’s no option for doing that but it is on the top of my to-do list, and will be featured in the next release very soon

  • Mika, 2012-04-30, 07:31

    Hi!

    Thanks for the great calendar add on. I noticed that when using this together with twitters bootstrap the icon will not be displayed, it detects the top value incorrectly and pushes the icon towards the top of the display. Uncommenting the line:

    ‘top’: -icon_top + ((element_height – icon_height) / 2)

    from the js fixes the issue.

    For feature requests:
    - Add possibility to not select the day, just year and month and have a parameter to select if it returns the first or last day of the month (I want to select date ranges going over some months)

    Reply
    • Stefan Gabos, 2012-04-30, 08:45

      thanks for the heads-up – i’ll have a look on that; i have that feature planned for the next release;

    • Frank, 2012-09-07, 18:24

      Actually, I found this issue only happens in Chrome/Safari with Bootstrap. The icon is displayed correctly in I.E and Firefox.

      I found the solution was to add 47px (don’t ask why) to the top margin of the icon.

      /* Fix icon position in Chrome & Safari */
      @media screen and (-webkit-min-device-pixel-ratio:0) {
      button.Zebra_DatePicker_Icon_Inside { margin: 47px 5px 0 0 }
      }

  • Enrique Piatti, 2012-05-08, 07:54

    Hi, this doesn’t work in jQuery 1.5 on IE, I’m getting an error in jQuery trying to use getElementsByTagName. Apparently this was fixed in 1.5.2.

    Reply
    • Stefan Gabos, 2012-05-08, 18:39

      thanks!

  • sunita, 2012-05-14, 10:15

    this datepicker is good but want to disable date before 2 days of current date

    Reply
  • Patrick, 2012-05-18, 17:21

    great plugin, thanks, just donated :-)

    I’ve added a callback, and am using it on http://www.calcudoku.org
    :)

    Reply
    • Stefan Gabos, 2012-05-21, 06:26

      thank you!

  • Hizzana, 2012-05-30, 02:19

    because of some reasons, i had to customsize some parts of codes, like: add a relationship with two days the direction will look like [from , to], the way i tried was to add an event handler to set the start_date and direction, it will be triggered after a date has been selected. it works in chrome firefox safiri, but does not work in IE 6,7,8. so i suggest that can you add this functionality in the future version? thanks !

    Reply
    • Stefan Gabos, 2012-05-31, 19:58

      it will be possible in the next version. thanks!

  • Ibrahim, 2012-05-31, 07:23

    How can i only enable calendar only between two days let suppose January 1st 2012 and March 15th 2012 and remaing all are disabled

    Reply
    • Stefan Gabos, 2012-05-31, 19:57

      currently it is not possible but will most probably be available in the next release. thanks!

  • justme, 2012-06-04, 21:44

    Is there a way to select only the month/year? This would be VERY helpful. For example, if you want to insert info based on only month/year for a resume, or to output reports based on month/year.

    Reply
    • Stefan Gabos, 2012-06-05, 05:57

      currently no, but it will be in the next release; thanks!

  • Newbie, 2012-06-05, 18:19

    Greeting from SouthAmerica…
    Sorry to ask this, but i’m newbie and can’t make this work…
    Can you put a link to a Script of a bare Html code with just all needed to run a form thats work? (like your demo example2)
    I download the jQuery, the datepicker, make the link to css and put all in same folder of html… but not work… ;-(
    Nor even if I try to copy the code of this page… (if I remove the or the form of example1, all become useless)

    Thanks in advance.
    (Sorry 4 my english)

    Reply
  • Todd, 2012-06-06, 04:12

    How can you disable the DatePicker based on the input being disabled?

    Depending upon specifics upon page load, some inputs might be disabled, and while I would still like to have the icon appear for esthetic reasons, I would not want the user to be capable of interacting with the icon.

    Reply
    • Stefan Gabos, 2012-06-06, 06:08

      not possible currently. but you have a valid point – noted for the next release. thanks!

  • Ray, 2012-06-12, 05:32

    Hi,

    It seems a great plugin with this small size of code. Am testing it now and encounter the following:

    The current date shows on calendar is one day ahead to today date. Example, today date is 12th June 2012, the calendar shows 13th June 2012.

    Please advice and looking forward to hear from you as soon.

    Reply
    • Stefan Gabos, 2012-06-18, 07:47

      Did you correctly set the “direction” property?

  • alan colyer, 2012-06-20, 12:59

    Hi Stefan,
    great plugin, much better option that the jQuery UI datepicker if you don’t need UI for anything else.

    I just wondered if there are methods to destroy / update options on a particular zebra_datepicker, or if you plan those for a future release.

    eg:

    $(‘input’).Zebra_DatePicker){
    someOption:’someValue’
    });

    then later…
    $(‘input#someId’).ZebraDatePicker(‘options’, {
    someOption:’someOtherValue’
    });

    Just a thought, would be nice but I can make do for now I’m sure :)

    Thanks again
    Alan

    Reply
    • Stefan Gabos, 2012-06-20, 18:40

      thanks, that makes sense and I’ll try and add it in the next version

    • alan colyer, 2012-06-21, 15:43

      Hi again Stefan,

      just made a small update to the source to help it play nice when other jQuery events are attached to the input that zebra_datepicker is attached to.

      In the 1.3.2 source, line 534, I changed the line from this:

      $element.val(format(default_date));

      To this:

      $element.val(format(default_date)).trigger('change');

      This way any onChange events queued on the input will fire correctly with the right value. I had trouble with this because the event would fire with the previous value of the input – I’m not sure why but this fixed it for me.

      Hope this helps someone else :)

    • Stefan Gabos, 2012-06-22, 05:09

      thanks alan! that makes sense but I think the onChange event should fire automatically; I’ll have a look into this. thanks!

  • Filippo, 2012-06-21, 11:12

    Hello, i like your libraries. Just a feature request for the calendar: localization.

    Would be great to have it in different language (italian in my case)

    Thank you in advance, keep up with the great work.

    Reply
    • Stefan Gabos, 2012-06-22, 05:08

      Hi Filippo!
      Read more carefully into the configuration options – specially the “days” and the months” options ;)

  • alan colyer, 2012-06-21, 15:44

    Oh sorry I think that’s actually line 533 (doh!)

    Reply
  • alex611, 2012-06-23, 12:04

    Stefan,

    this is a great plugin, i really love its great options.. exactly what i was looking for to replace the long, heavy UI datepicker.
    Please let me know: I am using datepickers mostly for “check-in/ check-out” dates processing in hotel websites.

    Please have a look in code i use for UI datepicker and let me know how best to do similar functionality with your datepicker:
    http://pastebin.com/KqcL33mA

    I am calculating dates (overnights) as #bookFromPicker, #bookToPicker and pass them to a Reservation form, to look up for accommodation.

    Your help is greatly appreciated, keep on with that nice plugin (the others are great as well ;-)

    Reply
    • alex611, 2012-06-24, 21:47

      No help? Idea?

« Older comments
Newer comments »

Leave a Reply

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