| '+gt+' | '+J.settings.lang_clear_date+' |
40 | Download 41 | View on GitHub 42 |
43 |See the examples with the date pickers having the default or the metallic theme.53 | 54 |
57 | Zebra Datepicker is a small, compact and highly configurable date picker / time picker 58 | jQuery plugin, meant to enrich forms by adding the date picker functionality to them. 59 | Zebra Datepicker is a user-friendly and highly configurable date and time picker jQuery plugin. 60 | Its lightweight design makes it easy to implement on any website, and it's compatible with 61 | all major browsers. With a range of customization options, you can easily tailor the plugin 62 | to suit your needs and enhance the functionality of your forms. Whether you're looking for 63 | a simple date time picker or a more advanced one, Zebra Datepicker has you covered. 64 |
65 |66 | This jQuery plugin will automatically add a calendar icon to the indicated input fields 67 | which, when clicked, will open the attached date picker. 68 | This jQuery date time picker plugin will automatically add a calendar icon to the indicated 69 | input fields which, when clicked, will open the attached date time picker. 70 |
71 |72 | Users can easily jump between months and years due to the date pickers intuitive interface. 73 | The selected date will be entered in the input field using the date format of choice, 74 | configurable in the date picker's options. 75 |
76 |
113 |
114 | Note that the Bootstrap theme does not actually require Twitter Bootstrap
115 | CSS framework to be present!
Its name comes from the fact that it borrows the color scheme from
116 | Twitter Bootstrap's default theme.
117 |
122 | All dates are selectable, no restrictions.
123 | There are a lot of things that can be configured!
124 |
127 | $('#datepicker').Zebra_DatePicker();
128 |
129 |
130 |
148 | All past dates, including today, are disabled.
149 | Read more about using the direction property.
150 |
153 | $('#datepicker').Zebra_DatePicker({
154 | direction: 1
155 | });
156 |
157 |
158 |
176 | The selectable dates are in the interval starting tomorrow and ending 10 days after that.
177 | Read more about using the direction property.
178 |
181 | $('#datepicker').Zebra_DatePicker({
182 | direction: [1, 10]
183 | });
184 |
185 |
186 |
204 | Dates in the direction property have to be written in the date picker's date format.
205 | Read more about using the direction property.
206 |
209 | $('#datepicker').Zebra_DatePicker({
210 | direction: ['2012-08-01', '2012-08-12']
211 | });
212 |
213 |
214 |
232 | Dates in the direction property have to be written in the date picker's date format.
233 | Read more about using the direction property.
234 |
237 | $('#datepicker').Zebra_DatePicker({
238 | direction: ['2012-08-01', false]
239 | });
240 |
241 |
242 |
260 | Allow future dates only including the current day.
261 | All past dates are disabled.
262 | Saturday and Sundays are disabled.
263 | Read more about using the direction property and about disabling dates.
264 |
267 | $('#datepicker').Zebra_DatePicker({
268 | direction: true,
269 | disabled_dates: ['* * * 0,6'] // all days, all months, all years as long
270 | // as the weekday is 0 or 6 (Sunday or Saturday)
271 | });
272 |
273 |
274 | The second date picker's starting date is the value of the first date picker + 1
292 | 293 |
294 | $('#datepicker-range-start').Zebra_DatePicker({
295 | direction: true,
296 | pair: $('#datepicker-range-end')
297 | });
298 |
299 | $('#datepicker-range-end').Zebra_DatePicker({
300 | direction: 1
301 | });
302 |
303 |
304 |
325 | Accepts the following characters for date formatting: d, D, j,
326 | l, N, w, S, F, m,
327 | M, n, Y, y, h, H,
328 | g, G, i, s, a, A,
329 | borrowing the syntax from PHP's date
330 | function.
331 |
332 | If format property contains time-related characters (g, G,
333 | h, H, i, s, a, A),
334 | the time picker will be automatically enabled.
335 |
336 | Note that when setting a date format without days (d, j), the users will
337 | be able to select only years and months, and when setting a format without months and days
338 | (F, m, M, n, t, d,
339 | j), the users will be able to select only years. Similarly, setting a format that
340 | contains only time-related characters, will result in users being able to only select time.
341 |
344 | $('#datepicker').Zebra_DatePicker({
345 | format: 'M d, Y'
346 | });
347 |
348 |
349 |
367 | If format property contains time-related characters (g, G,
368 | h, H, i, s, a, A),
369 | the time picker will be automatically enabled.
370 |
373 | $('#datepicker').Zebra_DatePicker({
374 | format: 'Y-m-d H:i'
375 | });
376 |
377 |
378 |
396 | The date picker will not show views that are not present in format.
397 |
398 | In the example below, the date picker will never get to the day view as there is no
399 | day-related character in the date's format.
400 |
403 | $('#datepicker').Zebra_DatePicker({
404 | format: 'm Y',
405 | });
406 |
407 |
408 | 426 | Show the ISO 8601 week number. 427 |
428 | 429 |
430 | $('#datepicker').Zebra_DatePicker({
431 | show_week_number: 'Wk'
432 | });
433 |
434 |
435 |
453 | Start with the years view, recommended for when users need to select their birth
454 | date.
455 |
456 | You can always switch between views by clicking on caption in the date picker's header, between
457 | the previous and next buttons!
458 |
459 | Note that the date picker is always cycling days -> months -> years when clicking
460 | on the date picker's header, and years -> months -> days when selecting dates (skipping
461 | the views that are missing because of the date's format)
462 |
463 | 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)
464 |
465 |
468 | $('#datepicker').Zebra_DatePicker({
469 | view: 'years'
470 | });
471 |
472 |
473 | 491 | Disable weekends and apply a custom class to Saturdays and Sundays. 492 |
493 | 494 |
495 | $('#datepicker').Zebra_DatePicker({
496 | disabled_dates: ['* * * 0,6'],
497 | custom_classes: {
498 | 'myclass': ['* * * 0,6']
499 | }
500 | });
501 |
502 |
503 |
521 | If a callback function is attached to the onChange event, it will be called whenever
522 | the user changes the view (days/months/years), as well as when the user navigates by clicking on
523 | the next/previous icons in any of the views.
524 |
The callback function takes two arguments:
527 | 528 |days, months or years)
531 |
539 | $('#datepicker').Zebra_DatePicker({
540 |
541 | // execute a function whenever the user changes the view (days/months/years),
542 | // as well as when the user navigates by clicking on the "next"/"previous"
543 | // icons in any of the views
544 | onChange: function(view, elements) {
545 |
546 | // on the "days" view...
547 | if (view == 'days') {
548 |
549 | // iterate through the active elements in the view
550 | elements.each(function() {
551 |
552 | // to simplify searching for particular dates, each element gets a
553 | // "date" data attribute which is the form of:
554 | // - YYYY-MM-DD for elements in the "days" view
555 | // - YYYY-MM for elements in the "months" view
556 | // - YYYY for elements in the "years" view
557 |
558 | // so, because we're on a "days" view,
559 | // let's find the 24th day using a regular expression
560 | // (notice that this will apply to every 24th day
561 | // of every month of every year)
562 | if ($(this).data('date').match(/\-24$/))
563 |
564 | // and highlight it!
565 | $(this).css({
566 | background: '#C40000',
567 | color: '#FFF'
568 | });
569 |
570 | });
571 |
572 | }
573 |
574 | }
575 | });
576 |
577 |
578 |
596 | Set the always_visible property's value to a jQuery element which will act as a
597 | container for the date picker.
Notice that in this case the element the date picker is attached
598 | to has no icon.
599 |
602 | $('#datepicker').Zebra_DatePicker({
603 | always_visible: $('#container')
604 | });
605 |
606 |
607 |
608 |
609 |
627 | Set the rtl property to true to have the current language drawn from
628 | right to left.
629 |
632 | $('#datepicker').Zebra_DatePicker({
633 | rtl: true
634 | });
635 |
636 |
637 |
655 | All the properties of the date picker can also be set via data-attributes.
656 |
657 | All you have to do is take any property described in the configuration section and
658 | prefix it with data-zdp_.
659 |
660 | Remember that if the value of the property is an array, you will have to use double
661 | quotes inside the square brackets and single quotes around the attribute, like in
662 | the example below:
663 |
666 | <input type="text" id="datepicker" data-zdp_direction="1" data-zdp_disabled_dates='["* * * 0,6"]'> 667 |668 |
669 | $('#datepicker').Zebra_DatePicker();
670 |
671 |
672 | copyright © 2011 - stefan gabos
685 | 686 |40 | Download 41 | View on GitHub 42 |
43 |See the examples with the date pickers having the metallic or the bootstrap theme.53 | 54 |
57 | Zebra Datepicker is a small, compact and highly configurable date picker / time picker 58 | jQuery plugin, meant to enrich forms by adding the date picker functionality to them. 59 | Zebra Datepicker is a user-friendly and highly configurable date and time picker jQuery plugin. 60 | Its lightweight design makes it easy to implement on any website, and it's compatible with 61 | all major browsers. With a range of customization options, you can easily tailor the plugin 62 | to suit your needs and enhance the functionality of your forms. Whether you're looking for 63 | a simple date time picker or a more advanced one, Zebra Datepicker has you covered. 64 |
65 |66 | This jQuery plugin will automatically add a calendar icon to the indicated input fields 67 | which, when clicked, will open the attached date picker. 68 | This jQuery date time picker plugin will automatically add a calendar icon to the indicated 69 | input fields which, when clicked, will open the attached date time picker. 70 |
71 |72 | Users can easily jump between months and years due to the date pickers intuitive interface. 73 | The selected date will be entered in the input field using the date format of choice, 74 | configurable in the date picker's options. 75 |
76 |
116 | All dates are selectable, no restrictions.
117 | There are a lot of things that can be configured!
118 |
121 | $('#datepicker').Zebra_DatePicker();
122 |
123 |
124 |
142 | All past dates, including today, are disabled.
143 | Read more about using the direction property.
144 |
147 | $('#datepicker').Zebra_DatePicker({
148 | direction: 1
149 | });
150 |
151 |
152 |
170 | The selectable dates are in the interval starting tomorrow and ending 10 days after that.
171 | Read more about using the direction property.
172 |
175 | $('#datepicker').Zebra_DatePicker({
176 | direction: [1, 10]
177 | });
178 |
179 |
180 |
198 | Dates in the direction property have to be written in the date picker's date format.
199 | Read more about using the direction property.
200 |
203 | $('#datepicker').Zebra_DatePicker({
204 | direction: ['2012-08-01', '2012-08-12']
205 | });
206 |
207 |
208 |
226 | Dates in the direction property have to be written in the date picker's date format.
227 | Read more about using the direction property.
228 |
231 | $('#datepicker').Zebra_DatePicker({
232 | direction: ['2012-08-01', false]
233 | });
234 |
235 |
236 |
254 | Allow future dates only including the current day.
255 | All past dates are disabled.
256 | Saturday and Sundays are disabled.
257 | Read more about using the direction property and about disabling dates.
258 |
261 | $('#datepicker').Zebra_DatePicker({
262 | direction: true,
263 | disabled_dates: ['* * * 0,6'] // all days, all months, all years as long
264 | // as the weekday is 0 or 6 (Sunday or Saturday)
265 | });
266 |
267 |
268 | The second date picker's starting date is the value of the first date picker + 1
286 | 287 |
288 | $('#datepicker-range-start').Zebra_DatePicker({
289 | direction: true,
290 | pair: $('#datepicker-range-end')
291 | });
292 |
293 | $('#datepicker-range-end').Zebra_DatePicker({
294 | direction: 1
295 | });
296 |
297 |
298 |
319 | Accepts the following characters for date formatting: d, D, j,
320 | l, N, w, S, F, m,
321 | M, n, Y, y, h, H,
322 | g, G, i, s, a, A,
323 | borrowing the syntax from PHP's date
324 | function.
325 |
326 | If format property contains time-related characters (g, G,
327 | h, H, i, s, a, A),
328 | the time picker will be automatically enabled.
329 |
330 | Note that when setting a date format without days (d, j), the users will
331 | be able to select only years and months, and when setting a format without months and days
332 | (F, m, M, n, t, d,
333 | j), the users will be able to select only years. Similarly, setting a format that
334 | contains only time-related characters, will result in users being able to only select time.
335 |
338 | $('#datepicker').Zebra_DatePicker({
339 | format: 'M d, Y'
340 | });
341 |
342 |
343 |
361 | If format property contains time-related characters (g, G,
362 | h, H, i, s, a, A),
363 | the time picker will be automatically enabled.
364 |
367 | $('#datepicker').Zebra_DatePicker({
368 | format: 'Y-m-d H:i'
369 | });
370 |
371 |
372 |
390 | The date picker will not show views that are not present in format.
391 |
392 | In the example below, the date picker will never get to the day view as there is no
393 | day-related character in the date's format.
394 |
397 | $('#datepicker').Zebra_DatePicker({
398 | format: 'm Y',
399 | });
400 |
401 |
402 | 420 | Show the ISO 8601 week number. 421 |
422 | 423 |
424 | $('#datepicker').Zebra_DatePicker({
425 | show_week_number: 'Wk'
426 | });
427 |
428 |
429 |
447 | Start with the years view, recommended for when users need to select their birth
448 | date.
449 |
450 | You can always switch between views by clicking on caption in the date picker's header, between
451 | the previous and next buttons!
452 |
453 | Note that the date picker is always cycling days -> months -> years when clicking
454 | on the date picker's header, and years -> months -> days when selecting dates (skipping
455 | the views that are missing because of the date's format)
456 |
457 | 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)
458 |
459 |
462 | $('#datepicker').Zebra_DatePicker({
463 | view: 'years'
464 | });
465 |
466 |
467 | 485 | Disable weekends and apply a custom class to Saturdays and Sundays. 486 |
487 | 488 |
489 | $('#datepicker').Zebra_DatePicker({
490 | disabled_dates: ['* * * 0,6'],
491 | custom_classes: {
492 | 'myclass': ['* * * 0,6']
493 | }
494 | });
495 |
496 |
497 |
515 | If a callback function is attached to the onChange event, it will be called whenever
516 | the user changes the view (days/months/years), as well as when the user navigates by clicking on
517 | the next/previous icons in any of the views.
518 |
The callback function takes two arguments:
521 | 522 |days, months or years)
525 |
533 | $('#datepicker').Zebra_DatePicker({
534 |
535 | // execute a function whenever the user changes the view (days/months/years),
536 | // as well as when the user navigates by clicking on the "next"/"previous"
537 | // icons in any of the views
538 | onChange: function(view, elements) {
539 |
540 | // on the "days" view...
541 | if (view == 'days') {
542 |
543 | // iterate through the active elements in the view
544 | elements.each(function() {
545 |
546 | // to simplify searching for particular dates, each element gets a
547 | // "date" data attribute which is the form of:
548 | // - YYYY-MM-DD for elements in the "days" view
549 | // - YYYY-MM for elements in the "months" view
550 | // - YYYY for elements in the "years" view
551 |
552 | // so, because we're on a "days" view,
553 | // let's find the 24th day using a regular expression
554 | // (notice that this will apply to every 24th day
555 | // of every month of every year)
556 | if ($(this).data('date').match(/\-24$/))
557 |
558 | // and highlight it!
559 | $(this).css({
560 | background: '#C40000',
561 | color: '#FFF'
562 | });
563 |
564 | });
565 |
566 | }
567 |
568 | }
569 | });
570 |
571 |
572 |
590 | Set the always_visible property's value to a jQuery element which will act as a
591 | container for the date picker.
Notice that in this case the element the date picker is attached
592 | to has no icon.
593 |
596 | $('#datepicker').Zebra_DatePicker({
597 | always_visible: $('#container')
598 | });
599 |
600 |
601 |
602 |
603 |
621 | Set the rtl property to true to have the current language drawn from
622 | right to left.
623 |
626 | $('#datepicker').Zebra_DatePicker({
627 | rtl: true
628 | });
629 |
630 |
631 |
649 | All the properties of the date picker can also be set via data-attributes.
650 |
651 | All you have to do is take any property described in the configuration section and
652 | prefix it with data-zdp_.
653 |
654 | Remember that if the value of the property is an array, you will have to use double
655 | quotes inside the square brackets and single quotes around the attribute, like in
656 | the example below:
657 |
660 | <input type="text" id="datepicker" data-zdp_direction="1" data-zdp_disabled_dates='["* * * 0,6"]'> 661 |662 |
663 | $('#datepicker').Zebra_DatePicker();
664 |
665 |
666 | copyright © 2011 - stefan gabos
679 | 680 |40 | Download 41 | View on GitHub 42 |
43 |See the examples with the date pickers having the default or the bootstrap theme.53 | 54 |
57 | Zebra Datepicker is a small, compact and highly configurable date picker / time picker 58 | jQuery plugin, meant to enrich forms by adding the date picker functionality to them. 59 | Zebra Datepicker is a user-friendly and highly configurable date and time picker jQuery plugin. 60 | Its lightweight design makes it easy to implement on any website, and it's compatible with 61 | all major browsers. With a range of customization options, you can easily tailor the plugin 62 | to suit your needs and enhance the functionality of your forms. Whether you're looking for 63 | a simple date time picker or a more advanced one, Zebra Datepicker has you covered. 64 |
65 |66 | This jQuery plugin will automatically add a calendar icon to the indicated input fields 67 | which, when clicked, will open the attached date picker. 68 | This jQuery date time picker plugin will automatically add a calendar icon to the indicated 69 | input fields which, when clicked, will open the attached date time picker. 70 |
71 |72 | Users can easily jump between months and years due to the date pickers intuitive interface. 73 | The selected date will be entered in the input field using the date format of choice, 74 | configurable in the date picker's options. 75 |
76 |
116 | All dates are selectable, no restrictions.
117 | There are a lot of things that can be configured!
118 |
121 | $('#datepicker').Zebra_DatePicker();
122 |
123 |
124 |
142 | All past dates, including today, are disabled.
143 | Read more about using the direction property.
144 |
147 | $('#datepicker').Zebra_DatePicker({
148 | direction: 1
149 | });
150 |
151 |
152 |
170 | The selectable dates are in the interval starting tomorrow and ending 10 days after that.
171 | Read more about using the direction property.
172 |
175 | $('#datepicker').Zebra_DatePicker({
176 | direction: [1, 10]
177 | });
178 |
179 |
180 |
198 | Dates in the direction property have to be written in the date picker's date format.
199 | Read more about using the direction property.
200 |
203 | $('#datepicker').Zebra_DatePicker({
204 | direction: ['2012-08-01', '2012-08-12']
205 | });
206 |
207 |
208 |
226 | Dates in the direction property have to be written in the date picker's date format.
227 | Read more about using the direction property.
228 |
231 | $('#datepicker').Zebra_DatePicker({
232 | direction: ['2012-08-01', false]
233 | });
234 |
235 |
236 |
254 | Allow future dates only including the current day.
255 | All past dates are disabled.
256 | Saturday and Sundays are disabled.
257 | Read more about using the direction property and about disabling dates.
258 |
261 | $('#datepicker').Zebra_DatePicker({
262 | direction: true,
263 | disabled_dates: ['* * * 0,6'] // all days, all months, all years as long
264 | // as the weekday is 0 or 6 (Sunday or Saturday)
265 | });
266 |
267 |
268 | The second date picker's starting date is the value of the first date picker + 1
286 | 287 |
288 | $('#datepicker-range-start').Zebra_DatePicker({
289 | direction: true,
290 | pair: $('#datepicker-range-end')
291 | });
292 |
293 | $('#datepicker-range-end').Zebra_DatePicker({
294 | direction: 1
295 | });
296 |
297 |
298 |
319 | Accepts the following characters for date formatting: d, D, j,
320 | l, N, w, S, F, m,
321 | M, n, Y, y, h, H,
322 | g, G, i, s, a, A,
323 | borrowing the syntax from PHP's date
324 | function.
325 |
326 | If format property contains time-related characters (g, G,
327 | h, H, i, s, a, A),
328 | the time picker will be automatically enabled.
329 |
330 | Note that when setting a date format without days (d, j), the users will
331 | be able to select only years and months, and when setting a format without months and days
332 | (F, m, M, n, t, d,
333 | j), the users will be able to select only years. Similarly, setting a format that
334 | contains only time-related characters, will result in users being able to only select time.
335 |
338 | $('#datepicker').Zebra_DatePicker({
339 | format: 'M d, Y'
340 | });
341 |
342 |
343 |
361 | If format property contains time-related characters (g, G,
362 | h, H, i, s, a, A),
363 | the time picker will be automatically enabled.
364 |
367 | $('#datepicker').Zebra_DatePicker({
368 | format: 'Y-m-d H:i'
369 | });
370 |
371 |
372 |
390 | The date picker will not show views that are not present in format.
391 |
392 | In the example below, the date picker will never get to the day view as there is no
393 | day-related character in the date's format.
394 |
397 | $('#datepicker').Zebra_DatePicker({
398 | format: 'm Y',
399 | });
400 |
401 |
402 | 420 | Show the ISO 8601 week number. 421 |
422 | 423 |
424 | $('#datepicker').Zebra_DatePicker({
425 | show_week_number: 'Wk'
426 | });
427 |
428 |
429 |
447 | Start with the years view, recommended for when users need to select their birth
448 | date.
449 |
450 | You can always switch between views by clicking on caption in the date picker's header, between
451 | the previous and next buttons!
452 |
453 | Note that the date picker is always cycling days -> months -> years when clicking
454 | on the date picker's header, and years -> months -> days when selecting dates (skipping
455 | the views that are missing because of the date's format)
456 |
457 | 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)
458 |
459 |
462 | $('#datepicker').Zebra_DatePicker({
463 | view: 'years'
464 | });
465 |
466 |
467 | 485 | Disable weekends and apply a custom class to Saturdays and Sundays. 486 |
487 | 488 |
489 | $('#datepicker').Zebra_DatePicker({
490 | disabled_dates: ['* * * 0,6'],
491 | custom_classes: {
492 | 'myclass': ['* * * 0,6']
493 | }
494 | });
495 |
496 |
497 |
515 | If a callback function is attached to the onChange event, it will be called whenever
516 | the user changes the view (days/months/years), as well as when the user navigates by clicking on
517 | the next/previous icons in any of the views.
518 |
The callback function takes two arguments:
521 | 522 |days, months or years)
525 |
533 | $('#datepicker').Zebra_DatePicker({
534 |
535 | // execute a function whenever the user changes the view (days/months/years),
536 | // as well as when the user navigates by clicking on the "next"/"previous"
537 | // icons in any of the views
538 | onChange: function(view, elements) {
539 |
540 | // on the "days" view...
541 | if (view == 'days') {
542 |
543 | // iterate through the active elements in the view
544 | elements.each(function() {
545 |
546 | // to simplify searching for particular dates, each element gets a
547 | // "date" data attribute which is the form of:
548 | // - YYYY-MM-DD for elements in the "days" view
549 | // - YYYY-MM for elements in the "months" view
550 | // - YYYY for elements in the "years" view
551 |
552 | // so, because we're on a "days" view,
553 | // let's find the 24th day using a regular expression
554 | // (notice that this will apply to every 24th day
555 | // of every month of every year)
556 | if ($(this).data('date').match(/\-24$/))
557 |
558 | // and highlight it!
559 | $(this).css({
560 | background: '#C40000',
561 | color: '#FFF'
562 | });
563 |
564 | });
565 |
566 | }
567 |
568 | }
569 | });
570 |
571 |
572 |
590 | Set the always_visible property's value to a jQuery element which will act as a
591 | container for the date picker.
Notice that in this case the element the date picker is attached
592 | to has no icon.
593 |
596 | $('#datepicker').Zebra_DatePicker({
597 | always_visible: $('#container')
598 | });
599 |
600 |
601 |
602 |
603 |
621 | Set the rtl property to true to have the current language drawn from
622 | right to left.
623 |
626 | $('#datepicker').Zebra_DatePicker({
627 | rtl: true
628 | });
629 |
630 |
631 |
649 | All the properties of the date picker can also be set via data-attributes.
650 |
651 | All you have to do is take any property described in the configuration section and
652 | prefix it with data-zdp_.
653 |
654 | Remember that if the value of the property is an array, you will have to use double
655 | quotes inside the square brackets and single quotes around the attribute, like in
656 | the example below:
657 |
660 | <input type="text" id="datepicker" data-zdp_direction="1" data-zdp_disabled_dates='["* * * 0,6"]'> 661 |662 |
663 | $('#datepicker').Zebra_DatePicker();
664 |
665 |
666 | copyright © 2011 - stefan gabos
679 | 680 |