Stefan Gabos web developer extraordinaire

Tweet

Zebra_Datepicker, a lightweight datepicker jQuery plugin

Get the latest updates on this jQuery plugin via RSS

• 1. Overview
• 2. Requirements
• 3. How to use
• 4. Configuration
• 5. Download
• 6. Changelog
• 7. Comments

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 13KB 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
• 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 future-only or past-only calendars
• supports internationalization
• works by automatically attaching a small calendar icon to the indicated input fieds 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!

Requirements

Zebra_Datepicker has no dependencies other than jQuery 1.5.2+

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.

Demos

1. A date picker with defaults settings

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

2. A “future-only” date picker: dates can be selected only from 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. A “future-only” date picker where dates can be selected only from 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 isn't 0 or 6 (Sunday or Saturday)
});

4. A “future-only” date picker where the selectable dates are in the interval starting tomorrow and ending 10 days from tomorrow.

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

5. Set the format of the returned date:

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

6. Show week number

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

7. 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-example7').Zebra_DatePicker({
    view: 'years'
});

Configuration

All parameters are optional.

Download

version 1.3.2 (zip, 89.4Kb)

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

You may also like:

• jQuery Plugin Boilerplate
• Zebra_Accordion, a tiny accordion jQuery plugin
• Zebra_Cookie, an extremely small jQuery plugin for writing, reading and deleting cookies
• Zebra_Dialog, a lightweight dialog box jQuery plugin
• Zebra_Tooltips, a lightweight tooltips jQuery plugin
• Zebra_TransForm, a tiny jQuery plugin for replacing checkboxes, radio buttons and selects

Changelog

Click on a version to expand/collapse 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

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

Follow the comments via RSS

• Steve McGonigal, 2011-11-07, 15:27

  Hi,

  How much work would be involved in showing the following month beside the current one such that two months are shown side by side?

  Thanks,

  Reply
  
  • Stefan Gabos, 2011-11-12, 11:30

    probably a day’s work
    
• Tom, 2011-11-23, 11:15

  Hi
  Great work by the way!
  Is there a setting to affect the popup position of the calendar?

  Thanks

  Reply
  
• Tom, 2011-11-23, 11:17

  Hang On – found it i think!

  Reply
  
• John McLear, 2012-01-03, 18:05

  Heya, I use the jQuery by Keith Wood and find it really powerful and reasonably light, why should I use this one instead?

  Reply
  
  • Stefan Gabos, 2012-01-03, 21:16

    i don’t force it on you for most of us, we choose the tools we use in a subjective way – we got used to them, it was the first thing we’ve ever used and now it’s hard to switch, it gets the job done, etc, etc.

    try it and if it suits you better than the other one, than use it. or don’t otherwise
    
• dirko, 2012-01-18, 15:16

  Hi
  Great script!

  I tryed to set up a calender for future dates only and only the 1st day of a month is pickable.

  $(document).ready(function() {
      $('#beginn').Zebra_DatePicker({
          direction: 1, //or true
          disabled_dates: ['2-31 * * *'],
          format: 'd.m.Y'
      });
  });

  my problem is that dates before today are pickable.
  Do you have any Idea?
  DirkO

  Reply
  
  • Stefan Gabos, 2012-01-18, 16:54

    can’t confirm that. are you using the latest version?
    
  • dirko, 2012-01-18, 22:34

    Sorry, I have to correct my question.
    In my form I have a date-value in future (ie. 24.04.2012)
    the user should be able to select no date before and only the 1.st Day in a month.
    How can I configure that?

    I’m using 1.1.2 (last revision: September 11, 2011)
    Downloaded last Friday from your site.
    (and jquery-1.7.1)
    See ist here: http://www.extrabyte.de/_showroom/zebra/

    thanks for supporting.
    DirkO
    
  • Stefan Gabos, 2012-01-19, 07:48

    currently there’s no way to set “starting from the first day of the next month”. you could check the current month prior to initializing the date picker, and then feed that information to the date picker. For example, if the current date is 2012-04-24 and you want dates to be available from 2012-05-01 you could do

    // disable all of April, and all weekends, in all months
disabled_dates: ['* 4 2012', '* * * 0,6']

    you can also combine rules to get the desired effect. For example, if you want to allow dates only from 2012-05-01 starting from now, you could use

    disabled_dates: ['* 1-3 2012', '1-24 4 2012', '* * * 0,6']

    which means disable January to February 2012, and 1 to 24 in April. Other than that, disable all weekends.
    
