Get data from Json in DatePicker

See more:

JScript.NET

jQuery

C#5.0

MVC4

I have a mvc4 application. I am using a datepicker and a method(GetAvailableDates) that generate a list of available dates. The dates in that method(GetAvailableDates) have to be also available in the DatePicker and the rest of the dates disabled in the DatePicker.

The method(GetAvailableDates) is like this:

public AvailableDates GetAvailableDates(string branchPublicId, string servicePublicId)
        {
            HttpWebRequest httpRequest = CreateHttpRequest("calendar-backend/public/api/v1/branches/" + branchPublicId + "/services/" + servicePublicId + "/dates", HttpMethod.Get, "application/json");
            string json = Get(httpRequest);
            return JsonConvert.DeserializeObject<AvailableDates>(json);
        }

and jscripts is like this:

; (function ($) {
    $(function () {
        $("form.xforms-form").bind({
            XForms_Enrich: function (e) {
                if ($.fn.datepicker) {
                    $("input.qmatic-dateslot", e.args.data).each(function () {


                        var inp = $(this);
                        if (inp.is(":disabled")) return;
                        var tabindex = inp.attr("tabindex");

                        var dateFormat = $.xforms.getProperty(inp, 'dateFormat') || 'd-M-yy';
                        dateFormat = dateFormat.replace(/m/g, '0').replace(/h/gi, '0').replace(/t/g, '').replace(/M/g, 'm').replace('yyyy', 'yy');

                        $("#" + inp.attr("id") + " ~ button.ui-datepicker-trigger").attr("tabindex", tabindex);

                        var clearBtn = $('<button class="ui-datepicker-clear" type="button" tabindex="' + tabindex + '">x</button>').click(function () { inp.val(''); inp.change(); return false; });
                        inp.after(clearBtn);



                        inp.datepicker({
                            dateFormat: dateFormat,
                            changeMonth: true,
                            //url: "/QMatic/GetAvailableDates/",
                            //url: "~/GetAvailableDates, QMatic",
                            //type: "GET",
                            //dataType: "json",
                            //contentType: "application/json; charset=utf-8",
                            //data:"{}",

                            beforeShowDay:$.getJSON('~/QMatic/GetAvailableDates/',  function (date) {


                                var array = []; //["2015-03-14", "2015-03-15", "2015-03-16"];
                                alert(arrray);

                                var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                                return [array.indexOf(string) == -1];
                            }),
                            changeYear: false,
                            showWeek: true,
                            firstDay: 1,
                            yearRange: "c-100:c+15",
                            showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"

                        })

                });

                    $("#ui-datepicker-div").hide();
                }
            }
        })
    })
})(jQuery);

The json that generates the available dates is:

{"notifications":[],"dates":["2015-07-23T00:00:00","2015-07-24T00:00:00","2015-07-27T00:00:00","2015-07-28T00:00:00","2015-07-29T00:00:00","2015-07-30T00:00:00","2015-07-31T00:00:00","2015-08-03T00:00:00","2015-08-04T00:00:00","2015-08-05T00:00:00","2015-08-06T00:00:00","2015-08-07T00:00:00","2015-08-10T00:00:00","2015-08-11T00:00:00","2015-08-12T00:00:00","2015-08-13T00:00:00","2015-08-14T00:00:00","2015-08-17T00:00:00","2015-08-18T00:00:00","2015-08-19T00:00:00","2015-08-20T00:00:00"],"meta":{"start":"","end":"","totalResults":21,"offset":null,"limit":null,"fields":"","arguments":{}}}

so there are 21 available dates. The class name of the method GetAvailableDatesin is QMatic.

Thank you