{"id":6998,"date":"2015-09-17T12:15:03","date_gmt":"2015-09-17T09:15:03","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=6998"},"modified":"2017-12-21T16:15:05","modified_gmt":"2017-12-21T14:15:05","slug":"jquery-ui-datepicker-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/","title":{"rendered":"jQuery UI Datepicker Example"},"content":{"rendered":"

In this example, we’ll have a look at the datepicker<\/code> widget of jQuery. The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.<\/p>\n

By default, the datepicker calendar opens in a small overlay when the associated text field gains focus. For an inline calendar, simply attach the datepicker to a div or span. <\/p>\n

There are quite some other javascript frameworks out there that offer the datepicker<\/code> widget better designed, but that is up to you to decide.
\n 
\n[ulp id=’qGGDqWnle19VavkM’]<\/p>\n

1. Basic Setup & Application<\/h2>\n

The following sections will help you begin with the very basics.<\/p>\n

1.1 Document Setup<\/h3>\n

To begin, create a new HTML document and add the following basic syntax to it:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>jQuery Datepicker Example<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- LINKS SECTION  -->\r\n<link href=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.11.4\/themes\/smoothness\/jquery-ui.css\" rel=\"stylesheet\" type=\"text\/css\"\/>\r\n<script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js\"><\/script>\r\n<script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.11.4\/jquery-ui.min.js\"><\/script>\r\n<link href=\"style.css\" rel=\"stylesheet\" type=\"text\/css\"\/>\r\n\r\n<!-- HTML SECTION  -->\r\n\r\n\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script src=\"jquery-1.11.3.min.js\"><\/script>\r\n\r\n<script type=\"text\/javascript\">\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Don’t forget to download or link jQuery library, otherwise the code won’t work. Other links of the jQuery UI are provided, so you don’t have to.<\/p>\n
1.2 Default Functionality<\/h3>\n
Let us begin with this very simple and basic datepicker. The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input’s value.<\/p>\n
So, create a new p<\/code> element in HTML and add some text like Date:<\/em>. Inside the p<\/code> add an input<\/code> element and give it a class of .datepicker<\/code>:<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<p>Date: <input type=\"text\" class=\"datepicker\"><\/p>\r\n<\/pre>\n
Now, to show a basic datepicker, in jQuery, create a new function where you select the .datepicker input field and add the .datepicker()<\/code> method.<\/p>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n  $(function() {\r\n    $( \".datepicker\" ).datepicker();\r\n  });\r\n<\/script>\r\n<\/pre>\n
\"datepicker-1\"<\/a><\/p>\n
2. Options and Examples<\/h2>\n
The following section will expand on the various customizations the widget can have.<\/p>\n
2.1 Animations<\/h3>\n
You can use different animations when opening or closing the datepicker. Choose an animation from the dropdown, then click on the input to see its effect. You can use one of the three standard animations or any of the UI Effects.<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<p>Date: <input type=\"text\" class=\"datepicker\" size=\"30\"><\/p>\r\n\r\n<p>Animations:<br>\r\n  <select class=\"anim\">\r\n    <option value=\"show\">Show (default)<\/option>\r\n    <option value=\"slideDown\">Slide down<\/option>\r\n    <option value=\"fadeIn\">Fade in<\/option>\r\n    <option value=\"blind\">Blind (UI Effect)<\/option>\r\n    <option value=\"bounce\">Bounce (UI Effect)<\/option>\r\n    <option value=\"clip\">Clip (UI Effect)<\/option>\r\n    <option value=\"drop\">Drop (UI Effect)<\/option>\r\n    <option value=\"fold\">Fold (UI Effect)<\/option>\r\n    <option value=\"slide\">Slide (UI Effect)<\/option>\r\n    <option value=\"\">None<\/option>\r\n  <\/select>\r\n<\/p>\r\n<\/pre>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n  $(function() {\r\n    $( \".datepicker\" ).datepicker();\r\n    $( \".anim\" ).change(function() {\r\n      $( \".datepicker\" ).datepicker( \"option\", \"showAnim\", $(this).val() );\r\n    });\r\n  });\r\n<\/script>\r\n<\/pre>\n
Look at the results in this video:
\n
http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/09\/datepicker-2.mp4<\/a><\/video><\/div><\/p>\n
2.2 Dates in Other Months<\/h3>\n
You might have noticed that the calendar does not show dates that are not of the current month. You can change that using the showOtherMonths<\/code> and selectOtherMonths<\/code> options. Just add these two lines inside your .datepicker()<\/code> method.<\/p>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n  $(function() {\r\n    $( \".datepicker\" ).datepicker({\r\n        showOtherMonths: true,\r\n        selectOtherMonths: true\r\n    });\r\n  });\r\n<\/script>\r\n<\/pre>\n
\"Dates<\/a>
Dates in other months!<\/figcaption><\/figure>\n
2.3 Display Button Bar<\/h3>\n
Display a button for selecting Today’s date and a Done button for closing the calendar with the boolean showButtonPanel<\/code> option. Each button is enabled by default when the bar is displayed, but can be turned off with additional options. Button text is customizable.<\/p>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n  $(function() {\r\n    $( \".datepicker\" ).datepicker({\r\n        showButtonPanel: true\r\n    });\r\n  });\r\n<\/script>\r\n<\/pre>\n
\"Display<\/a>
Display a button bar!<\/figcaption><\/figure>\n
2.4 Display Month and Year Menus<\/h3>\n
Show month and year dropdowns in place of the static month\/year header to facilitate navigation through large timeframes. Add the boolean changeMonth<\/code> and changeYear<\/code> options.<\/p>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n    $(function() {\r\n    $( \".datepicker\" ).datepicker({\r\n      changeMonth: true,\r\n      changeYear: true\r\n    });\r\n  });\r\n<\/script>\r\n<\/pre>\n
\"Display<\/a>
Display Month & Year Menus!<\/figcaption><\/figure>\n
2.5 Display Multiple Months<\/h3>\n
Set the numberOfMonths<\/code> option to an integer of 2 or more to show multiple months in a single datepicker.<\/p>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n    $(function() {\r\n    $( \".datepicker\" ).datepicker({\r\n      numberOfMonths: 3\r\n    });\r\n  });\r\n<\/script>\r\n<\/pre>\n
\"Select<\/a>
Select Multiple Months!<\/figcaption><\/figure>\n
2.6 Select a Date Range<\/h3>\n
Select the date range to search for.<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<label for=\"from\">From<\/label>\r\n<input type=\"text\" id=\"from\" name=\"from\">\r\n<label for=\"to\">to<\/label>\r\n<input type=\"text\" id=\"to\" name=\"to\">\r\n<\/pre>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n  $(function() {\r\n    $( \"#from\" ).datepicker({\r\n      defaultDate: \"+1w\",\r\n      changeMonth: true,\r\n      numberOfMonths: 3,\r\n      onClose: function( selectedDate ) {\r\n        $( \"#to\" ).datepicker( \"option\", \"minDate\", selectedDate );\r\n      }\r\n    });\r\n    $( \"#to\" ).datepicker({\r\n      defaultDate: \"+1w\",\r\n      changeMonth: true,\r\n      numberOfMonths: 3,\r\n      onClose: function( selectedDate ) {\r\n        $( \"#from\" ).datepicker( \"option\", \"maxDate\", selectedDate );\r\n      }\r\n    });\r\n  });\r\n<\/script>\r\n<\/pre>\n
http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/09\/Video-9-9-2015-12-10-44-PM.mp4<\/a><\/video><\/div>\n
2.7 Icon Trigger<\/h3>\n
Click the icon next to the input field to show the datepicker. Set the datepicker to open on focus (default behavior), on icon click, or both.<\/p>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n  $(function() {\r\n    $( \".datepicker\" ).datepicker({\r\n      showOn: \"button\",\r\n      buttonImage: \"calendar.png\",\r\n      buttonImageOnly: true,\r\n      buttonText: \"Select date\"\r\n    });\r\n  });\r\n<\/script>\r\n<\/pre>\n
\"Icon<\/a>
Icon Trigger!<\/figcaption><\/figure>\n
2.8 Format Date<\/h3>\n
Display date feedback in a variety of ways. Choose a date format from the dropdown, then click on the input and select a date to see it in that format.<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<p>Format options:<br>\r\n  <select class=\"format\">\r\n    <option value=\"mm\/dd\/yy\">Default - mm\/dd\/yy<\/option>\r\n    <option value=\"yy-mm-dd\">ISO 8601 - yy-mm-dd<\/option>\r\n    <option value=\"d M, y\">Short - d M, y<\/option>\r\n    <option value=\"d MM, y\">Medium - d MM, y<\/option>\r\n    <option value=\"DD, d MM, yy\">Full - DD, d MM, yy<\/option>\r\n    <option value=\"'day' d 'of' MM 'in the year' yy\">With text - 'day' d 'of' MM 'in the year' yy<\/option>\r\n  <\/select>\r\n<\/p>\r\n<\/pre>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n    $(function() {\r\n    $( \".datepicker\" ).datepicker();\r\n    $( \".format\" ).change(function() {\r\n      $( \".datepicker\" ).datepicker( \"option\", \"dateFormat\", $(this).val() );\r\n    });\r\n  });\r\n<\/script>\r\n<\/pre>\n
http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/09\/datepicker-9.mp4<\/a><\/video><\/div>\n
3. Conclusion<\/h2>\n
To conclude, the datepicker<\/code> widget of jQuery UI is a complete solution for developers whenever it comes to getting a date information or a period of time from the user. The datepicker is very used in airlines, hotels and other reservation websties. It is easy to implement and use in jQuery and you can use jQuery UI themes to have a different design.<\/p>\n
4. Download<\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: jQuery Datepicker<\/strong><\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
In this example, we’ll have a look at the datepicker widget of jQuery. The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily. By default, the datepicker …<\/p>\n","protected":false},"author":75,"featured_media":919,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-6998","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery"],"yoast_head":"\njQuery UI Datepicker Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this example, we'll have a look at the datepicker widget of jQuery. The jQuery UI Datepicker is a highly configurable plugin that adds datepicker\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery UI Datepicker Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this example, we'll have a look at the datepicker widget of jQuery. The jQuery UI Datepicker is a highly configurable plugin that adds datepicker\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-17T09:15:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-21T14:15:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"jQuery UI Datepicker Example\",\"datePublished\":\"2015-09-17T09:15:03+00:00\",\"dateModified\":\"2017-12-21T14:15:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/\"},\"wordCount\":738,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/\",\"name\":\"jQuery UI Datepicker Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"datePublished\":\"2015-09-17T09:15:03+00:00\",\"dateModified\":\"2017-12-21T14:15:05+00:00\",\"description\":\"In this example, we'll have a look at the datepicker widget of jQuery. The jQuery UI Datepicker is a highly configurable plugin that adds datepicker\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"jQuery\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"jQuery UI Datepicker Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery UI Datepicker Example - Web Code Geeks - 2026","description":"In this example, we'll have a look at the datepicker widget of jQuery. The jQuery UI Datepicker is a highly configurable plugin that adds datepicker","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/","og_locale":"en_US","og_type":"article","og_title":"jQuery UI Datepicker Example - Web Code Geeks - 2026","og_description":"In this example, we'll have a look at the datepicker widget of jQuery. The jQuery UI Datepicker is a highly configurable plugin that adds datepicker","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-09-17T09:15:03+00:00","article_modified_time":"2017-12-21T14:15:05+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"jQuery UI Datepicker Example","datePublished":"2015-09-17T09:15:03+00:00","dateModified":"2017-12-21T14:15:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/"},"wordCount":738,"commentCount":2,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/","name":"jQuery UI Datepicker Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","datePublished":"2015-09-17T09:15:03+00:00","dateModified":"2017-12-21T14:15:05+00:00","description":"In this example, we'll have a look at the datepicker widget of jQuery. The jQuery UI Datepicker is a highly configurable plugin that adds datepicker","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-ui-datepicker-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"jQuery","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/"},{"@type":"ListItem","position":4,"name":"jQuery UI Datepicker Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/6998","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=6998"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/6998\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/919"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=6998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=6998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=6998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}