{"id":2064,"date":"2015-09-18T14:43:55","date_gmt":"2015-09-18T20:43:55","guid":{"rendered":"http:\/\/behstant.com\/blog\/?p=2064"},"modified":"2017-05-22T15:31:32","modified_gmt":"2017-05-22T21:31:32","slug":"datepicker-jquery-ui-implementation","status":"publish","type":"post","link":"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/","title":{"rendered":"Datepicker jQuery UI Implementation"},"content":{"rendered":"<figure id=\"attachment_2066\" aria-describedby=\"caption-attachment-2066\" style=\"width: 290px\" class=\"wp-caption aligncenter\"><a style=\"text-align: center;\" href=\"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2015\/09\/jquery-ui-datepicker.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2066 size-medium\" src=\"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2015\/09\/jquery-ui-datepicker-300x297.png\" alt=\"jQuery UI Datepicker\" width=\"300\" height=\"297\" srcset=\"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2015\/09\/jquery-ui-datepicker-300x297.png 300w, http:\/\/behstant.com\/blog\/wp-content\/uploads\/2015\/09\/jquery-ui-datepicker-150x150.png 150w, http:\/\/behstant.com\/blog\/wp-content\/uploads\/2015\/09\/jquery-ui-datepicker.png 462w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-2066\" class=\"wp-caption-text\">jQuery UI Datepicker<\/figcaption><\/figure>\n<p>On this days it is so easy to find a Javascript Datepicker on the field but if you really want a Datepicker with lots of feature you should definitely check out the jQuery UI Datepicker. This jQuery plugin is very configurable to fit your needs. In the following list you can find some of its features.<\/p>\n<p>In order to use this jQuery Datepicker you only have to point to the correct elements with a CSS3 selector, for example if I have a input with id = datepicker then to attached the jQuery Datepicker to that element I would use the following code.<\/p>\n<p><!--more--><\/p>\n<pre class=\"lang:js mark:3 decode:true\">$( document ).ready( function() {\r\n    \/\/ Don&#039;t forget to wrap all you jQuery code inside the ready function.\r\n    $( &#039;input#datepicker&#039; ).datepicker();\r\n} );\r\n<\/pre>\n<p>Require JS code on you header\/footer to work:<\/p>\n<ul>\n<li>jQuery Core<\/li>\n<li>jQuery UI Core<\/li>\n<li>jQuery UI Widget Menu<\/li>\n<li>jQuery Widget DatePicker<\/li>\n<\/ul>\n<p>Download it from <a href=\"http:\/\/jqueryui.com\/download\/#!version=1.11.4&amp;components=1111000000100010000000000000000000000\">here<\/a>.<\/p>\n<h2>Default Datepicker with no custom settings<\/h2>\n<p>When you instantiate the jQuery UI Datepicker you trigger the calendar by clicking on the input element where you pointed with jQuery.<\/p>\n<p class='codepen'  data-height='266' data-theme-id='19002' data-slug-hash='dYMdoM' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen dYMdoM by Israel Barragan Castillo (@Reedyseth) on CodePen.<\/p>\n\n<h2>Datepicker Inline<\/h2>\n<p>There are times when you want to always display a calendar, to accomplish this you only instantiate the Datepicker into a DIV element.<\/p>\n<p class='codepen'  data-height='375' data-theme-id='19002' data-slug-hash='LpNMOv' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen LpNMOv by Israel Barragan Castillo (@Reedyseth) on CodePen.<\/p>\n\n<h2>Icon trigger<\/h2>\n<p>If you want to guide the usage of a Datepicker you can also add a Calendar icon, since this is a image you can use the image that fits your needs.<\/p>\n<p class='codepen'  data-height='386' data-theme-id='19002' data-slug-hash='KdzJzx' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen KdzJzx by Israel Barragan Castillo (@Reedyseth) on CodePen.<\/p>\n\n<h2>Datepicker with many options<\/h2>\n<p>So if you need more setting in the Datepicker you can always add them<\/p>\n<p class='codepen'  data-height='466' data-theme-id='19002' data-slug-hash='VvaqBw' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen VvaqBw by Israel Barragan Castillo (@Reedyseth) on CodePen.<\/p>\n\n<p><span style=\"color: #ff0000;\"><strong>NOTE:<\/strong><\/span> You can see the full code reference and more complex examples on the <a href=\"http:\/\/jqueryui.com\/datepicker\/\" target=\"_blank\">jQuery UI Datepicker<\/a> site.<\/p>\n<h2>Final Comments<\/h2>\n<p>As you can see the jQuery UI team has invested a lot of time and efforts on this jQuery Widget and with a few lines of code we can enhance the behavior of the Datepicker.<\/p>\n<p>This is a small tutorial, but with lots of information. I hope to post more tutorials like this and at the end put them together to make an simple application.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>On this days it is so easy to find a Javascript Datepicker on the field but if you really want a Datepicker with lots of feature you should definitely check out the jQuery UI Datepicker. This jQuery plugin is very configurable to fit your needs. In the following list you can find some of its &#8230; <a title=\"Datepicker jQuery UI Implementation\" class=\"read-more\" href=\"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/\" aria-label=\"Read more about Datepicker jQuery UI Implementation\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":2066,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[25],"tags":[43,67,59,69],"class_list":["post-2064","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-javascript-2","tag-jquery","tag-jquery-ui","tag-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Datepicker jQuery UI Implementation<\/title>\n<meta name=\"description\" content=\"On this quick tutorial I will show you how to implement a jQuery Datepicker. It covers a basic setting and then we dig into a very custom Datepicker.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Datepicker jQuery UI Implementation\" \/>\n<meta property=\"og:description\" content=\"On this quick tutorial I will show you how to implement a jQuery Datepicker. It covers a basic setting and then we dig into a very custom Datepicker.\" \/>\n<meta property=\"og:url\" content=\"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/\" \/>\n<meta property=\"og:site_name\" content=\"The Code\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-18T20:43:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-05-22T21:31:32+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2015\/09\/jquery-ui-datepicker.png\" \/>\n\t<meta property=\"og:image:width\" content=\"462\" \/>\n\t<meta property=\"og:image:height\" content=\"458\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Reedyseth\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Reedyseth\" \/>\n<meta name=\"twitter:site\" content=\"@Reedyseth\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Reedyseth\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/\"},\"author\":{\"name\":\"Reedyseth\",\"@id\":\"http:\/\/behstant.com\/blog\/#\/schema\/person\/760327e1ee480ad2aabe8e40d784ec9f\"},\"headline\":\"Datepicker jQuery UI Implementation\",\"datePublished\":\"2015-09-18T20:43:55+00:00\",\"dateModified\":\"2017-05-22T21:31:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/\"},\"wordCount\":569,\"commentCount\":0,\"image\":{\"@id\":\"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2015\/09\/jquery-ui-datepicker.png\",\"keywords\":[\"Javascript\",\"jQuery\",\"jQuery UI\",\"Tutorials\"],\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/\",\"url\":\"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/\",\"name\":\"Datepicker jQuery UI Implementation\",\"isPartOf\":{\"@id\":\"http:\/\/behstant.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/#primaryimage\"},\"image\":{\"@id\":\"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2015\/09\/jquery-ui-datepicker.png\",\"datePublished\":\"2015-09-18T20:43:55+00:00\",\"dateModified\":\"2017-05-22T21:31:32+00:00\",\"author\":{\"@id\":\"http:\/\/behstant.com\/blog\/#\/schema\/person\/760327e1ee480ad2aabe8e40d784ec9f\"},\"description\":\"On this quick tutorial I will show you how to implement a jQuery Datepicker. It covers a basic setting and then we dig into a very custom Datepicker.\",\"breadcrumb\":{\"@id\":\"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/#primaryimage\",\"url\":\"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2015\/09\/jquery-ui-datepicker.png\",\"contentUrl\":\"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2015\/09\/jquery-ui-datepicker.png\",\"width\":462,\"height\":458},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/behstant.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Datepicker jQuery UI Implementation\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/behstant.com\/blog\/#website\",\"url\":\"http:\/\/behstant.com\/blog\/\",\"name\":\"The Code\",\"description\":\"Learn Web Solutions in WordPress, PHP, jand also purchase code solutions.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/behstant.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"http:\/\/behstant.com\/blog\/#\/schema\/person\/760327e1ee480ad2aabe8e40d784ec9f\",\"name\":\"Reedyseth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/117af509aa15be89968fe955258a7bf8ed362ec2adf1afcf2af50a976f2349fa?s=96&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/117af509aa15be89968fe955258a7bf8ed362ec2adf1afcf2af50a976f2349fa?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/117af509aa15be89968fe955258a7bf8ed362ec2adf1afcf2af50a976f2349fa?s=96&r=g\",\"caption\":\"Reedyseth\"},\"description\":\"My Google Profile+\",\"sameAs\":[\"http:\/\/behstant.com\"],\"url\":\"http:\/\/behstant.com\/blog\/author\/reedyseth\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Datepicker jQuery UI Implementation","description":"On this quick tutorial I will show you how to implement a jQuery Datepicker. It covers a basic setting and then we dig into a very custom 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":"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/","og_locale":"en_US","og_type":"article","og_title":"Datepicker jQuery UI Implementation","og_description":"On this quick tutorial I will show you how to implement a jQuery Datepicker. It covers a basic setting and then we dig into a very custom Datepicker.","og_url":"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/","og_site_name":"The Code","article_published_time":"2015-09-18T20:43:55+00:00","article_modified_time":"2017-05-22T21:31:32+00:00","og_image":[{"width":462,"height":458,"url":"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2015\/09\/jquery-ui-datepicker.png","type":"image\/png"}],"author":"Reedyseth","twitter_card":"summary_large_image","twitter_creator":"@Reedyseth","twitter_site":"@Reedyseth","twitter_misc":{"Written by":"Reedyseth","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/#article","isPartOf":{"@id":"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/"},"author":{"name":"Reedyseth","@id":"http:\/\/behstant.com\/blog\/#\/schema\/person\/760327e1ee480ad2aabe8e40d784ec9f"},"headline":"Datepicker jQuery UI Implementation","datePublished":"2015-09-18T20:43:55+00:00","dateModified":"2017-05-22T21:31:32+00:00","mainEntityOfPage":{"@id":"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/"},"wordCount":569,"commentCount":0,"image":{"@id":"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/#primaryimage"},"thumbnailUrl":"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2015\/09\/jquery-ui-datepicker.png","keywords":["Javascript","jQuery","jQuery UI","Tutorials"],"articleSection":["jQuery"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/","url":"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/","name":"Datepicker jQuery UI Implementation","isPartOf":{"@id":"http:\/\/behstant.com\/blog\/#website"},"primaryImageOfPage":{"@id":"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/#primaryimage"},"image":{"@id":"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/#primaryimage"},"thumbnailUrl":"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2015\/09\/jquery-ui-datepicker.png","datePublished":"2015-09-18T20:43:55+00:00","dateModified":"2017-05-22T21:31:32+00:00","author":{"@id":"http:\/\/behstant.com\/blog\/#\/schema\/person\/760327e1ee480ad2aabe8e40d784ec9f"},"description":"On this quick tutorial I will show you how to implement a jQuery Datepicker. It covers a basic setting and then we dig into a very custom Datepicker.","breadcrumb":{"@id":"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/#primaryimage","url":"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2015\/09\/jquery-ui-datepicker.png","contentUrl":"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2015\/09\/jquery-ui-datepicker.png","width":462,"height":458},{"@type":"BreadcrumbList","@id":"http:\/\/behstant.com\/blog\/jquery\/datepicker-jquery-ui-implementation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/behstant.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Datepicker jQuery UI Implementation"}]},{"@type":"WebSite","@id":"http:\/\/behstant.com\/blog\/#website","url":"http:\/\/behstant.com\/blog\/","name":"The Code","description":"Learn Web Solutions in WordPress, PHP, jand also purchase code solutions.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/behstant.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"http:\/\/behstant.com\/blog\/#\/schema\/person\/760327e1ee480ad2aabe8e40d784ec9f","name":"Reedyseth","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/117af509aa15be89968fe955258a7bf8ed362ec2adf1afcf2af50a976f2349fa?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/117af509aa15be89968fe955258a7bf8ed362ec2adf1afcf2af50a976f2349fa?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/117af509aa15be89968fe955258a7bf8ed362ec2adf1afcf2af50a976f2349fa?s=96&r=g","caption":"Reedyseth"},"description":"My Google Profile+","sameAs":["http:\/\/behstant.com"],"url":"http:\/\/behstant.com\/blog\/author\/reedyseth\/"}]}},"_links":{"self":[{"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/posts\/2064","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/comments?post=2064"}],"version-history":[{"count":3,"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/posts\/2064\/revisions"}],"predecessor-version":[{"id":7682,"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/posts\/2064\/revisions\/7682"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/media\/2066"}],"wp:attachment":[{"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/media?parent=2064"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/categories?post=2064"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/tags?post=2064"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}