From cd0c07af8b36bbbef840452fdb174450475bf335 Mon Sep 17 00:00:00 2001 From: Stefan Gabos Date: Sun, 3 Dec 2017 21:42:38 +0200 Subject: [PATCH] Visual improvements on the examples' layouts --- examples/bootstrap.html | 488 +++++++++++++++++++++++++++++++++------- examples/examples.css | 13 +- examples/examples.js | 52 ++--- examples/index.html | 486 ++++++++++++++++++++++++++++++++------- examples/metallic.html | 486 ++++++++++++++++++++++++++++++++------- 5 files changed, 1251 insertions(+), 274 deletions(-) diff --git a/examples/bootstrap.html b/examples/bootstrap.html index 7bdac13..fe3342d 100644 --- a/examples/bootstrap.html +++ b/examples/bootstrap.html @@ -12,7 +12,7 @@ - + @@ -29,7 +29,7 @@ - + Fork me on GitHub @@ -51,142 +51,400 @@

Zebra_Datepicker Demos

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.

+
+ +
+
+ 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. Data attributes
+
+
- 
-                    $('#datepicker-example1').Zebra_DatePicker();
-
+
+ + -
+

1. Default initialization

-

2. Dates can be selected only in the future, starting one day in the future.

+

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

-                    $('#datepicker-example2').Zebra_DatePicker({
-                        direction: 1    // boolean true would've made the date picker future only
-                                        // but starting from today, rather than tomorrow
-                    });
+                    $('#datepicker').Zebra_DatePicker();
-
+
+
+
+ +
+
+
+ + To the top -

3. Dates can be selected only in the future, starting today. Also, Saturday and Sundays are always disabled.

+
+ + + +

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-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)
+                    $('#datepicker').Zebra_DatePicker({
+                        direction: 1
                     });
-
+
+
+
+ +
+
+
+ + To the top + +
+ + -

4. The selectable dates are in the interval starting tomorrow and ending 10 days from tomorrow.

+

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-example4').Zebra_DatePicker({
+                    $('#datepicker').Zebra_DatePicker({
                         direction: [1, 10]
                     });
-
+
+
+
+ +
+
+
+ + To the top -

5. Dates can be selected between 2 specific dates

+
+ + + +

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-example5').Zebra_DatePicker({
-                        // remember that the way you write down dates
-                        // depends on the value of the "format" property!
+                    $('#datepicker').Zebra_DatePicker({
                         direction: ['2012-08-01', '2012-08-12']
                     });
-
+
+
+
+ +
+
+
+ + To the top + +
+ + -

6. Dates can be selected in the future, starting with a specific date

+

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-example6').Zebra_DatePicker({
-                        // remember that the way you write down dates
-                        // depends on the value of the "format" property!
+                    $('#datepicker').Zebra_DatePicker({
                         direction: ['2012-08-01', false]
                     });
-
+
+
+
+ +
+
+
+ + To the top + +
-

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

+ + +

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-example7-start').Zebra_DatePicker({
+                    $('#datepicker').Zebra_DatePicker({
                         direction: true,
-                        pair: $('#datepicker-example7-end')
+                        disabled_dates: ['* * * 0,6']   // all days, all monts, all years as long
+                                                        // as the weekday is 0 or 6 (Sunday or Saturday)
                     });
