Get Array of dates using Jquery MVC3

Question

Guys I'm using JQuery UI date picker plugin for Reservation system. For this, I'm checking already booked dates using following script:

var bookedDays = ["2013-5-3", "2013-5-4"];
function assignCalendar(id) {
    $('<div class="calendar" />').insertAfter($(id)).datetimepicker({
       altFormat: "dd-mm-yy",
           altTimeFormat: "hh:mm tt",
           useLocalTimezone: true,
           minDate: new Date(),
           maxDate: '+1y',
           altField: id,
           altFieldTimeOnly: false,
           showButtonPanel: false,
           firstDay: 1,
           dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
           beforeShowDay: isAvailable
        });
      }

      function isAvailable(date) {
         var dateAsString = date.getFullYear().toString() + "-" + (date.getMonth() + 1).toString() + "-" + date.getDate();
         var result = $.inArray(dateAsString, bookedDays) == -1 ? [true] : [false];
         return result;
     }

This is working fine. But, what I need is loading booked dates dynamically from DB as an array and pass that to above function. I tried the following But not getting the proper values.

Here's my Controller code:

public JsonResult GetBookedDates(int resourceTypeID=1)
        {
            var dates = new List<string>();

            var resources = _db.Resources.Where(r => r.ResourceTypeID == resourceTypeID);
            foreach (var resource in resources)
            {
                Resource resource1 = resource;

                var reservedDates = _db.Reservations.Where(rv => rv.ResourceID == resource1.ID);
                foreach (var reservedDate in reservedDates)
                {
                    for (DateTime dt = Convert.ToDateTime(reservedDate.Booked); dt <= Convert.ToDateTime(reservedDate.Checkout); dt = dt.AddDays(1))
                    {
                        dates.Add("\"" + dt.Year + "-" + dt.Month + "-" + dt.Day + "\"");
                        //dates.Add(dt.Year + "-" + dt.Month + "-" + dt.Day);
                        //dates.Add("\"" + dt.ToString("yyyy-MM-dd") + "\"");
                    }
                }
            }
            return Json(dates, JsonRequestBehavior.AllowGet);
        }

And Modified JQuery function:

$(document).ready(function (e) {
        $.ajax({
            type: 'GET',
            url: "/Home/GetBookedDates?resourceTypeID=1",
            traditional: true,
            success: function (data) {
                var bookedDays = data // --> Here I need the array of booked dates
                assignCalendar('#date_in_input');
                assignCalendar('#date_out_input');

                function assignCalendar(id) {
                    $('<div class="calendar" />').insertAfter($(id)).datetimepicker({
                        altFormat: "dd-mm-yy",
                        altTimeFormat: "hh:mm tt",
                        useLocalTimezone: true,
                        minDate: new Date(),
                        maxDate: '+1y',
                        altField: id,
                        altFieldTimeOnly: false,
                        showButtonPanel: false,
                        firstDay: 1,
                        dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
                        beforeShowDay: isAvailable
                    });
                }

                function isAvailable(date) {
                    var dateAsString = date.getFullYear().toString() + "-" + (date.getMonth() + 1).toString() + "-" + date.getDate();
                    var result = $.inArray(dateAsString, bookedDays) == -1 ? [true] : [false];
                    return result;
                }
            }
        });
    });

Please help me to solve this

@Michael_B firebug showing the json as ["2013-5-10","2013-5-12"] but still the algorithm not working — Haavali
– Haavali, Commented May 6, 2013 at 19:46

Kaizen Programmer · Accepted Answer · 2013-05-06 20:58:05Z

I believe your problem is that you have the datepicker function inside assignCalendar which needs to be called. You either need to have it called directly after the load or pull out the function assignCalendar(id){...and enclose the ajax call here...}

$(document).ready(function (e) {
    $.ajax({
        type: 'GET',
        url: "/Home/GetBookedDates?resourceTypeID=1",
        traditional: true,
        success: function (data) {
            var bookedDays = data // --> Here I need the array of booked dates
            assignCalendar('#date_in_input');
            assignCalendar('#date_out_input');
            $('<div class="calendar" />').insertAfter($(id)).datetimepicker({
                altFormat: "dd-mm-yy",
                altTimeFormat: "hh:mm tt",
                useLocalTimezone: true,
                minDate: new Date(),
                maxDate: '+1y',
                altField: id,
                altFieldTimeOnly: false,
                showButtonPanel: false,
                firstDay: 1,
                dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
                beforeShowDay: function (date) {
                    var dateAsString = date.getFullYear().toString() + "-" + (date.getMonth() + 1).toString() + "-" + date.getDate();
                    var result = $.inArray(dateAsString, bookedDays) == -1 ? [true] : [false];
                    return result;
                }
            });
        }
    });
});

UPDATE

Your service is returning the dates with a leading 0. You should be able to just use this instead:

dates.Add("\"" + dt.ToString("yyyy-M-d") + "\"");

If I pass var bookedDays = ["2013-5-3", "2013-5-10"]; it works fine. but passing dynamic data say var bookedDays = [data] is not working
Place a console.log(bookedDays) and console.log(dateAsString) before return result; in beforeShowDay. What do they show?
dateAsString: 2013-4-29 bookedDays:2013-05-03,2013-05-04,2013-05-05,2013-06-10,2013-06-11 And dateAsString repeats for each day in a calender
Solved! thanks.... I made it in ugly way, matching 20130429 with 20130503, 20130504 and so on.. removed '-' char from dates...

Collectives™ on Stack Overflow

Get Array of dates using Jquery MVC3

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related