通过数据库 json 时间戳日期列表设置日期选择器的禁用日期

Question

我想通过数据库中的列表禁用 flatpicker 插件中的日期。这是从数据库中获取它们的代码

public List<DateTime> DisablingDates()
        {
            List<DateTime> dates = new List<DateTime>();
            var groups = OrderContext.Collection().GroupBy(o => o.DueDate);
            foreach (var g in groups)
            {
                if (g.Count() == 2)
                {
                    var val = g.Key.Date;
                    val.ToString("dd/MMM/yyyy");
                    dates.Add(val);
                }
            }            
            return dates;
        }

我通过 viewbag 将列表传递给 jquery，但插件停止工作。浏览器调试器显示带有时间戳日期的 DisabledDates 数组，因此我尝试将它们转换为可读日期，但警报功能没有'显示值。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.6/flatpickr.min.js"></script>
<script>
        $("#datepicker").flatpickr({
            enableTime: false,
            dateFormat: "d/M/Y",
            defaultDate: new Date().fp_incr(2),
            minDate: new Date().fp_incr(2),
            maxDate: new Date().fp_incr(90),
            disable:
                function (date) {
                var DisabledDates = @Html.Raw(Json.Encode(ViewBag.DisabledDates));
                var array = [];
                $.each(DisabledDates, function (index, value) {
                    var date1 = new Date(value * 1000).toDateString();
                    alert(index + ": " + date1);
                    array.push(date1);
                });
                var fulldmy = date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear();
                if ($.inArray(fulldmy, array) === -1) {
                    return false;
                } else {
                    return true;
                }
            },

        });

浏览器调试器中的 DisabledDates 数组

 function (date) {
 var DisabledDates  = ["\/Date(1599166800000)\/","\/Date(1599253200000)\/","\/Date(1599944400000)\/"];
 var array = [];

然后我尝试将 JsonResult 操作与 ajax 方法一起使用，但插件再次停止工作。

 $("#datepicker").flatpickr({
            enableTime: false,
            dateFormat: "d/M/Y",
            defaultDate: new Date().fp_incr(2),
            minDate: new Date().fp_incr(2),
            maxDate: new Date().fp_incr(90),
            disable: function (date) {
                 $.ajax({
                    url: '@Url.Action("GetReservedDates", "Basket")',
                    type: "GET",
                    success: function (result) {
                        var fulldate = date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear();
                        if ($.inArray(fulldate, result) === -1) {
                            return false;
                        } else {
                            return true;
                        }
                    }
                 });
            }

        });

JsonResult 动作

[HttpGet]
        public JsonResult GetReservedDates()
        {
            var dates = orderService.DisablingDates();
            return Json(new { dates }, "text/x-json", JsonRequestBehavior.AllowGet);
        }

这是我目前正在尝试的第二个插件。我该怎么办？

提前致谢。

Answer 1

我找到了导致插件停止工作的原因。禁用选项在数组括号 [] 之间采用函数。然后将时间戳日期转换为可读日期，我将值编辑为仅包含从 /Date(1599166800000)/ 到 1599166800000 的毫秒数。最后，插件按预期禁用了 database-retrieved 日期。

$("#datepicker").flatpickr({
            enableTime: false,
            dateFormat: "d/M/Y",
            defaultDate: new Date().fp_incr(2),
            minDate: new Date().fp_incr(2),
            maxDate: new Date().fp_incr(90),
            disable: [Ddates],
            onMonthChange: [Ddates],           
        });
                function Ddates (date) {
                    var DisabledDates  = @Html.Raw(Json.Encode(ViewBag.DisabledDates));
                    var array = [];
                    $.each(DisabledDates, function (index, value) {
                        value = value.replace("\", "")
                        value = value.replace("/Date(", "")
                        value = value.replace(")\/", "")
                        var date1 = new Date(parseInt(value, 10)).toLocaleDateString();
                        array.push(date1);
                    });
                        date = date.toLocaleDateString();
                        return ($.inArray(date, array) != -1);
            }

通过数据库 json 时间戳日期列表设置日期选择器的禁用日期

set the disabled dates of a datepicker by a database json list of timestamp dates

javascript

c#

model-view-controller

jquery

datepicker