The Ultimate jQuery Date Time Picker:
Zebra Datepickersuper-lightweight and highly-configurable


Download View on GitHub

See the examples with the date pickers having the default or the bootstrap theme.

Zebra Datepicker is a user-friendly and highly configurable date and time picker jQuery plugin. Its lightweight design makes it easy to implement on any website, and it's compatible with all major browsers. With a range of customization options, you can easily tailor the plugin to suit your needs and enhance the functionality of your forms. Whether you're looking for a simple date time picker or a more advanced one, Zebra Datepicker has you covered.

This jQuery date time picker plugin will automatically add a calendar icon to the indicated input fields which, when clicked, will open the attached date time picker.

Users can easily jump between months and years due to the date pickers intuitive interface. The selected date will be entered in the input field using the date format of choice, configurable in the date picker's options.




1. Default initialization

All dates are selectable, no restrictions.
There are a lot of things that can be configured!

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

2. Allow future dates only, starting one day in the future

All past dates, including today, are disabled.
Read more about using the direction property.

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

3. Allow dates from a dynamic interval

The selectable dates are in the interval starting tomorrow and ending 10 days after that.
Read more about using the direction property.

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

4. Allow dates from an interval between 2 dates

Dates in the direction property have to be written in the date picker's date format.
Read more about using the direction property.

                    $('#datepicker').Zebra_DatePicker({
                        direction: ['2012-08-01', '2012-08-12']
                    });
                    

5. Allow only dates that come after a certain date

Dates in the direction property have to be written in the date picker's date format.
Read more about using the direction property.

                    $('#datepicker').Zebra_DatePicker({
                        direction: ['2012-08-01', false]
                    });
                    

6. Disable dates

Allow future dates only including the current day.
All past dates are disabled.
Saturday and Sundays are disabled.
Read more about using the direction property and about disabling dates.

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

7. Date ranges (sort of)

The second date picker's starting date is the value of the first date picker + 1

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

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

8. Date formats

Accepts the following characters for date formatting: d, D, j, l, N, w, S, F, m, M, n, Y, y, h, H, g, G, i, s, a, A, borrowing the syntax from PHP's date function.
If format property contains time-related characters (g, G, h, H, i, s, a, A), the time picker will be automatically enabled.
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. Similarly, setting a format that contains only time-related characters, will result in users being able to only select time.

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

9. Enabling the time picker

If format property contains time-related characters (g, G, h, H, i, s, a, A), the time picker will be automatically enabled.

                    $('#datepicker').Zebra_DatePicker({
                        format: 'Y-m-d H:i'
                    });
                    

10. Partial date formats

The date picker will not show views that are not present in format.
In the example below, the date picker will never get to the day view as there is no day-related character in the date's format.

                    $('#datepicker').Zebra_DatePicker({
                        format: 'm Y',
                    });
                    

11. Showing week numbers

Show the ISO 8601 week number.

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

12. Changing the starting view

Start with the years view, recommended for when users need to select their birth date.
You can always switch between views by clicking on caption in the date picker's header, between the previous and next buttons!
Note that the date picker is always cycling days -> months -> years when clicking on the date picker's header, and years -> months -> days when selecting dates (skipping the views that are missing because of 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)

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

13. Custom classes

Disable weekends and apply a custom class to Saturdays and Sundays.

                    $('#datepicker').Zebra_DatePicker({
                        disabled_dates: ['* * * 0,6'],
                        custom_classes: {
                            'myclass':  ['* * * 0,6']
                        }
                    });
                    

14. Handling 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 takes two arguments:

  • the view (days, months or years)
  • 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').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({
                                            background: '#C40000',
                                            color:      '#FFF'
                                        });

                                });

                            }

                        }
                    });
                    

15. Always-visible date pickers

Set the always_visible property's value to a jQuery element which will act as a container for the date picker.
Notice that in this case the element the date picker is attached to has no icon.

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

16. RTL support

Set the rtl property to true to have the current language drawn from right to left.

                    $('#datepicker').Zebra_DatePicker({
                        rtl: true
                    });
                    

17. Data attributes

All the properties 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_.
Remember that if the value of the property is an array, you will have to use double quotes inside the square brackets and single quotes around the attribute, like in the example below:

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

copyright © 2011 - stefan gabos