{"id":13404140,"url":"https://github.com/stefangabos/Zebra_Datepicker","last_synced_at":"2025-03-14T09:30:30.703Z","repository":{"id":417283,"uuid":"9604495","full_name":"stefangabos/Zebra_Datepicker","owner":"stefangabos","description":"A super-lightweight, highly configurable, cross-browser date time picker jQuery plugin","archived":false,"fork":false,"pushed_at":"2024-10-14T10:09:10.000Z","size":2112,"stargazers_count":398,"open_issues_count":7,"forks_count":184,"subscribers_count":21,"default_branch":"master","last_synced_at":"2024-10-15T22:21:05.767Z","etag":null,"topics":["calendar","cross-browser","date","datepicker","datetime","datetime-picker","jquery","picker-jquery-plugin","pickers","timepicker","zebra-datepicker"],"latest_commit_sha":null,"homepage":"https://stefangabos.github.io/Zebra_Datepicker/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stefangabos.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"stefangabos","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2013-04-22T17:18:23.000Z","updated_at":"2024-10-14T10:09:14.000Z","dependencies_parsed_at":"2023-01-14T11:00:26.943Z","dependency_job_id":"f614b7ee-1181-4044-9de7-2d345ddca2cf","html_url":"https://github.com/stefangabos/Zebra_Datepicker","commit_stats":{"total_commits":517,"total_committers":16,"mean_commits":32.3125,"dds":"0.048355899419729176","last_synced_commit":"3d68a21784f5975fe8e2155763fd07db808fb0c9"},"previous_names":[],"tags_count":55,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefangabos%2FZebra_Datepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefangabos%2FZebra_Datepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefangabos%2FZebra_Datepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefangabos%2FZebra_Datepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stefangabos","download_url":"https://codeload.github.com/stefangabos/Zebra_Datepicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221453985,"owners_count":16824573,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["calendar","cross-browser","date","datepicker","datetime","datetime-picker","jquery","picker-jquery-plugin","pickers","timepicker","zebra-datepicker"],"created_at":"2024-07-30T19:01:39.629Z","updated_at":"2024-10-25T19:30:15.333Z","avatar_url":"https://github.com/stefangabos.png","language":"JavaScript","funding_links":["https://github.com/sponsors/stefangabos","https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=QTQH936BQDE7A"],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cimg src=\"https://raw.githubusercontent.com/stefangabos/zebrajs/master/docs/images/logo.png\" alt=\"zebrajs\" align=\"right\"\u003e\n\n# Zebra Datepicker \u0026nbsp;[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=A+super-lightweight,+highly+configurable,+cross-browser+date/time+picker+jQuery+plugin\u0026url=https://github.com/stefangabos/Zebra_Datepicker\u0026via=stefangabos\u0026hashtags=jquery,datepicker,timepicker,calendar,javascript)\n\n*A super-lightweight, highly configurable, cross-browser date time picker jQuery plugin*\n\n[![npm](https://img.shields.io/npm/v/zebra_datepicker.svg)](https://www.npmjs.com/package/zebra_datepicker) [![Total](https://img.shields.io/npm/dt/zebra_datepicker.svg)](https://www.npmjs.com/package/zebra_datepicker) [![Monthly](https://img.shields.io/npm/dm/zebra_datepicker.svg)](https://www.npmjs.com/package/zebra_datepicker) [![JSDelivr](https://data.jsdelivr.com/v1/package/npm/zebra_datepicker/badge?style=rounded)](https://www.jsdelivr.com/package/npm/zebra_datepicker) [![License](https://img.shields.io/npm/l/zebra_datepicker.svg)](https://github.com/stefangabos/Zebra_Datepicker/blob/master/LICENSE.md)\n\nEnhance your forms with the powerful and highly-configurable Zebra Datepicker date time picker jQuery plugin. This date time picker adds an intuitive calendar interface for selecting dates and times, complete with a convenient month and year jump feature. The selected date will be formatted and entered into the input field according to your specified options. Simply attach the plugin to your input fields and let the calendar icon do the rest.\n\n## Features\n\n - it is small – it weighs around 30KB minified (9.1KB gzipped) offering the best ratio of features per used bytes\n - it is both a date picker as well as a time picker\n - it's cross-browser – works in every major browser; works also in Internet Explorer 6 (as long as you are using a version of the date picker that is less than 2.0.0)!\n - has a default color scheme that blends-in well with almost any design, and it's easily customizable through the well-organized CSS file; two additional themes are included, one of them being for use with \u003ca href=\"https://getbootstrap.com/\"\u003eTwitter Bootstrap\u003c/a\u003e\n - offers an intuitive interface allowing for easy navigation through months and years\n - offers an intuitive mechanism for disabling dates and date ranges using a syntax similar to cron's syntax\n - supports defining of custom weekend days for countries that don't have the weekend on Saturday and Sunday\n - supports most of date formats you can think of, borrowing the syntax of PHP's date function\n - supports all sorts of combinations for starting and ending dates\n - date pickers can be \"paired\" – where one or more date pickers will use the value of another date picker as starting date\n - supports internationalization\n - supports RTL languages\n - works by automatically attaching a small calendar icon to the indicated input fields which displays the attached date picker when clicked.\n - it's compatible with AMD and CommonJS\n\n[![Themes](https://raw.github.com/stefangabos/Zebra_Datepicker/master/examples/themes.png)](https://stefangabos.github.io/Zebra_Datepicker/)\n\n## 🎂 Support the development of this project\n\nYour support is greatly appreciated and it keeps me motivated continue working on open source projects. If you enjoy this project please star it by clicking on the star button at the top of the page. If you're feeling generous, you can also buy me a coffee through PayPal or become a sponsor.\n**Thank you for your support!** 🎉\n\u003cbr\u003e\u003cbr\u003e\n\n[\u003cimg src=\"https://img.shields.io/github/stars/stefangabos/zebra_datepicker?color=green\u0026label=star%20it%20on%20GitHub\" width=\"132\" height=\"20\" alt=\"Star it on GitHub\"\u003e](https://github.com/stefangabos/Zebra_Datepicker) [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=QTQH936BQDE7A) [\u003cimg src=\"https://img.shields.io/badge/-Sponsor-fafbfc?logo=GitHub%20Sponsors\"\u003e](https://github.com/sponsors/stefangabos)\n\n## Demo\n\nSee the [demos](https://stefangabos.github.io/Zebra_Datepicker/)\n\n## Requirements\n\nZebra Datepicker has no dependencies other than jQuery 1.7.0+ and requires that the page you are using the plugin on to have a strict doctype like:\n\n```html\n\u003c!doctype html\u003e\n```\n\n## Installation\n\nZebra Datepicker is available as a [npm package](https://www.npmjs.com/package/zebra_datepicker). To install it use:\n\n```bash\n# the \"--save\" argument adds the plugin as a dependency in packages.json\nnpm install zebra_datepicker --save\n```\n\n## How to use\n\nFirst, load jQuery from a CDN and provide a fallback to a local source like:\n\n```html\n\u003cscript src=\"https://code.jquery.com/jquery-3.5.0.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003ewindow.jQuery || document.write('\u003cscript src=\"path/to/jquery-3.5.0.js\"\u003e\u003c\\/script\u003e')\u003c/script\u003e\n```\n\nLoad the Zebra Datepicker jQuery plugin:\n\n```html\n\u003cscript src=\"path/to/zebra_datepicker.min.js\"\u003e\u003c/script\u003e\n```\n\nAlternatively, you can load Zebra Datepicker from [JSDelivr CDN](https://www.jsdelivr.com/package/npm/zebra_datepicker) like this:\n```html\n\u003c!-- for the most recent version, not recommended in production --\u003e\n\u003cscript\n  src=\"https://cdn.jsdelivr.net/npm/zebra_datepicker@latest/dist/zebra_datepicker.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- for a specific version --\u003e\n\u003cscript\n  src=\"https://cdn.jsdelivr.net/npm/zebra_datepicker@1.9.13/dist/zebra_datepicker.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- replacing \"min\" with \"src\" will serve you the non-compressed version --\u003e\n```\n\nLoad the style sheet file from a local source\n\n```html\n\u003clink rel=\"stylesheet\" href=\"path/to/theme/zebra_datepicker.min.css\"\u003e\n```\n\n...or from [JSDelivr CDN](https://www.jsdelivr.com/package/npm/zebra_datepicker)\n\n```html\n\u003c!-- for the most recent version of the \"default\" theme --\u003e\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/zebra_datepicker@latest/dist/css/default/zebra_datepicker.min.css\"\u003e\n\n\u003c!-- for the most recent version of the \"bootstrap\" theme --\u003e\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/zebra_datepicker@latest/dist/css/bootstrap/zebra_datepicker.min.css\"\u003e\n\n\u003c!-- replacing \"min\" with \"src\" will serve you the non-compressed version --\u003e\n```\n\n\u003e Zebra Datepicker is also available on [cdnjs](https://cdnjs.com/libraries/Zebra_datepicker), one of the most famous free and public web front-end CDN services\n\nNow, within the DOM-ready event, attach the Zebra Datepicker plugin to a `\u003cinput type=\"text\"\u003e` control.\n\n```javascript\n$(document).ready(function() {\n\n    // assuming the controls you want to attach the plugin to\n    // have the \"datepicker\" class set\n    $('input.datepicker').Zebra_DatePicker();\n\n});\n```\n\nThis will attach a calendar and to the specified element(s). Clicking the icon, will make the date picker visible.\n\nTo get a reference to the instance of Zebra DatePicker attached to an element do:\n\n```javascript\nvar datepicker = $('selector').data('Zebra_DatePicker');\n```\n\n## Configuration options\n\n## Properties\n\n\u003e All parameters are optional.\n\n*Note that any of the properties below may also be set via data attributes. To do this you have prefix the name of the property you want to set 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 [example](https://stefangabos.github.io/Zebra_Datepicker/#data-attributes).*\n\n\u003ctable width\"100%\"\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n        \u003cth\u003eProperty\u003c/th\u003e\n        \u003cth\u003eType\u003c/th\u003e\n        \u003cth\u003eDefault\u003c/th\u003e\n        \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"always_visible\"\u003e\u003c/a\u003e\u003cstrong\u003ealways_visible\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Should the date picker be always visible?\u003cbr\u003e\n            Setting this property to a jQuery element will result in the date picker being always visible, the indicated element acting as the date picker's container;\u003cbr\u003e\u003cbr\u003e\n            Setting this property to boolean \u003ccode\u003etrue\u003c/code\u003e will result in the date picker not closing when selecting a date but only when the user clicks outside the date picker.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"container\"\u003e\u003c/a\u003e\u003cstrong\u003econtainer\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003ejQuery\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003e$('body')\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            By default, the date picker is injected into the document's \u003ccode\u003e\u0026lt;body\u0026gt;\u003c/code\u003e element; use this property to tell the library to inject the date picker into a custom element - useful when you want the date picker to open at a specific position.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"container\"\u003e\u003c/a\u003e\u003cstrong\u003ecurrent_date\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            By default, the current date (the value of \u003cem\u003eToday\u003c/em\u003e) is taken from the system where the date picker is run on.\u003cbr\u003eSet this to a date in the format of \u003ccode\u003eYYYY-MM-DD\u003c/code\u003e to use a different date.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"custom_classes\"\u003e\u003c/a\u003e\u003cstrong\u003ecustom_classes\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003eArray\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Dates that should have custom classes applied to them.\u003cbr\u003e\n            An object in the form of\u003cbr\u003e\u003cbr\u003e\n            \u003ccode\u003e{\u003c/code\u003e\u003cbr\u003e\n            \u003ccode\u003e'myclass1': [dates_to_apply_the_custom_class_to],\u003c/code\u003e\u003cbr\u003e\n            \u003ccode\u003e'myclass2': [dates_to_apply_the_custom_class_to]\u003c/code\u003e\u003cbr\u003e\n            \u003ccode\u003e}\u003c/code\u003e\u003cbr\u003e\u003cbr\u003e\n            ...where \u003cem\u003edates_to_apply_the_custom_class_to\u003c/em\u003e is an array of dates in the same format as required for the \u003ccode\u003edisabled_dates\u003c/code\u003e property.\u003cbr\u003e\u003cbr\u003e\n            Custom classes will be applied \u003cstrong\u003eonly in the day picker view\u003c/strong\u003e and not on month/year views! Also note that the class name will have the \u003cem\u003e\"_disabled\"\u003c/em\u003e suffix added if the day the class is applied to is disabled.\u003cbr\u003e\u003cbr\u003e\n            In order for the styles in your custom classes to be applied, make sure you are using the following syntax:\u003cbr\u003e\u003cbr\u003e\n            \u003ccode\u003e.Zebra_DatePicker .dp_daypicker td.myclass1 { .. }\u003c/code\u003e\u003cbr\u003e\n            \u003ccode\u003e.Zebra_DatePicker .dp_daypicker td.myclass1_disabled { .. }\u003c/code\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"days\"\u003e\u003c/a\u003e\u003cstrong\u003edays\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003eArray\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003e['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Days of the week, Sunday to Saturday.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"days_abbr\"\u003e\u003c/a\u003e\u003cstrong\u003edays_abbr\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Abbreviated names of days.\u003cbr\u003e\u003cbr\u003e\n            By default, the abbreviated name of a day consists of the first 2 letters from the day's full name. While this is common for most languages, there are also exceptions for languages like Thai, Loa, Myanmar, etc. where this is not correct. For these cases, specify an array with the abbreviations to be used for the 7 days of the week; leave it \u003ccode\u003efalse\u003c/code\u003e to use the first 2 letters of a day's name as the abbreviation.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"default_position\"\u003e\u003c/a\u003e\u003cstrong\u003edefault_position\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003estring\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003e'icon_top_right'\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            The position of the date picker relative to the element it is attached to, or relative to the date picker icon.\u003cbr\u003e\u003cbr\u003e\n            Possible values are\u003cbr\u003e\u003cbr\u003e\n            \u003cul\u003e\n                \u003cli\u003eelement_top_right\u003c/li\u003e\n                \u003cli\u003eelement_bottom_right\u003c/li\u003e\n                \u003cli\u003eelement_top_left\u003c/li\u003e\n                \u003cli\u003eelement_bottom_left\u003c/li\u003e\n                \u003cli\u003eicon_top_right\u003c/li\u003e\n                \u003cli\u003eicon_bottom_right\u003c/li\u003e\n                \u003cli\u003eicon_top_left\u003c/li\u003e\n                \u003cli\u003eicon_bottom_left\u003c/li\u003e\n            \u003c/ul\u003e\n            If the icon is disabled, the positioning is done relative to the element!\u003cbr\u003e\u003cbr\u003e\n            Also note that, regardless of this setting, the date picker's position will be automatically adjusted to always fit in the viewport, if needed.\u003cbr\u003e\u003cbr\u003e\n            See also the \u003ccode\u003eoffset\u003c/code\u003e property which also has an effect on the date picker's position.\u003cbr\u003e\u003cbr\u003e\n            Default is \u003ccode\u003eicon_top_right\u003c/code\u003e meaning that the date picker will be positioned at the top right of the icon.\u003cbr\u003e\u003cbr\u003e\n            \u003cblockquote\u003ePrior to version 2.0.1 the possible values were \"above\" and \"below\". For backward compatiblity these values are still valid and translate to \"icon_top_right\" and \"icon_bottom_right\" respectively.\u003c/blockquote\u003e\u003cbr\u003e\u003cbr\u003e\n            \u003cblockquote\u003eThis property will be ignored if \u003ccode\u003ealways_visible\u003c/code\u003e or \u003ccode\u003econtainer\u003c/code\u003e properties are set!\u003c/blockquote\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"direction\"\u003e\u003c/a\u003e\u003cstrong\u003edirection\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003e0\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003eDirection of the calendar\u003cbr\u003e\u003cbr\u003e\n            \u003cul\u003e\n                \u003cli\u003e\u003ccode\u003en\u003c/code\u003e (a positive integer) creates a future-only calendar beginning at n days after the reference date\u003csup\u003e\u003ca href=\"#reference_date\"\u003e1\u003c/a\u003e\u003c/sup\u003e\u003c/li\u003e\n                \u003cli\u003e\u003ccode\u003e-n\u003c/code\u003e (a negative integer) creates a past-only calendar ending n days before the reference date\u003c/li\u003e\n                \u003cli\u003e\u003ccode\u003e0\u003c/code\u003e creates a calendar with no restrictions\u003c/li\u003e\n                \u003cli\u003eboolean \u003ccode\u003etrue\u003c/code\u003e creates a future-only calendar starting with the reference date\u003c/li\u003e\n                \u003cli\u003eboolean \u003ccode\u003efalse\u003c/code\u003e for a past-only calendar ending on the reference date\u003c/li\u003e\n            \u003c/ul\u003e\n            You may also set this property to an array with two elements in the following combinations:\u003cbr\u003e\u003cbr\u003e\n            \u003cul\u003e\n                \u003cli\u003efirst item is boolean \u003ccode\u003etrue\u003c/code\u003e (calendar starts on the reference date), a \u003ccode\u003epositive integer\u003c/code\u003e (calendar starts n days after the reference date), or a \u003ccode\u003evalid date\u003c/code\u003e given in the format defined by the \u003ccode\u003eformat\u003c/code\u003e attribute (calendar starts at the specified date), and the second item is boolean \u003ccode\u003efalse\u003c/code\u003e (the calendar has no ending date), a \u003ccode\u003epositive integer\u003c/code\u003e (calendar ends n days after the starting date), or a \u003ccode\u003evalid date\u003c/code\u003e given in the format defined by the \u003ccode\u003eformat\u003c/code\u003e attribute and which occurs after the starting date (calendar ends at the specified date)\u003cbr\u003e\u003cbr\u003e\u003c/li\u003e\n                \u003cli\u003efirst item is boolean \u003ccode\u003efalse\u003c/code\u003e (calendar ends on the reference date), a \u003ccode\u003enegative integer\u003c/code\u003e (calendar ends n days before the reference date), or a \u003ccode\u003evalid date\u003c/code\u003e given in the format defined by the \u003ccode\u003eformat\u003c/code\u003e attribute (calendar ends at the specified date), and the second item is a \u003ccode\u003epositive integer\u003c/code\u003e (calendar ends n days before the ending date), or a \u003ccode\u003evalid date\u003c/code\u003e given in the format defined by the \u003ccode\u003eformat\u003c/code\u003e attribute and which occurs before the starting date (calendar starts at the specified date)\u003c/li\u003e\n            \u003c/ul\u003e\n            Examples:\u003cbr\u003e\u003cbr\u003e\n            \u003ccode\u003e[1, 7]\u003c/code\u003e calendar starts tomorrow and ends seven days after that\u003cbr\u003e\n            \u003ccode\u003e[true, 7]\u003c/code\u003e calendar starts on the \u003cem\u003ereference date\u003c/em\u003e and ends seven days after that\u003cbr\u003e\n            \u003ccode\u003e['2013-01-01', false]\u003c/code\u003e calendar starts on January 1st 2013 and has no ending date (\"format\" is YYYY-MM-DD)\u003cbr\u003e\n            \u003ccode\u003e[false, '2012-01-01']\u003c/code\u003e calendar ends on the \u003cem\u003ereference date\u003c/em\u003e and starts on January 1st 2012 (\"format\" is YYYY-MM-DD)\u003cbr\u003e\u003cbr\u003e\n            \u003cblockquote\u003eNote that \u003ccode\u003edisabled_dates\u003c/code\u003e property will still apply!\u003c/blockquote\u003e\u003cbr\u003e\n            \u003cblockquote\u003e\u003ca name=\"reference_date\"\u003e\u003c/a\u003eThe \u003ccode\u003ereference date\u003c/code\u003e is the current date unless the date picker is the \u003ccode\u003epair\u003c/code\u003e of another date picker, case in which the reference date is the date selected in that date picker.\u003c/blockquote\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"disable_time_picker\"\u003e\u003c/a\u003e\u003cstrong\u003edisable_time_picker\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003eboolean\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003eBy default, setting a format that also involves time (\u003ccode\u003eh\u003c/code\u003e, \u003ccode\u003eH\u003c/code\u003e, \u003ccode\u003eg\u003c/code\u003e, \u003ccode\u003eG\u003c/code\u003e, \u003ccode\u003ei\u003c/code\u003e, \u003ccode\u003es\u003c/code\u003e, \u003ccode\u003ea\u003c/code\u003e, \u003ccode\u003eA\u003c/code\u003e) will automatically enable the time picker. If you want to use a format that involves time but you don't want the time picker, set this property to \u003ccode\u003etrue\u003c/code\u003e.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"disabled_dates\"\u003e\u003c/a\u003e\u003cstrong\u003edisabled_dates\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003efalse\u003c/code\u003e\u003cbr\u003e\u003csmall\u003eno disabled dates\u003c/small\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            An array of disabled dates in the following format: \u003ccode\u003e'day month year weekday'\u003c/code\u003e where \u003cem\u003eweekday\u003c/em\u003e is optional and can be \u003ccode\u003e0-6\u003c/code\u003e (Saturday to Sunday).\u003cbr\u003e\u003cbr\u003e\n            The syntax is similar to cron's syntax: the values are separated by spaces and may contain \u003ccode\u003e*\u003c/code\u003e (asterisk) \u003ccode\u003e-\u003c/code\u003e (dash) and \u003ccode\u003e,\u003c/code\u003e (comma) delimiters.\u003cbr\u003e\u003cbr\u003e\n            Examples:\u003cbr\u003e\u003cbr\u003e\n            \u003ccode\u003e['1 1 2012']\u003c/code\u003e would disable January 1, 2012\u003cbr\u003e\n            \u003ccode\u003e['* 1 2012']\u003c/code\u003e would disable all days in January 2012\u003cbr\u003e\n            \u003ccode\u003e['1-10 1 2012']\u003c/code\u003e would disable January 1 through 10 in 2012\u003cbr\u003e\n            \u003ccode\u003e['1,10 1 2012']\u003c/code\u003e would disable January 1 and 10 in 2012\u003cbr\u003e\n            \u003ccode\u003e['1-10,20,22,24 1-3 *']\u003c/code\u003e would disable 1 through 10, plus the 22nd and 24th of January through March for every year\u003cbr\u003e\n            \u003ccode\u003e['* * * 0,6']\u003c/code\u003e would disable all Saturdays and Sundays\u003cbr\u003e\n            \u003ccode\u003e['01 07 2012', '02 07 2012', '* 08 2012']\u003c/code\u003e would disable 1st and 2nd of July 2012, and all of August of 2012\u003cbr\u003e\u003cbr\u003e\n            \u003cblockquote\u003eDISABLING ALL DATES AND NOT SPECIFYING AT LEAST ONE ENABLED DATE WILL SEND THE SCRIPT INTO AN INFINITE LOOP SEARCHING FOR AN ENABLED DATE TO DISPLAY!\u003c/blockquote\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"enabled_ampm\"\u003e\u003c/a\u003e\u003cstrong\u003eenabled_ampm\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003efalse\u003c/code\u003e\u003cbr\u003e\u003csmall\u003eboth am/pm are selectable\u003c/small\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            An array of selectable am/pm.\u003cbr\u003e\u003cbr\u003e\n            Allowed values are \u003ccode\u003e['am']\u003c/code\u003e, \u003ccode\u003e['pm']\u003c/code\u003e, or \u003ccode\u003e['am', 'pm']\u003c/code\u003e.\u003cbr\u003e\u003cbr\u003e\n            \u003cem\u003eApplies only when \u003ccode\u003eformat\u003c/code\u003e contains \u003ccode\u003eA\u003c/code\u003e or \u003ccode\u003ea\u003c/code\u003e. Note that even when only one is enabled, \u003ccode\u003eonChange()\u003c/code\u003e will still be triggered when clicking the up/down buttons next to AM/PM on the timepicker.\u003c/em\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"enabled_dates\"\u003e\u003c/a\u003e\u003cstrong\u003eenabled_dates\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003efalse\u003c/code\u003e\u003cbr\u003e\u003csmall\u003eall dates enabled\u003c/small\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            An array of enabled dates in the same format as required for \u003ccode\u003edisabled_dates\u003c/code\u003e property. To be used together with the \u003ccode\u003edisabled_dates\u003c/code\u003e property by first setting the \u003ccode\u003edisabled_dates\u003c/code\u003e property to something like \u003ccode\u003e[* * * *]\u003c/code\u003e \u003cem\u003e(which will disable everything)\u003c/em\u003e and the setting the \u003ccode\u003eenabled_dates\u003c/code\u003e property to, say, \u003ccode\u003e[* * * 0,6]\u003c/code\u003e to enable just weekends.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"enabled_hours\"\u003e\u003c/a\u003e\u003cstrong\u003eenabled_hours\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003efalse\u003c/code\u003e\u003cbr\u003e\u003csmall\u003eall hours are selectable\u003c/small\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            An array of selectable hours.\u003cbr\u003e\u003cbr\u003e\n            \u003cem\u003eApplies only when \u003ccode\u003eformat\u003c/code\u003e contains one of the following characters: \u003ccode\u003eH\u003c/code\u003e, \u003ccode\u003eG\u003c/code\u003e, \u003ccode\u003eh\u003c/code\u003e, \u003ccode\u003eg\u003c/code\u003e. Valid values are between \u003ccode\u003e0-24\u003c/code\u003e (not padded with \u003ccode\u003e0\u003c/code\u003e!) when \u003ccode\u003eformat\u003c/code\u003e contains \u003ccode\u003eH\u003c/code\u003e or \u003ccode\u003eG\u003c/code\u003e characters, and between \u003ccode\u003e1-12\u003c/code\u003e (not padded with \u003ccode\u003e0\u003c/code\u003e!) when \u003ccode\u003eformat\u003c/code\u003e contains \u003ccode\u003eh\u003c/code\u003e or \u003ccode\u003eg\u003c/code\u003e characters.\u003c/em\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"enabled_minutes\"\u003e\u003c/a\u003e\u003cstrong\u003eenabled_minutes\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003efalse\u003c/code\u003e\u003cbr\u003e\u003csmall\u003eall minutes are selectable\u003c/small\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            An array of selectable minutes.\u003cbr\u003e\u003cbr\u003e\n            \u003cem\u003eApplies only when \u003ccode\u003eformat\u003c/code\u003e contains the \u003ccode\u003ei\u003c/code\u003e character. Valid values are between \u003ccode\u003e0-59\u003c/code\u003e (not padded with \u003ccode\u003e0\u003c/code\u003e!)\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"enabled_seconds\"\u003e\u003c/a\u003e\u003cstrong\u003eenabled_seconds\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003efalse\u003c/code\u003e\u003cbr\u003e\u003csmall\u003eall seconds are selectable\u003c/small\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            An array of selectable seconds.\u003cbr\u003e\u003cbr\u003e\n            \u003cem\u003eApplies only when \u003ccode\u003eformat\u003c/code\u003e contains the \u003ccode\u003es\u003c/code\u003e character. Valid values are between \u003ccode\u003e0-59\u003c/code\u003e (not padded with \u003ccode\u003e0\u003c/code\u003e!)\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"first_day_of_week\"\u003e\u003c/a\u003e\u003cstrong\u003efast_navigation\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003eboolean\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Allows users to quickly navigate through months and years by clicking on the date picker's top label.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"first_day_of_week\"\u003e\u003c/a\u003e\u003cstrong\u003efirst_day_of_week\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003einteger\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003e1\u003c/code\u003e\u003cbr\u003e\u003csmall\u003eMonday\u003c/small\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Week's starting day.\u003cbr\u003e\n            Valid values are \u003ccode\u003e0\u003c/code\u003e to \u003ccode\u003e6\u003c/code\u003e, Sunday to Saturday.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"format\"\u003e\u003c/a\u003e\u003cstrong\u003eformat\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003estring\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003e'Y-m-d'\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Format of the returned date.\u003cbr\u003e\u003cbr\u003e\n            Accepts the following characters for date formatting: \u003ccode\u003ed\u003c/code\u003e, \u003ccode\u003eD\u003c/code\u003e, \u003ccode\u003ej\u003c/code\u003e, \u003ccode\u003el\u003c/code\u003e, \u003ccode\u003eN\u003c/code\u003e, \u003ccode\u003ew\u003c/code\u003e, \u003ccode\u003eS\u003c/code\u003e, \u003ccode\u003eF\u003c/code\u003e, \u003ccode\u003em\u003c/code\u003e, \u003ccode\u003eM\u003c/code\u003e, \u003ccode\u003en\u003c/code\u003e, \u003ccode\u003eY\u003c/code\u003e, \u003ccode\u003ey\u003c/code\u003e, \u003ccode\u003eh\u003c/code\u003e, \u003ccode\u003eH\u003c/code\u003e, \u003ccode\u003eg\u003c/code\u003e, \u003ccode\u003eG\u003c/code\u003e, \u003ccode\u003ei\u003c/code\u003e, \u003ccode\u003es\u003c/code\u003e, \u003ccode\u003ea\u003c/code\u003e, \u003ccode\u003eA\u003c/code\u003e, borrowing the syntax from PHP's \u003ca href=\"http://php.net/manual/en/function.date.php\"\u003edate\u003c/a\u003e function.\u003cbr\u003e\u003cbr\u003e\n            If \u003ccode\u003eformat\u003c/code\u003e property contains time-related characters (\u003ccode\u003eg\u003c/code\u003e, \u003ccode\u003eG\u003c/code\u003e, \u003ccode\u003eh\u003c/code\u003e, \u003ccode\u003eH\u003c/code\u003e, \u003ccode\u003ei\u003c/code\u003e, \u003ccode\u003es\u003c/code\u003e, \u003ccode\u003ea\u003c/code\u003e, \u003ccode\u003eA\u003c/code\u003e), the time picker will be automatically enabled.\u003cbr\u003e\u003cbr\u003e\u003cblockquote\u003eIf you want to use a format that involves time but you don't want the time picker, set the \u003ccode\u003edisable_time_picker\u003c/code\u003e property to true.\u003c/blockquote\u003e\n            Note that when setting a date format without days (\u003ccode\u003ed\u003c/code\u003e, \u003ccode\u003ej\u003c/code\u003e), the users will be able to select only years and months, and when setting a format without months and days (\u003ccode\u003eF\u003c/code\u003e, \u003ccode\u003em\u003c/code\u003e, \u003ccode\u003eM\u003c/code\u003e, \u003ccode\u003en\u003c/code\u003e, \u003ccode\u003et\u003c/code\u003e, \u003ccode\u003ed\u003c/code\u003e, \u003ccode\u003ej\u003c/code\u003e), 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.\u003cbr\u003e\u003cbr\u003e\u003cblockquote\u003eSetting a time format containing \u003ccode\u003ea\u003c/code\u003e or \u003ccode\u003eA\u003c/code\u003e (12-hour format) but using \u003ccode\u003eH\u003c/code\u003e or \u003ccode\u003eG\u003c/code\u003e as the hour's format will result in the hour's format being automatically changed to \u003ccode\u003eh\u003c/code\u003e or \u003ccode\u003eg\u003c/code\u003e, respectively.\u003c/blockquote\u003e\n            Also note that the value of the \u003ccode\u003eview\u003c/code\u003e property may be overridden if it is the case (i.e. a value of \u003ccode\u003edays\u003c/code\u003e for the \u003ccode\u003eview\u003c/code\u003e property makes no sense if the date format doesn't allow the selection of days).\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"header_captions\"\u003e\u003c/a\u003e\u003cstrong\u003eheader_captions\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003eobject\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            \u003ccode\u003e\u003csmall\u003eheader_captions: {\u003c/small\u003e\u003c/code\u003e\u003cbr\u003e\n            \u003ccode\u003e\u003csmall\u003edays: 'F, Y',\u003c/small\u003e\u003c/code\u003e\u003cbr\u003e\n            \u003ccode\u003e\u003csmall\u003emonths: 'Y',\u003c/small\u003e\u003c/code\u003e\u003cbr\u003e\n            \u003ccode\u003e\u003csmall\u003eyears: 'Y1 - Y2'\u003c/small\u003e\u003c/code\u003e\u003cbr\u003e\n            \u003ccode\u003e\u003csmall\u003e}\u003c/small\u003e\u003c/code\u003e\n            \u003c/small\u003e\n        \u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Captions in the date picker's header, for the 3 applicable views: \u003ccode\u003edays\u003c/code\u003e, \u003ccode\u003emonths\u003c/code\u003e, \u003ccode\u003eyears\u003c/code\u003e\u003cbr\u003e\u003cbr\u003e\n            For each of the 3 views the following special characters may be used borrowing from PHP's \u003ca href=\"http://php.net/manual/en/function.date.php\"\u003edate\u003c/a\u003e function's syntax: \u003ccode\u003em\u003c/code\u003e, \u003ccode\u003en\u003c/code\u003e, \u003ccode\u003eF\u003c/code\u003e, \u003ccode\u003eM\u003c/code\u003e, \u003ccode\u003ey\u003c/code\u003e and \u003ccode\u003eY\u003c/code\u003e; any of these will be replaced at runtime with the appropriate date fragment, depending on the currently viewed date.\u003cbr\u003e\u003cbr\u003eTwo more special characters are also available \u003ccode\u003eY1\u003c/code\u003e and \u003ccode\u003eY2\u003c/code\u003e (upper case representing years with 4 digits, lowercase representing years with 2 digits) which represent \u003ccode\u003ecurrently selected year - 7\u003c/code\u003e and \u003ccode\u003ecurrently selected year + 4\u003c/code\u003e and which are used only in the \u003ccode\u003eyears\u003c/code\u003e view.\u003cbr\u003e\u003cbr\u003e\n            Even though any of these special characters may be used in any of the 3 views, you should use \u003ccode\u003em\u003c/code\u003e, \u003ccode\u003en\u003c/code\u003e, \u003ccode\u003eF\u003c/code\u003e, \u003ccode\u003eM\u003c/code\u003e for the \u003ccode\u003edays\u003c/code\u003e view and \u003ccode\u003ey\u003c/code\u003e, \u003ccode\u003eY\u003c/code\u003e, \u003ccode\u003eY1\u003c/code\u003e, \u003ccode\u003eY2\u003c/code\u003e, \u003ccode\u003ey1\u003c/code\u003e, \u003ccode\u003ey2\u003c/code\u003e for the \u003ccode\u003emonths\u003c/code\u003e and \u003ccode\u003eyears\u003c/code\u003e view or you may get unexpected results!\u003cbr\u003e\u003cbr\u003e\n            Text and HTML can also be used, and will be rendered as it is, as in the example below (the library is smart enough to not replace special characters when used in words or HTML tags):\u003cbr\u003e\u003cbr\u003e\n            \u003ccode\u003eheader_captions: {\u003c/code\u003e\u003cbr\u003e\n            \u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;days:     'Departure:\u0026lt;br\u0026gt;F, Y',\u003c/code\u003e\u003cbr\u003e\n            \u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;months:   'Departure:\u0026lt;br\u0026gt;Y',\u003c/code\u003e\u003cbr\u003e\n            \u003ccode\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;years:    'Departure:\u0026lt;br\u0026gt;Y1 - Y2'\u003c/code\u003e\u003cbr\u003e\n            \u003ccode\u003e}\u003c/code\u003e\u003cbr\u003e\u003cbr\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"icon_margin\"\u003e\u003c/a\u003e\u003cstrong\u003eicon_margin\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            The left and right white-space around the icon\u003cbr\u003e\u003cbr\u003e\n            If the \u003ccode\u003einside\u003c/code\u003e property is set to \u003ccode\u003etrue\u003c/code\u003e then the target element's padding will be altered so that the element's left or right padding (depending on the value of \u003ccode\u003eicon_position\u003c/code\u003e) will be \u003ccode\u003e2 x icon_margin\u003c/code\u003e plus the icon's width.\u003cbr\u003e\u003cbr\u003e\n            If the \u003ccode\u003einside\u003c/code\u003e property is set to \u003ccode\u003efalse\u003c/code\u003e, then this will be the distance between the element and the icon.\u003cbr\u003e\u003cbr\u003e\n            Leave it to \u003ccode\u003efalse\u003c/code\u003e to use the element's existing padding\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"icon_position\"\u003e\u003c/a\u003e\u003cstrong\u003eicon_position\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003estring\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003e'right'\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Icon's position.\u003cbr\u003e\n            Accepted values are \u003ccode\u003eleft\u003c/code\u003e and \u003ccode\u003eright\u003c/code\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"inside\"\u003e\u003c/a\u003e\u003cstrong\u003einside\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003eboolean\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Should the icon for opening the date picker be inside the element?\u003cbr\u003e\u003cbr\u003e\n            If set to \u003ccode\u003efalse\u003c/code\u003e, the icon will be placed to the right of the parent element, while if set to \u003ccode\u003etrue\u003c/code\u003e it will be placed to the right of the parent element, but \u003cem\u003einside\u003c/em\u003e the element itself\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"lang_clear_date\"\u003e\u003c/a\u003e\u003cstrong\u003elang_clear_date\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003estring\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003e'Clear'\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            the caption for the \u003cem\u003eClear\u003c/em\u003e button.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"months\"\u003e\u003c/a\u003e\u003cstrong\u003emonths\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003earray\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003e['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Month names\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"months_abbr\"\u003e\u003c/a\u003e\u003cstrong\u003emonths_abbr\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Abbreviated names of months.\u003cbr\u003e\u003cbr\u003e\n            By default, the abbreviated name of a month consists of the first 3 letters from the month's full name. While this is common for most languages, there are also exceptions for languages like Thai, Loa, Myanmar, etc. where this is not correct. For these cases, specify an array with the abbreviations to be used for the months of the year; leave it \u003ccode\u003efalse\u003c/code\u003e to use the first 3 letters of a month's name as the abbreviation.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"navigation\"\u003e\u003c/a\u003e\u003cstrong\u003enavigation\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003eArray\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003enavigation: ['\u0026amp;#9664;', '\u0026amp;#9654;', '\u0026amp;#9650;', '\u0026amp;#9660;']\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            HTML to be used for the previous/next and up/down buttons, in that order.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"offset\"\u003e\u003c/a\u003e\u003cstrong\u003eoffset\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003earray\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003e[5, -5]\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            The offset, in pixels (x, y), to shift the date picker's position after it was positioned according to the value of the \u003ccode\u003edefault_position\u003c/code\u003e property.\u003cbr\u003e\u003cbr\u003e\n            For optimal results, if \u003ccode\u003edefault_position\u003c/code\u003e property contains the word \u003cstrong\u003e\"above\"\u003c/strong\u003e, the value of \u003ccode\u003ey\u003c/code\u003e should negative, and positive otherwise.\u003cbr\u003e\u003cbr\u003e\n            Also, if \u003ccode\u003edefault_position\u003c/code\u003e property contains the word \u003cstrong\u003e\"right\"\u003c/strong\u003e, the value of \u003ccode\u003ex\u003c/code\u003e should be positive, and negative otherwise.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"open_icon_only\"\u003e\u003c/a\u003e\u003cstrong\u003eopen_icon_only\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003eboolean\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            When set to \u003ccode\u003etrue\u003c/code\u003e, the date picker will show only when users click on the associated icon, and not also when clicking the associated element.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"open_on_focus\"\u003e\u003c/a\u003e\u003cstrong\u003eopen_on_focus\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003eboolean\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Set this property to \u003ccode\u003etrue\u003c/code\u003e if you want the date picker to be shown when the parent element (if \u003ccode\u003eopen_icon_only\u003c/code\u003e is not set to \u003ccode\u003efalse\u003c/code\u003e) or the associated calendar icon (if \u003ccode\u003eshow_icon\u003c/code\u003e is not set to \u003ccode\u003efalse\u003c/code\u003e) receive focus.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"pair\"\u003e\u003c/a\u003e\u003cstrong\u003epair\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003eobject\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003efalse\u003c/code\u003e\u003cbr\u003e\u003csmall\u003enot paired with another date picker\u003c/small\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            If set as one or more jQuery elements with Zebra Datepicker attached, those particular date pickers will use the current date picker's value as starting date\u003cbr\u003e\u003cbr\u003e\n            Note that the rules set in the \u003ccode\u003edirection\u003c/code\u003e property will still apply but the reference date will not be the current system date but the value selected in the current date picker.\u003cbr\u003e\u003cbr\u003e\n            \u003cblockquote\u003eUse this property only on the date picker containing the \"starting date\" and not also on the one with the \"ending date\", or the \u003ccode\u003edirection\u003c/code\u003e property of the second date picker will not work as expected!\u003cblockquote\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"readonly_element\"\u003e\u003c/a\u003e\u003cstrong\u003ereadonly_element\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003eboolean\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Should the element the calendar is attached to, be read-only?\u003cbr\u003e\u003cbr\u003e\n            If set to \u003ccode\u003etrue\u003c/code\u003e, a date can be set only through the date picker and cannot be entered manually.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"rtl\"\u003e\u003c/a\u003e\u003cstrong\u003ertl\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003eboolean\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Whether text should be drawn from right to left.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"select_other_months\"\u003e\u003c/a\u003e\u003cstrong\u003eselect_other_months\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003eboolean\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Should days from previous and/or next month be selectable when visible?\u003cbr\u003e\u003cbr\u003e\n            Note that if the value of this property is set to \u003ccode\u003etrue\u003c/code\u003e, the value of \u003ccode\u003eshow_other_months\u003c/code\u003e will be considered \u003ccode\u003etrue\u003c/code\u003e regardless of the actual value!\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"show_clear_date\"\u003e\u003c/a\u003e\u003cstrong\u003eshow_clear_date\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003e0\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Should the \u003cem\u003eClear date\u003c/em\u003e button be visible?\u003cbr\u003e\u003cbr\u003e\n            Accepted values are:\u003cbr\u003e\u003cbr\u003e\n            \u003cul\u003e\n                \u003cli\u003e\u003ccode\u003e0\u003c/code\u003e - the button for clearing a previously selected date is shown only if a previously selected date already exists; this means that if there's no date selected, this button will not be visible; once the user picked a date and opens the date picker again, this time the button will be visible.\u003c/li\u003e\n                \u003cli\u003e\u003ccode\u003etrue\u003c/code\u003e will make the button visible all the time\u003c/li\u003e\n                \u003cli\u003e\u003ccode\u003efalse\u003c/code\u003e will disable the button\u003c/li\u003e\n            \u003c/ul\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"show_icon\"\u003e\u003c/a\u003e\u003cstrong\u003eshow_icon\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003ePick a date\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Should a calendar icon be added to the elements the plugin is attached to?\u003cbr\u003e\u003cbr\u003e\n            Set this property's value to boolean \u003ccode\u003efalse\u003c/code\u003e if you don't want the calendar icon.\u003cbr\u003e\u003cbr\u003e\n            Note that the text is not visible by default since \u003ccode\u003etext-indentation\u003c/code\u003e is set to a big negative value in the CSS, so you might want to change that in case you want to make the text visible.\u003cbr\u003e\u003cbr\u003e\n            When \u003cstrong\u003enot\u003c/strong\u003e set to boolean \u003ccode\u003efalse\u003c/code\u003e the plugin will attach a calendar icon to the elements the plugin is attached to.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"show_other_months\"\u003e\u003c/a\u003e\u003cstrong\u003eshow_other_months\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003eboolean\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Should days from previous and/or next month be visible?\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"show_select_today\"\u003e\u003c/a\u003e\u003cstrong\u003eshow_select_today\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003e'Today'\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Should the \u003cem\u003eToday\u003c/em\u003e button be visible?\u003cbr\u003e\u003cbr\u003e\n            Setting this property to anything but a boolean \u003ccode\u003efalse\u003c/code\u003e will enable the button and will use the property's value as caption for the button. Setting it to \u003ccode\u003efalse\u003c/code\u003e will disable the button.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"show_week_number\"\u003e\u003c/a\u003e\u003cstrong\u003eshow_week_number\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Should the ISO 8601 week number be displayed?\u003cbr\u003e\u003cbr\u003e\n            Anything other than \u003ccode\u003efalse\u003c/code\u003e will enable this feature, and use the given value as column title. For example, \u003ccode\u003eshow_week_number: 'Wk'\u003c/code\u003e would enable this feature and have \u003cem\u003eWk\u003c/em\u003e as the column's title.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"start_date\"\u003e\u003c/a\u003e\u003cstrong\u003estart_date\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003emixed\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            A default date to start the date picker with\u003cbr\u003e\u003cbr\u003e\n            Must be specified in the format defined by the \u003ccode\u003eformat\u003c/code\u003e property, or as a JavaScript Date object\u003cbr\u003e\u003cbr\u003e\n            If you have a date format that contains time and you need to set a default time but the date should be the current date, here's one way of doing it:\u003cbr\u003e\u003cbr\u003e\n            Prior to version \u003ccode\u003e1.9.11\u003c/code\u003e:\u003cbr\u003e\u003cbr\u003e\n            \u003ccode\u003evar date = new Date(); // have this somewhere\u003c/code\u003e\u003cbr\u003e\u003cbr\u003e\n            \u003ccode\u003e// set the start_date property like\u003c/code\u003e\u003cbr\u003e\n            \u003ccode\u003estart_date: date.getFullYear() + '-' +\u003c/code\u003e\u003cbr\u003e\n            \u003ccode\u003e\u0026nbsp;\u0026nbsp;(date.getMonth() + 1 \u003c 10 ? '0' : '') +\u003c/code\u003e\u003cbr\u003e\n            \u003ccode\u003e\u0026nbsp;\u0026nbsp;(date.getMonth() + 1) + '-' +\u003c/code\u003e\u003cbr\u003e\n            \u003ccode\u003e\u0026nbsp;\u0026nbsp;(date.getDate() \u003c 10 ? '0' : date.getDate()) +\u003c/code\u003e\u003cbr\u003e\n            \u003ccode\u003e\u0026nbsp;\u0026nbsp;' 12:00'\u003c/code\u003e\u003cbr\u003e\u003cbr\u003e\n            Starting with version \u003ccode\u003e1.9.11\u003c/code\u003e:\u003cbr\u003e\u003cbr\u003e\n            \u003ccode\u003estart_date: new Date()\u003c/code\u003e\u003cbr\u003e\u003cbr\u003e\n            \u003cblockquote\u003eNote that this value is used only if there is no value in the field the date picker is attached to!\u003c/blockquote\u003e\n            \u003cblockquote\u003eThe property's value can be a JavaScript Date object since version 1.9.11\u003c/blockquote\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"strict\"\u003e\u003c/a\u003e\u003cstrong\u003estrict\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003eboolean\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Should default values, in the input field the date picker is attached to, be deleted if they are not valid according to \u003ccode\u003edirection\u003c/code\u003e and/or \u003ccode\u003edisabled_dates\u003c/code\u003e?\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"view\"\u003e\u003c/a\u003e\u003cstrong\u003eview\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003estring\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003e'days'\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            How should the date picker start:\u003cbr\u003e\u003cbr\u003e\n            Valid values are \u003ccode\u003edays\u003c/code\u003e, \u003ccode\u003emonths\u003c/code\u003e, \u003ccode\u003eyears\u003c/code\u003e and \u003ccode\u003etime\u003c/code\u003e.\u003cbr\u003e\u003cbr\u003e\n            Note that the date picker is always cycling \u003ccode\u003edays -\u003e months -\u003e years\u003c/code\u003e when clicking in the date picker's header, and \u003ccode\u003eyears -\u003e months -\u003e days\u003c/code\u003e when selecting dates (skipping the views that are missing because of the date's format)\u003cbr\u003e\u003cbr\u003e\n            The value of the \u003ccode\u003eview\u003c/code\u003e property may be overridden if the date's format requires so! (i.e. \u003ccode\u003edays\u003c/code\u003e for the \u003ccode\u003eview\u003c/code\u003e property makes no sense if the date format doesn't allow the selection of days)\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"weekend_days\"\u003e\u003c/a\u003e\u003cstrong\u003eweekend_days\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003eArray\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003e[0, 6]\u003c/code\u003e\u003cbr\u003e\u003csmall\u003eSaturday and Sunday\u003c/small\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Days of the week that are considered \u003cem\u003eweekend days\u003c/em\u003e\u003cbr\u003e\n            Valid values are \u003ccode\u003e0\u003c/code\u003e to \u003ccode\u003e6\u003c/code\u003e, Sunday to Saturday.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd valign=\"top\"\u003e\u003ca name=\"zero_pad\"\u003e\u003c/a\u003e\u003cstrong\u003ezero_pad\u003c/strong\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003cem\u003eboolean\u003c/em\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n        \u003ctd valign=\"top\"\u003e\n            Should day numbers \u003c 10 be padded with zero?\u003cbr\u003e\n            When set to \u003ccode\u003etrue\u003c/code\u003e, day numbers \u003c 10 will be prefixed with \u003ccode\u003e0\u003c/code\u003e.\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Events\n\n#### `onChange`\n\nCallback to be executed whenever the user changes the view (days/months/years/time), as well as when the user navigates by clicking on the \u003ccode\u003enext/previous\u003c/code\u003e icons in any of the views;\n\nThe callback function receives 2 arguments\n\n- the current view (`days`, `months`, `years` or `time`)\n- an array containing the \u003cem\u003eactive\u003c/em\u003e elements (not disabled) from the view, as jQuery elements, allowing for easy customization and interaction with particular cells in the date picker's view\n\nThe `this` keyword inside the callback function refers to the element the date picker is attached to, as a jQuery object.\u003cbr\u003e\nTo get the plugin's properties do `properties = this.data('Zebra_DatePicker')`.\n\nFor simplifying searching for particular dates, each element gets a `date` data attribute whose format depends on the value of the `view` argument as follows:\n\n- `YYYY-MM-DD` for elements in the `days` view\n- `YYYY-MM` for elements in the `months` view\n- `YYYY` for elements in the `years` view\n\n\u003e Note that this data attribute is not also set for elements in the `time` view.\n\nHere's how we could highlight the 24\u003csup\u003eth\u003c/sup\u003e day of each month of each year:\n\n```javascript\n$('selector').Zebra_DatePicker({\n\n    //  execute a function whenever the user changes the view\n    //  (days/months/years), as well as when the user\n    //  navigates by clicking on the \"next\"/\"previous\" icons\n    //  in any of the views\n    onChange: function(view, elements) {\n\n        //  on the \"days\" view...\n        if (view === 'days') {\n\n            //  iterate through the active elements in the view\n            elements.each(function() {\n\n                //  to simplify searching for particular dates,\n                //  each element gets a \"date\" data attribute which\n                //  is the form of:\n                //  - YYYY-MM-DD for elements in the \"days\" view\n                //  - YYYY-MM for elements in the \"months\" view\n                //  - YYYY for elements in the \"years\" view\n\n                //  so, because we're on a \"days\" view,\n                //  let's find the 24th day using a regular\n                //  expression (notice that this will apply to\n                //  every 24th day of every month of every year)\n                if ($(this).data('date').match(/\\-24$/))\n\n                    // and highlight it!\n                    $(this).css({\n                        backgroundColor:    '#C40000',\n                        color:              '#FFF'\n                    });\n\n            });\n\n        }\n\n    }\n\n});\n```\n\n#### `onClear`\n\nCallback function to be executed when the user clicks the \u003cem\u003eClear\u003c/em\u003e button.\n\nThe callback function takes no arguments. The `this` keyword inside the callback function refers to the element the date picker is attached to, as a jQuery object.\u003cbr\u003e\nTo get the plugin's properties do `properties = this.data('Zebra_DatePicker')`.\n\n#### `onClose`\n\nCallback function to be executed when the date picker is closed.\n\nThe callback function takes no arguments. The `this` keyword inside the callback function refers to the element the date picker is attached to, as a jQuery object.\u003cbr\u003e\nTo get the plugin's properties do `properties = this.data('Zebra_DatePicker')`.\n\n#### `onOpen`\n\nCallback function to be executed when the date picker is shown.\n\nThe callback function takes no arguments. The `this` keyword inside the callback function refers to the element the date picker is attached to, as a jQuery object.\u003cbr\u003e\nTo get the plugin's properties do `properties = this.data('Zebra_DatePicker')`.\n\n#### `onSelect`\n\nCallback function to be executed when a date is selected.\n\nThe callback function takes 3 arguments:\n\n- the date in the format specified by the \u003ccode\u003eformat\u003c/code\u003e attribute\n- the date in \u003ccode\u003eYYYY-MM-DD\u003c/code\u003e format and additionally hours, minutes and seconds if time picker is enabled\n- the date as a JavaScript Date object\n\n`this` inside the callback function refers to the element the date picker is attached to, as a jQuery object.\u003cbr\u003e\nTo get the plugin's properties do `properties = this.data('Zebra_DatePicker')`.\n\n## Methods\n\nFirst, get a reference to the plugin like\n\n```javascript\nvar datepicker = $('selector').data('Zebra_DatePicker');\n```\n\nThen call a method like\n```javascript\ndatepicker.update();\n```\n\n#### `clear_date()`\n\nClears the selected date (if any)\n\n#### `destroy()`\n\nRemoves the plugin from an element\n\n#### `set_date(date)`\n\nSets the value of the element the date picker is attached to, to the specified date;\n\nThe date must be in the format defined by the \u003ccode\u003eformat\u003c/code\u003e property \u003cstrong\u003eor\u003c/strong\u003e a JavaScript \u003ccode\u003eDate\u003c/code\u003e object.\n\nThe date will not be set if it is disabled (either because of \u003ccode\u003edisabled_dates\u003c/code\u003e or because of \u003ccode\u003edirection\u003c/code\u003e properties)\n\n\u003cblockquote\u003eThe method's argument can be a JavaScript \u003ccode\u003eDate\u003c/code\u003e object since version \u003ccode\u003e1.9.11\u003c/code\u003e\u003c/blockquote\u003e\n\n#### `show()`\n\nShows the date picker (unless the \u003ccode\u003ealways_visible\u003c/code\u003e property is set to \u003ccode\u003etrue\u003c/code\u003e)\n\n#### `hide()`\n\nHides the date picker (unless the \u003ccode\u003ealways_visible\u003c/code\u003e property is set to \u003ccode\u003etrue\u003c/code\u003e)\n\n#### `update([options])`\n\nUpdates configuration options at run-time, and recalculates date picker's icon position relative to the parent element. You should call this method whenever you show/hide/reposition the parent element, or alter the parent element's dimensions.\n\nThe method accepts an optional argument - an object with configuration options to update:\n\n```javascript\nvar datepicker = $('selector').data('Zebra_DatePicker');\ndatepicker.update({\n    direction: 1\n});\n```\n\nIf you just want to update the icon's position, simply call the method without any arguments:\n\n```javascript\nvar datepicker = $('selector').data('Zebra_DatePicker');\ndatepicker.update();\n```\n\n## Global options\n\nIf you have multiple date pickers that share common options you can set these options like this:\n\n```javascript\n// this needs to be called only once and does\n// not have to be called from within a \"ready\" block!\n$.fn.Zebra_DatePicker.defaults = {\n    // any valid options\n}\n```\n\nAny options set like this will be applied to **all** the newly created date picker. Obviously, options set at the creation of any new date picker would overwrite the respective defaults.\n\n## Sponsors\n\nCross browser/device testing is done with\n\n[![BrowserStack](https://github.com/stefangabos/Zebra_Dialog/raw/master/examples/browserstack.png)](https://www.browserstack.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstefangabos%2FZebra_Datepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstefangabos%2FZebra_Datepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstefangabos%2FZebra_Datepicker/lists"}