+
+ +
+
+
+ +
+
+
+ + To the top + +
+ + - $('#datepicker-example7-end').Zebra_DatePicker({ +

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.
-

8. Set the format of the returned date:

+ 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-example8').Zebra_DatePicker({
+                    $('#datepicker').Zebra_DatePicker({
                         format: 'M d, Y'
                     });
-
+
+
+
+ +
+
+
+ + To the top + +
+ + -

9. Enable the time picker by setting time in the format:

+

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-example9').Zebra_DatePicker({
+                    $('#datepicker').Zebra_DatePicker({
                         format: 'Y-m-d H:i'
                     });
-
+
+
+
+ +
+
+
+ + To the top -

10. Show week number

+
+ + + +

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-example10').Zebra_DatePicker({
-                        show_week_number: 'Wk'
+                    $('#datepicker').Zebra_DatePicker({
+                        format: 'm Y',
                     });
-
+
+
+
+ +
+
+
+ + To the top -

11. 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!

+
+ + + +

11. Showing week numbers

+ +

+ Show the ISO 8601 week number. + 

-                    $('#datepicker-example11').Zebra_DatePicker({
-                        view: 'years'
+                    $('#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) -

12. Stop after month selection

+ 

-                    $('#datepicker-example12').Zebra_DatePicker({
-                        format: 'm Y'   //  note that because there's no day in the format
-                                        //  users will not be able to select a day!
+                    $('#datepicker').Zebra_DatePicker({
+                        view: 'years'
                     });
-
+
+
+
+ +
+
+
+ + To the top + +
-

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

+ + +

13. Custom classes

+ +

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

-                    $('#datepicker-example13').Zebra_DatePicker({
+                    $('#datepicker').Zebra_DatePicker({
                         disabled_dates: ['* * * 0,6'],
                         custom_classes: {
                             'myclass':  ['* * * 0,6']
@@ -194,17 +452,42 @@ 
Zebra_Datepicker Demos

                     });
-
+
+
+
+ +
+
+
+ + To the top + +
+ + + +

14. Handling the "onChange" event

-

14. 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:

+

+ 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:

+ + 
-                    $('#datepicker-example14').Zebra_DatePicker({
+                    $('#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"
@@ -243,36 +526,77 @@ 
Zebra_Datepicker Demos

                     });
-
+
+
+
+ +
+
+
-

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

+ 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-example15').Zebra_DatePicker({
+                    $('#datepicker').Zebra_DatePicker({
                         always_visible: $('#container')
                     });
-
-
+
+
+
+ +
+
+
+ +
+ + To the top -

16. 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:

+ + +

16. 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-example16" data-zdp_direction="1" data-zdp_disabled_dates='["* * * 0,6"]'>
+                    <input type="text" id="datepicker" data-zdp_direction="1" data-zdp_disabled_dates='["* * * 0,6"]'>
- 
-                    $('#datepicker-example16').Zebra_DatePicker();
+                    $('#datepicker').Zebra_DatePicker();
-
+
+
+
+ +
+
+
diff --git a/examples/examples.css b/examples/examples.css index 715a954..26d6b2a 100644 --- a/examples/examples.css +++ b/examples/examples.css @@ -1,3 +1,7 @@ +body { + font-family: Tahoma, Arial, Helvetica, sans-serif; +} + .syntaxhighlighter { padding: 1em 0; } @@ -7,7 +11,13 @@ p a { font-weight: bold; } -.Zebra_DatePicker .dp_daypicker td.myclass_disabled { +.top { + position: relative; + margin-left: 10px; + top: -10px; +} + +.Zebra_DatePicker .dp_daypicker .myclass { background: #E8E8E8 url('close.png') no-repeat center center; text-indent: -9999px; } @@ -16,3 +26,4 @@ p a { background: #FFF url('close.png') no-repeat center center; text-indent: -9999px; } + diff --git a/examples/examples.js b/examples/examples.js index dd20f2a..7dd3a99 100644 --- a/examples/examples.js +++ b/examples/examples.js @@ -1,71 +1,65 @@ $(document).ready(function() { - $('#datepicker-example1').Zebra_DatePicker(); + $('#datepicker').Zebra_DatePicker(); - $('#datepicker-example2').Zebra_DatePicker({ - direction: 1 // boolean true would've made the date picker future only - // but starting from today, rather than tomorrow - }); - - $('#datepicker-example3').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) + $('#datepicker-future-tomorrow').Zebra_DatePicker({ + direction: 1 }); - $('#datepicker-example4').Zebra_DatePicker({ + $('#datepicker-dynamic-interval').Zebra_DatePicker({ direction: [1, 10] }); - $('#datepicker-example5').Zebra_DatePicker({ - // remember that the way you write down dates - // depends on the value of the "format" property! + $('#datepicker-dates-interval').Zebra_DatePicker({ direction: ['2012-08-01', '2012-08-12'] }); - $('#datepicker-example6').Zebra_DatePicker({ - // remember that the way you write down dates - // depends on the value of the "format" property! + $('#datepicker-after-date').Zebra_DatePicker({ direction: ['2012-08-01', false] }); - $('#datepicker-example7-start').Zebra_DatePicker({ + $('#datepicker-disabled-dates').Zebra_DatePicker({ + direction: true, + disabled_dates: ['* * * 0,6'] + }); + + $('#datepicker-range-start').Zebra_DatePicker({ direction: true, - pair: $('#datepicker-example7-end') + pair: $('#datepicker-range-end') }); - $('#datepicker-example7-end').Zebra_DatePicker({ + $('#datepicker-range-end').Zebra_DatePicker({ direction: 1 }); - $('#datepicker-example8').Zebra_DatePicker({ + $('#datepicker-formats').Zebra_DatePicker({ format: 'M d, Y' }); - $('#datepicker-example9').Zebra_DatePicker({ + $('#datepicker-time').Zebra_DatePicker({ format: 'Y-m-d H:i' }); - $('#datepicker-example10').Zebra_DatePicker({ + $('#datepicker-week-number').Zebra_DatePicker({ show_week_number: 'Wk' }); - $('#datepicker-example11').Zebra_DatePicker({ + $('#datepicker-starting-view').Zebra_DatePicker({ view: 'years' }); - $('#datepicker-example12').Zebra_DatePicker({ + $('#datepicker-partial-date-formats').Zebra_DatePicker({ format: 'm Y' }); - $('#datepicker-example13').Zebra_DatePicker({ + $('#datepicker-custom-classes').Zebra_DatePicker({ disabled_dates: ['* * * 0,6'], custom_classes: { 'myclass': ['* * * 0,6'] } }); - $('#datepicker-example14').Zebra_DatePicker({ + $('#datepicker-on-change').Zebra_DatePicker({ onChange: function(view, elements) { if (view === 'days') { elements.each(function() { @@ -79,10 +73,10 @@ $(document).ready(function() { } }); - $('#datepicker-example15').Zebra_DatePicker({ + $('#datepicker-always-visible').Zebra_DatePicker({ always_visible: $('#container') }); - $('#datepicker-example16').Zebra_DatePicker(); + $('#datepicker-data-attributes').Zebra_DatePicker(); }); \ No newline at end of file diff --git a/examples/index.html b/examples/index.html index e79e17e..7a45026 100644 --- a/examples/index.html +++ b/examples/index.html @@ -12,7 +12,7 @@ - + @@ -51,142 +51,400 @@

Zebra_Datepicker Demos

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.

+
+ +
+
+ 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. Data attributes
+
+
- 
-                    $('#datepicker-example1').Zebra_DatePicker();
-
+
+ + -
+

1. Default initialization

-

2. Dates can be selected only in the future, starting one day in the future.

+

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

-                    $('#datepicker-example2').Zebra_DatePicker({
-                        direction: 1    // boolean true would've made the date picker future only
-                                        // but starting from today, rather than tomorrow
-                    });
+                    $('#datepicker').Zebra_DatePicker();
-
+
+
+
+ +
+
+
+ + To the top -

3. Dates can be selected only in the future, starting today. Also, Saturday and Sundays are always disabled.

+
+ + + +

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-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)
+                    $('#datepicker').Zebra_DatePicker({
+                        direction: 1
                     });
-
+
+
+
+ +
+
+
+ + To the top + +
+ + -

4. The selectable dates are in the interval starting tomorrow and ending 10 days from tomorrow.

+

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-example4').Zebra_DatePicker({
+                    $('#datepicker').Zebra_DatePicker({
                         direction: [1, 10]
                     });
-
+
+
+
+ +
+
+
+ + To the top -

5. Dates can be selected between 2 specific dates

+
+ + + +

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-example5').Zebra_DatePicker({
-                        // remember that the way you write down dates
-                        // depends on the value of the "format" property!
+                    $('#datepicker').Zebra_DatePicker({
                         direction: ['2012-08-01', '2012-08-12']
                     });
-
+
+
+
+ +
+
+
+ + To the top + +
+ + -

6. Dates can be selected in the future, starting with a specific date

+

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-example6').Zebra_DatePicker({
-                        // remember that the way you write down dates
-                        // depends on the value of the "format" property!
+                    $('#datepicker').Zebra_DatePicker({
                         direction: ['2012-08-01', false]
                     });
-
+
+
+
+ +
+
+
+ + To the top + +
-

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

+ + +

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-example7-start').Zebra_DatePicker({
+                    $('#datepicker').Zebra_DatePicker({
                         direction: true,
-                        pair: $('#datepicker-example7-end')
+                        disabled_dates: ['* * * 0,6']   // all days, all monts, all years as long
+                                                        // as the weekday is 0 or 6 (Sunday or Saturday)
                     });
+
+ +
+
+
+ +
+
+
+ + To the top + +
+ + - $('#datepicker-example7-end').Zebra_DatePicker({ +

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.
-

8. Set the format of the returned date:

+ 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-example8').Zebra_DatePicker({
+                    $('#datepicker').Zebra_DatePicker({
                         format: 'M d, Y'
                     });
-
+
+
+
+ +
+
+
+ + To the top + +
+ + -

9. Enable the time picker by setting time in the format:

+

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-example9').Zebra_DatePicker({
+                    $('#datepicker').Zebra_DatePicker({
                         format: 'Y-m-d H:i'
                     });
-
+
+
+
+ +
+
+
+ + To the top -

10. Show week number

+
+ + + +

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-example10').Zebra_DatePicker({
-                        show_week_number: 'Wk'
+                    $('#datepicker').Zebra_DatePicker({
+                        format: 'm Y',
                     });
-
+
+
+
+ +
+
+
+ + To the top -

11. 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!

+
+ + + +

11. Showing week numbers

+ +

+ Show the ISO 8601 week number. + 

-                    $('#datepicker-example11').Zebra_DatePicker({
-                        view: 'years'
+                    $('#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) -

12. Stop after month selection

+ 

-                    $('#datepicker-example12').Zebra_DatePicker({
-                        format: 'm Y'   //  note that because there's no day in the format
-                                        //  users will not be able to select a day!
+                    $('#datepicker').Zebra_DatePicker({
+                        view: 'years'
                     });
-
+
+
+
+ +
+
+
+ + To the top + +
-

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

+ + +

13. Custom classes

+ +

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

-                    $('#datepicker-example13').Zebra_DatePicker({
+                    $('#datepicker').Zebra_DatePicker({
                         disabled_dates: ['* * * 0,6'],
                         custom_classes: {
                             'myclass':  ['* * * 0,6']
@@ -194,17 +452,42 @@ 
Zebra_Datepicker Demos

                     });
-
+
+
+
+ +
+
+
+ + To the top + +
+ + + +

14. Handling the "onChange" event

-

14. 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:

+

+ 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:

+ + 
-                    $('#datepicker-example14').Zebra_DatePicker({
+                    $('#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"
@@ -243,36 +526,77 @@ 
Zebra_Datepicker Demos

                     });
-
+
+
+
+ +
+
+
-

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

+ 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-example15').Zebra_DatePicker({
+                    $('#datepicker').Zebra_DatePicker({
                         always_visible: $('#container')
                     });
-
-
+
+
+
+ +
+
+
+ +
+ + To the top -

16. 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:

+ + +

16. 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-example16" data-zdp_direction="1" data-zdp_disabled_dates='["* * * 0,6"]'>
+                    <input type="text" id="datepicker" data-zdp_direction="1" data-zdp_disabled_dates='["* * * 0,6"]'>
- 
-                    $('#datepicker-example16').Zebra_DatePicker();
+                    $('#datepicker').Zebra_DatePicker();
-
+
+
+
+ +
+
+
diff --git a/examples/metallic.html b/examples/metallic.html index bcbbc34..9b0cbda 100644 --- a/examples/metallic.html +++ b/examples/metallic.html @@ -12,7 +12,7 @@ - + @@ -51,142 +51,400 @@

Zebra_Datepicker Demos

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.

+
+ +
+
+ 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. Data attributes
+
+
- 
-                    $('#datepicker-example1').Zebra_DatePicker();
-
+
+ + -
+

1. Default initialization

-

2. Dates can be selected only in the future, starting one day in the future.

+

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

-                    $('#datepicker-example2').Zebra_DatePicker({
-                        direction: 1    // boolean true would've made the date picker future only
-                                        // but starting from today, rather than tomorrow
-                    });
+                    $('#datepicker').Zebra_DatePicker();
-
+
+
+
+ +
+
+
+ + To the top -

3. Dates can be selected only in the future, starting today. Also, Saturday and Sundays are always disabled.

+
+ + + +

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-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)
+                    $('#datepicker').Zebra_DatePicker({
+                        direction: 1
                     });
-
+
+
+
+ +
+
+
+ + To the top + +
+ + -

4. The selectable dates are in the interval starting tomorrow and ending 10 days from tomorrow.

+

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-example4').Zebra_DatePicker({
+                    $('#datepicker').Zebra_DatePicker({
                         direction: [1, 10]
                     });
-
+
+
+
+ +
+
+
+ + To the top -

5. Dates can be selected between 2 specific dates

+
+ + + +

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-example5').Zebra_DatePicker({
-                        // remember that the way you write down dates
-                        // depends on the value of the "format" property!
+                    $('#datepicker').Zebra_DatePicker({
                         direction: ['2012-08-01', '2012-08-12']
                     });
-
+
+
+
+ +
+
+
+ + To the top + +
+ + -

6. Dates can be selected in the future, starting with a specific date

+

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-example6').Zebra_DatePicker({
-                        // remember that the way you write down dates
-                        // depends on the value of the "format" property!
+                    $('#datepicker').Zebra_DatePicker({
                         direction: ['2012-08-01', false]
                     });
-
+
+
+
+ +
+
+
+ + To the top + +
-

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

+ + +

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-example7-start').Zebra_DatePicker({
+                    $('#datepicker').Zebra_DatePicker({
                         direction: true,
-                        pair: $('#datepicker-example7-end')
+                        disabled_dates: ['* * * 0,6']   // all days, all monts, all years as long
+                                                        // as the weekday is 0 or 6 (Sunday or Saturday)
                     });
+
+ +
+
+
+ +
+
+
+ + To the top + +
+ + - $('#datepicker-example7-end').Zebra_DatePicker({ +

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.
-

8. Set the format of the returned date:

+ 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-example8').Zebra_DatePicker({
+                    $('#datepicker').Zebra_DatePicker({
                         format: 'M d, Y'
                     });
-
+
+
+
+ +
+
+
+ + To the top + +
+ + -

9. Enable the time picker by setting time in the format:

+

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-example9').Zebra_DatePicker({
+                    $('#datepicker').Zebra_DatePicker({
                         format: 'Y-m-d H:i'
                     });
-
+
+
+
+ +
+
+
+ + To the top -

10. Show week number

+
+ + + +

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-example10').Zebra_DatePicker({
-                        show_week_number: 'Wk'
+                    $('#datepicker').Zebra_DatePicker({
+                        format: 'm Y',
                     });
-
+
+
+
+ +
+
+
+ + To the top -

11. 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!

+
+ + + +

11. Showing week numbers

+ +

+ Show the ISO 8601 week number. + 

-                    $('#datepicker-example11').Zebra_DatePicker({
-                        view: 'years'
+                    $('#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) -

12. Stop after month selection

+ 

-                    $('#datepicker-example12').Zebra_DatePicker({
-                        format: 'm Y'   //  note that because there's no day in the format
-                                        //  users will not be able to select a day!
+                    $('#datepicker').Zebra_DatePicker({
+                        view: 'years'
                     });
-
+
+
+
+ +
+
+
+ + To the top + +
-

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

+ + +

13. Custom classes

+ +

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

-                    $('#datepicker-example13').Zebra_DatePicker({
+                    $('#datepicker').Zebra_DatePicker({
                         disabled_dates: ['* * * 0,6'],
                         custom_classes: {
                             'myclass':  ['* * * 0,6']
@@ -194,17 +452,42 @@ 
Zebra_Datepicker Demos

                     });
-
+
+
+
+ +
+
+
+ + To the top + +
+ + + +

14. Handling the "onChange" event

-

14. 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:

+

+ 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:

+ + 
-                    $('#datepicker-example14').Zebra_DatePicker({
+                    $('#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"
@@ -243,36 +526,77 @@ 
Zebra_Datepicker Demos

                     });
-
+
+
+
+ +
+
+
-

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

+ 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-example15').Zebra_DatePicker({
+                    $('#datepicker').Zebra_DatePicker({
                         always_visible: $('#container')
                     });
-
-
+
+
+
+ +
+
+
+ +
+ + To the top -

16. 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:

+ + +

16. 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-example16" data-zdp_direction="1" data-zdp_disabled_dates='["* * * 0,6"]'>
+                    <input type="text" id="datepicker" data-zdp_direction="1" data-zdp_disabled_dates='["* * * 0,6"]'>
- 
-                    $('#datepicker-example16').Zebra_DatePicker();
+                    $('#datepicker').Zebra_DatePicker();
-
+
+
+
+ +
+
+