Question

首先，我知道这个问题已被提出，但我已尝试过大多数（如果不是所有）提供的解决方案，并且无法使其正常工作。

我在我的Symfony 3项目中使用flatpickr，我需要能够根据预订的假期禁用某些日期。当从下拉列表中选择某个人时，系统会查询数据库，以确定他们是否在任何时间点上假期，如果是，则将这些日期作为＆＃39;从＆＃39; ＆＃39;到＆＃39;。然后结果是JSON编码并通过Ajax响应返回。

这是来自Ajax调用的示例响应：

[{"from":"2017-06-05","to":"2017-06-09"},{"from":"2017-06-27","to":"2017-06-28"}]

flatpickr需要一组日期才能禁用，如下所示：

{
    disable: [
        {
            from: "2017-04-01",
            to: "2017-06-01"
        },
        {
            from: "2017-09-01",
            to: "2017-12-01"
        }
    ]
}

所以我使用以下jQuery来尝试获得所需的结果：

$.each(response, function(i, dateitem){
        console.log(dateitem.from + " - " + dateitem.to);
});

出于测试目的，但没有显示。 response是Controller中数据库的返回结果。

任何人都可以帮助我将这些数据转换为与Flatpickr一起使用的正确格式，因为我很挣扎。

Answer 1

最后，我做了很长一段路，在那里你按顺序说明每个日期都被禁用。

我使用DatePeriod()来获取from和to之间的所有日期，然后再次在结束日期添加（因为DatePeriod()没有这样做），如下所示：

foreach ($holidays as $row) {
    $start_date = new \DateTime($row->getStartDate()->format('Y-m-d'));
    $end_date = new \DateTime($row->getEndDate()->format('Y-m-d'));
    $date_range = new \DatePeriod($start_date, new \DateInterval('P1D'), $end_date);
    foreach($date_range as $date){
        $date_array[] = $date->format('Y-m-d');
    }
    // Add the end date as this is not included in the date period.
    $date_array[] = $row->getEndDate()->format('Y-m-d');
}

我给ajax一个json编码结果，然后是ajax成功：

var parsed = JSON.parse(response);

var optional_config = {
    enableTime : true,
    disable: parsed
};

这就是诀窍:)。

Answer 2

这绝对适合我。我没有向您展示服务器代码，因为您使用的是PHP而我正在使用C＃。如果您需要我的服务器代码，请索取。

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index800</title>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/2.6.3/flatpickr.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/2.6.3/flatpickr.js"></script>
    <script type="text/javascript">
        $(function () {
            //MAKE SURE TO click on Ok button to fill jsonDateRanges
            var jsonDateRanges;
            $("#btn").click(function (ev) {
                var AjaxDataReceive = { organizationId: $("#ddOrganization").val() };
                $.ajax({
                    type: "POST",
                    url: "/Home/Index800",
                    data: AjaxDataReceive,
                    dataType: "json",
                    success: function (response) {
                        $("#output").val(JSON.stringify(response.AjaxDataSend));
                        jsonDateRanges = response.AjaxDataSend;
                        $("#flatpickrText").flatpickr
                        (
                            {
                                disable: jsonDateRanges

                            }
                        );
                    },
                    error: function (Result) {
                        alert("Error");
                    }
                });
                //var jsonDateRangesWorks = [
                //            {
                //                from: "2017-05-01",
                //                to: "2017-05-03"
                //            },
                //            {
                //                from: "2017-05-10",
                //                to: "2017-05-12"
                //            }
                //]
            })


        })
    </script>
</head>
<body>
    <div>
        <input type="text" value="APDH" id="ddOrganization" />
        <input type="text" id="output" style="width:600px" />
        <input type="text" id="flatpickrText" />
        <input type="button" value="Ok" id="btn" />
    </div>
</body>
</html>

Answer 3

这是我的服务器代码，以备不时之需。

public class AjaxDataReceive
{
    public string organizationId { get; set; }
}

public class AjaxDataSend
{
    public string from { get; set; }
    public string to { get; set; }
}

public class HomeController : Controller
{
    [HttpPost]
    public ActionResult Index800(AjaxDataReceive ajaxData)
    {
        AjaxDataSend ads = new AjaxDataSend { from = "2017-05-03", 
            to = "2017-05-05" };
        AjaxDataSend ads2 = new AjaxDataSend
        {
            from = "2017-05-10",
            to = "2017-05-12"
        };

        IList<AjaxDataSend> list = new List<AjaxDataSend>();
        list.Add(ads);
        list.Add(ads2);

        return Json(new
        {
            AjaxDataSend = list
        }
                , @"application/json");
    }

    public ActionResult Index800()
    {
        return View();
    }

Answer 4

我很难过，它对你不起作用。您需要更改服务器代码，以便在ajax调用成功时放置断点时，有问题的变量如下所示：

如何遍历json数据并在flatpickr上实现

4 个答案: