Fork me on GitHub
See the examples using the metallic theme or the bootstrap theme.

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.

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 because there's no day in the format
                                        //  users will not be able to select a day!
                    });
                    

12. Disable weekends, but apply a custom class to Saturdays and Sundays

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

13. 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-example13').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'
                                        });

                                });

                            }

                        }
                    });
                    

14. Calendar is always visible. Set the "always_visible" property to point to a jQuery element which to contain the date picker

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

15. 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-example15" data-zdp_direction="1" data-zdp_disabled_dates='["* * * 0,6"]'>
                    
                    $('#datepicker-example15').Zebra_DatePicker();