Question

伙计我正在使用预订系统的JQuery UI日期选择器插件。为此，我使用以下脚本检查已预订的日期：

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;
     }

这很好用。但是，我需要的是从DB动态加载预定日期作为数组并将其传递给上面的函数。我尝试了以下但没有得到正确的值。

这是我的控制器代码：

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);
        }

修改了JQuery函数：

$(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;
                }
            }
        });
    });

请帮我解决这个问题

Answer 1

我相信你的问题是你需要调用assignCalendar内的datepicker函数。您需要在加载后直接调用它，或者拔出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;
                }
            });
        }
    });
});

<强>更新

您的服务正在返回带有前导0的日期。您应该可以使用它：

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

使用Jquery MVC3获取日期数组

1 个答案: