{"id":1130,"date":"2010-10-20T09:35:18","date_gmt":"2010-10-20T08:35:18","guid":{"rendered":"http:\/\/www.simonbattersby.com\/blog\/?page_id=1130"},"modified":"2010-11-22T09:10:30","modified_gmt":"2010-11-22T08:10:30","slug":"jquery-ui-datepicker-disabling-specific-dates","status":"publish","type":"page","link":"https:\/\/www.simonbattersby.com\/blog\/jquery-ui-datepicker-disabling-specific-dates\/","title":{"rendered":"jQuery UI Datepicker : disabling specific dates"},"content":{"rendered":"<p>Here&#8217;s another demo of the <a href=\"http:\/\/jqueryui.com\/demos\/datepicker\/\" title=\"jQuery UI datepicker\">jQuery UI Datepicker<\/a> plugin, here disabling specific dates. This is actually pretty straightforward. Here&#8217;s the basic javascript:<\/p>\r\n\r\n<pre>\r\n$(function() {\r\n        $( \"#pickdate\" ).datepicker({\r\n            dateFormat: 'dd MM yy',\r\n            beforeShowDay: checkBadDates\r\n            });\r\n            \r\n}<\/pre>\r\n\r\n<p>So here I&#8217;m just setting the date format and using the <code>beforeShowDay<\/code> event to call a function to check if any of the dates should be disabled:<\/p>\r\n\r\n<pre>\r\nvar $myBadDates = new Array(\"10 October 2010\",\"21 November 2010\",\"12 December 2010\",\"13 January 2011\",\"14 February 2011\",\"15 March 2011\");\r\n\r\nfunction checkBadDates(mydate){\r\nvar $return=true;\r\nvar $returnclass =\"available\";\r\n$checkdate = $.datepicker.formatDate('dd MM yy', mydate);\r\nfor(var i = 0; i &lt; $myBadDates.length; i++)\r\n    {    \r\n       if($myBadDates[i] == $checkdate)\r\n          {\r\n        $return = false;\r\n        $returnclass= \"unavailable\";\r\n        }\r\n    }\r\nreturn [$return,$returnclass];\r\n}<\/pre>\r\n\r\n<p>Here I'm just populating a local array with my list of excluded dates, but this could esasily be populated from a database lookup, for example. My checkBadDates function is passed each date of the month to be displayed, with the date automatically passed as the argument by datepicker. My function sets some initial values, and then searches the array for a matched bad date - and if found amends the return values appropriately. Note I have to set the format of the date to be checked again so it matches that of my array - it doesn't use the date format I've set earlier. <\/p>\r\n\r\n<p>And really, that's all there is to it. Here's a <a href=\"\/demos\/datepicker_demo2.php\" title=\"jQuery UI datepicker with specific dates disabled\">demo<\/a> - I've used the class returned by the checkBadDate function to set a green\/red background colour for available\/unavailable dates. Tested in IE6, IE7, IE8, Firefox3, Chrome, Opera 9, Opera 10 and Safari 4, all on Win\/XP, and Safari 5 on Mac OS X\/Snow Leopard. View the source to see the css and html. Feel free to leave comments, questions and suggestions for improvement below.<\/p>\r\n\r\n<p>I have another, more complex, demo <a href=\"\/blog\/jquery-ui-datepicker-select-weeks-only\/\" title=\"jQuery UI datepicker restricted to weeks\">here<\/a> which restricts the use to selecting weeks only. <\/p> \r\n\r\n","protected":false},"excerpt":{"rendered":"<p>Here&#8217;s another demo of the jQuery UI Datepicker plugin, here disabling specific dates. This is actually pretty straightforward. Here&#8217;s the basic javascript: $(function() { $( &#8220;#pickdate&#8221; ).datepicker({ dateFormat: &#8216;dd MM yy&#8217;, beforeShowDay: checkBadDates }); } So here I&#8217;m just setting the date format and using the beforeShowDay event to call a function to check if [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1130","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/pages\/1130","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/comments?post=1130"}],"version-history":[{"count":0,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/pages\/1130\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/media?parent=1130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}