• Red, 2012-02-01, 10:49

  Hi,

  Thanks for plugin. I am trying to have the calendar display all the time, I do not want to hide it at all or have it appear on click. What adjustments to the JS would I need to make? I tried unhiding the datepicker you hide but does not work.

  Thanks

  Reply
  
  • Stefan Gabos, 2012-02-01, 11:45

    can’t be done currently without hacking the JavaScript code…
    
  • Red, 2012-02-01, 12:37

    is it possible to ‘hack’ it easily or you could tell me where to start/look? I am a bit of a noob so any help would be appreciated..
    
• manfred, 2012-02-07, 15:15

  Is there a way to stop selection after month i.e example 7 starts with the year and should stop after selection of the month. Resulting format should be only “Y-m”.

  It is a very good jquery plugin anyway – excellent work!

  Reply
  
  • Stefan Gabos, 2012-02-07, 15:23

    currently there’s no way of doing that, but i wanted to add this feature in the version I’ve just released this weekend just didn’t have the time, in the end. it’s on the top of the priority list, though
    
• Liam Don, 2012-02-09, 04:55

  IE8 throws an error: “zebra_datepicker doesn’t support this property or method.

  To fix, you need to change line 1170 of zebra_datepicker.src.js: replace the final semicolon with a comma and you’re done.

  - now = to_int(str_concat(selected_year, str_pad(selected_month, 2), str_pad(day, 2)));
  + now = to_int(str_concat(selected_year, str_pad(selected_month, 2), str_pad(day, 2))),
  

  Hope this helps anyone facing the same issue!

  Reply
  
  • Stefan Gabos, 2012-02-09, 08:03

    thanks! the patched file is available for download – should test more in IE! thanks again!
    
• Luca, 2012-02-09, 13:11

  how can be deactive the days before today (otherwise, “future-only” include also today)? thx.

  Reply
  
  • Stefan Gabos, 2012-02-09, 13:45

    as stated in the configuration options “Use boolean true for a future-only calendar starting with today” when setting the “direction” property
    
  • Luca, 2012-02-09, 14:28

    simple, work it! thanks again (great job!)
    
• Primoz, 2012-02-09, 20:57

  Can this picker be configured so it is visible all the time (not via dropdown)?

  Reply
  
  • Stefan Gabos, 2012-02-09, 21:07

    currently no, but it’s on the top of my to-do list. i wanted to add this feature the past weekend, but I didn’t have the time nor could I come up with a satisfying implementation for it as I am not sure on how do I set *where* the datepicker will appear. should it be so that I specify a container element and the datepicker is shown in that element?
    
  • Primoz, 2012-02-10, 08:25

    Hello! In my opinion there would be 2 options that would make sense:

    1. one is like you say… specify a container element and calendar is displayed inside

    2. second one is that your input date field is replaced with a new element in which date picker is displayed … in this case you should also add input type=”hidden” along with date picker for the replaced input date field, so it can be submitted when you pick up a date…
    
• Primoz, 2012-02-11, 13:43

  Hello again Allan. Having some problems with your datepicker.

  1. This inline style is applied yo cal button element:

  element.style {
    left: -19px;
    top: -363.817px;
  }

  Why is this style applied to the button? It displays calendar.png button lots of pixels off place!

  2. the position of calendar is also off place… see the image:
  http://dl.dropbox.com/u/1207859/Screen%20Shot%202012-02-11%20at%202.36.06%20PM.png

  Reply
  
  • nzn, 2012-02-13, 11:07

    I had the same problem and I did the following:

    I commented out the lines:

    icon.css({
      'left': -icon_width,
      'top':  -icon_top + ((element_height - icon_height) / 2)
    });

    and added:

    icon.css({
      'right': -1 * $element.outerWidth(true) + icon.outerWidth(true) - 1,
      'top':  -$element.outerHeight(true) + 4
    });

    It seemed to do the job
    
• hicham, 2012-02-13, 11:52

  Hi Stefan,

  Great work and i love it, it works great for me.

  Please i need a little help, i have two datePicker, the first one is the starting day and the second one is the ending day. What i need is that the second datePicker start from the chosen day of the first datePicker. I use this code but something seems to be wrong in my code becouse the second datePicker starts always from the bigining of the month and not from the returned result of the daydiff() function.

  $(document).ready(function(){
  
      var J = jQuery.noConflict();
  
      // DatePicker
      J('#datepicker_start').Zebra_DatePicker({
          direction: true,
          format: 'm/d/Y',
          offset: [-200, 600],
          months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
      });
  
      function getToday(){
  
          var currentTime = new Date()
          var month = currentTime.getMonth() + 1
          var day = currentTime.getDate()
          var year = currentTime.getFullYear()
  
          return month + "/" + day + "/" + year;
  
      };
  
      function parseDate(str) {
          var mdy = str.split('/')
          return new Date(mdy[0]-1, mdy[2], mdy[1]);
      }
  
      function daydiff() {
          return ((parseDate(J('#datepicker_debut').val()))-(parseDate(getToday())))/(1000*60*60*24);
      }
  
      // For the tset
      /*J('#datepicker_fin').click(function() {
          alert(daydiff());
      });*/
  
      J('#datepicker_end').Zebra_DatePicker({
          direction: daydiff(),
          format: 'm/d/Y',
          offset: [-200, 600],
          months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
      });
  
  });

  Can you please correct this code if thers anyting wrong. I’am not very good in JS.

  Thank you

  Reply
  
