0

伙计们,我正在为预订系统使用 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;
     }

这工作正常。但是,我需要的是从数据库动态加载预订日期作为数组并将其传递给上述函数。我尝试了以下但没有得到正确的值。

这是我的控制器代码:

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

请帮我解决这个问题

4

1 回答 1

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") + "\"");
于 2013-05-06T19:49:46.763 回答