# Zebra Datepicker

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

Download View on GitHub

> See the examples with the date pickers having the default or the metallic theme.

Zebra Datepicker is a small, compact and highly configurable date picker / time picker jQuery plugin, meant to enrich forms by adding the date picker functionality to them. This jQuery plugin will automatically add a calendar icon to the indicated input fields which, when clicked, will open the attached date 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
2. Allow future dates only starting one day in the future
3. Allow dates from a dynamic interval
4. Allow dates from an interval between 2 dates
5. Allow only dates that come after a certain date
6. Disable dates
7. Date ranges (sort of)
8. Date formats
9. Enabling the time picker
10. Partial date formats
11. Showing week numbers
12. Changing the starting view
13. Custom classes
14. Handling the "onChange" event
15. Always-visible date pickers
16. RTL support
17. Data attributes

Note that the `Bootstrap` theme does not actually require Twitter Bootstrap CSS framework to be present!
Its name comes from the fact that it borrows the color scheme from Twitter Bootstrap's default theme.

### 1. Default initialization

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

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

⯅ To the top

### 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
                        });

⯅ To the top

### 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]
                        });

⯅ To the top

### 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']
                        });

⯅ To the top

### 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]
                        });

⯅ To the top

### 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)
                        });

⯅ To the top

### 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
                        });

⯅ To the top

### 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'
                        });

⯅ To the top

### 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'
                        });

⯅ To the top

### 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',
                        });

⯅ To the top

### 11. Showing week numbers

Show the ISO 8601 week number.

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

⯅ To the top

### 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'
                        });

⯅ To the top

### 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']
                            }
                        });

⯅ To the top

### 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'
                                            });

                                    });

                                }

                            }
                        });

⯅ To the top

### 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')
                        });

⯅ To the top

### 16. RTL support

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

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

⯅ To the top

### 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();

⯅ To the top

copyright © 2011 - 2018 stefan gabos