Zebra_DatePicker Demos

Click here to see the alternate styling of the calendar

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