Use a JSON file to disable dates in JQuery UI-Datepicker

Question

I am an apprentice and new to programming, I know very little J-Query, JavaScript etc. I am creating a program where users will book days using a datepicker. I want all UK Bank Holidays to be disabled in the datepicker. I have a JSON file from the government website which has all the days that I would like to be disabled and other data. I want them to be disabled like the weekend that are currently disabled in the datepicker.

function IsWeekend(date) {
if (date.getDay() === 0 || date.getDay() === 6) return true;
else return false;
}

$(function () {
    $(".datepicker").datepicker({
        minDate: ('+1d'),
        dateFormat: 'dd/mm/yy',
        beforeShowDay: function (date) {
            return [(!IsWeekend(date))];
        }
    });
});

The JSON file is in this format

{"england-and-wales":{"division":"england-and-wales","events":[{"title":"New Year\u2019s Day","date":"2012-01-02","notes":"Substitute day","bunting":true},
{"title":"Good Friday","date":"2012-04-06","notes":"","bunting":false}

check this post http://stackoverflow.com/questions/15400775/jquery-ui-datepicker-disable-array-of-dates — Shiva, Mar 18 '14 at 10:34
@Shiva that doesn't really help, I have little experience as it states above — Chris, Mar 19 '14 at 12:27
Ok, I would like to know that the URL you provided ,contains holidays for *northern-ireland* ,*scotland* and *england-and-wales*, you want to disable calender for the holidays of one section or disable holidays mentioned in all the three section. — Shiva, Mar 19 '14 at 12:42
Oh right, I didn't notice that, just England and Wales please — Chris, Mar 20 '14 at 09:25

score 1 · Accepted Answer · answered Mar 20 '14 at 10:55

1

The solution is that we will first need to read the json file and load it to extract the dates to disable.

As AJAX calls can't be made remotely due to same origin policy you will have to copy the contents into a local JSON file.

Then we will traverse over the england-and-wales index as we are only concerned with the dates here and create an array and just have an additional check that if its a weekend or a date is present in this array we will disable it.

So the JavaScript code will be something .

var holidayDates = new Array(); // this array will store the holiday dates after being extracted form the JSON
     $.ajax({
       url: 'json/bank-holiday.json',// change the link to your local copy
       method: 'GET',
       dataType: 'json',
       success: function(data) {
         // now the data is loaded and we will traverse over the "england-and-wale" 's events and create an array to of dates of holidays
         var listOfEvents = data['england-and-wales'].events;
         for (var i in listOfEvents) {
           holidayDates.push(listOfEvents[i].date);// push the date to our array for checking afterwards
         }

       }
     });

     function IsWeekend(date) {
       if (date.getDay() === 0 || date.getDay() === 6) return true;
       else return false;
     }

      $(function() {
       $(".datepicker").datepicker({
         minDate: ('+1d'),
         dateFormat: 'dd/mm/yy',
         beforeShowDay: function(date) {
           var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
           var isDisabled = (!IsWeekend(date)) && (holidayDates.indexOf(string) == -1); // used to disable if its an holiday or weekend
           return [isDisabled];
         }
       });
     });

I have also created a working sample that you can find here

answered Mar 20 '14 at 10:55

Shiva

6,677
4
36
61

I am using the URL from the internet – Chris Mar 24 '14 at 12:23
@user3279193: that is a different issue, as cross domain calls are not allowed by the browsers , so you will need to store a copy of the file on your own web site,as I have done in the example. – Shiva Mar 24 '14 at 12:54
@user3279193: you can check this thread to better understand the issue. http://stackoverflow.com/questions/2558977/ajax-cross-domain-call – Shiva Mar 24 '14 at 12:54
okay, I've tried that and it doesn't work, it is disabling the weekends fine but nothing from the JSON file – Chris Mar 24 '14 at 13:52
That is because the ajax is not completing check your browser's console. And look in the URL I provided. Its the same code and working there. – Shiva Mar 24 '14 at 14:10
I have just got it working, I changed the datatype of the file from JSON to HTML and it worked, is this a good or bad idea? – Chris Mar 25 '14 at 13:39
I tried doing it but it did't work for me(I tried chrome 33 and FF 28). Probably you were using an old browser may be, and to answer your question , according to me its a bad idea coz it might break things as you are fooling around with the code by loading JSON inspite of HTML.If you can get JSONP data that is the only fool proof way to load cross domain JSON content. – Shiva Mar 26 '14 at 05:56
One more thing I would like to mention , if you are loading data directly from other site , please read the site's terms and conditions properly , because most of the web sites disallow direct hotlinking, especially when its a govt. site. :) – Shiva Mar 26 '14 at 05:58
I went to change the JSON system and was hoping you would look at my other question, thanks http://stackoverflow.com/questions/23681344/disable-dates-in-ui-date-picker-from-array – Chris May 19 '14 at 14:17

Use a JSON file to disable dates in JQuery UI-Datepicker

1 Answers1