• norad, 2012-02-21, 14:51

  Hi,

  I’ve got 2 questions:

  1) Can I put two date boxes for choosing start and end dates? For example; just like a hotel reservation date picker, user should first select the check-in date and then the second date picker should automatically open the month chosen in the first date picker.

  2) Is it possible to give a date interval such as from May, 1st 2013 to May, 15th, 2013?

  Thanks

  Reply
  
  • hicham, 2012-03-02, 10:42

    Hi norad

    I actualy did it using this code.

    // Get today's date
    function getToday(){
        var currentTime = new Date()
        var month = currentTime.getMonth() + 1
        var day = currentTime.getDate()
        var year = currentTime.getFullYear()
    
        return month + "/" + day + "/" + year;
    }
    
    // Get the date difference between today's date
    // and '#datepicker_start' date
    function datediff(fromDate, toDate, interval) {
        /*
         * DateFormat month/day/year hh:mm:ss
         * ex.
         * datediff(
         *     '01/01/2011 12:00:00',
         *     '01/01/2011 13:30:00',
         *     'seconds'
         *);
         */
        var second=1000, minute=second*60, hour=minute*60, day=hour*24, week=day*7;
        fromDate = new Date(fromDate);
        toDate   = new Date(toDate);
        var timediff = toDate - fromDate;
        if (isNaN(timediff)) return NaN;
        switch (interval) {
            case "years": return toDate.getFullYear() - fromDate.getFullYear();
            case "months": return (
                ( toDate.getFullYear() * 12 + toDate.getMonth() )
                -
                ( fromDate.getFullYear() * 12 + fromDate.getMonth() )
            );
            case "weeks"  : return Math.floor(timediff / week);
            case "days"   : return Math.floor(timediff / day);
            case "hours"  : return Math.floor(timediff / hour);
            case "minutes": return Math.floor(timediff / minute);
            case "seconds": return Math.floor(timediff / second);
            default: return undefined;
        }
    }
    
    // DatePicker
    $('#datepicker_start').Zebra_DatePicker({
        direction: true,
        format: 'm/d/Y'
    });
    
    $("#datepicker_end").focusin(function(){
    
        $('#datepicker_end').Zebra_DatePicker({
            direction: datediff(getToday(), $('#datepicker_start').val(), 'days')+1,
            format: 'm/d/Y'
        });
    
    });

    All you have to do now is to create two textbox, the first one with the id=”datepicker_start” and the second with the id=”datepicker_end”. If this works fin to you give me a reply
    
• Pratik, 2012-02-24, 06:44

  Hi,

  I got same question as norad.

  Can we add a name to each instance of datapicker i.e. for start dates and end dates.

  Thanks

  Reply
  
• Phill, 2012-02-26, 14:37

  Well done, this is a great plugin, it’s light, simple and easy to customise, I also love the quick and intuitive way to select previous years and months.

  Just one feature request, I’d like to be able to choose the default date when the picker opens instead of the current date.

  Reply
  
  • Stefan Gabos, 2012-02-26, 19:35

    the default date is whatever in the text box. put a default date in the text box and the date picker will open at that particular date
    
  • Phill, 2012-02-27, 04:33

    Thanks, that’s good when I want a default date, but sometimes I want the field to be blank to ensure that the user actually enters a value for required data but also control the picker date to facilitate input. For example a date of birth, in which case I would like the picker to start x years ago and not with today’s date.

    I also had the same problem as nzn, where my picker appeared at the very top of the window, solved with his fix.
    
  • Stefan Gabos, 2012-02-27, 07:50

    ok, thanks! i’ll have that feature and the fix for the picker appearing in the wrong position by the end of this week
    

Leave a Reply

Leave this field blank

Name*

Email*

Your email address will not be published

Website

Message*

You can use <strong>, <em>, <a>, <img>, <code>

Enter the characters that stand out in the image above

Characters are not case-sensitive