我一直在使用 daterangepicker，我正在尝试验证范围日期，它可以工作，但我在循环中

问题描述

这是我的情况； daterangepicker 正在工作，一切确实都在工作，但是有一个循环我无法找到避免的方法。每次我选择一个无效日期的日期范围时，我都会收到警报消息，但这永远不会停止弹出。其实我发现如果把isInvalidDate里面的代码全部隐藏起来，只写一个console.log，还是有循环的。我试图将 validaterange 函数带到外面，但由于变量是本地变量，该函数不起作用。 这是我的 .js：

$(document).ready(function () {
    idRoom = document.getElementById("room_name").value;
    $.ajax({
        url: "getData/" + idRoom,type: "get",dataType: "json",success: function (response) {
            var today = new Date();
            var day =
                today.getFullYear() +
                "/" +
                today.getMonth() +
                +1 +
                "/" +
                today.getDate();
            $('input[name="daterange"]').daterangepicker({
                opens: "right",drops: "up",minDate: day,maxSpan: {
                    days: 15,},locale: {
                    format: "YYYY/MM/DD",isInvalidDate: function (date) {
                    var len = response["data"].length;
                    for (var i = 0; i < len; i++) {
                        var Str = response["data"][
                            i
                        ].reservation_checkout.replace(/-/g,","); //quitamos 1 dia al checkout para que ese dia este disponible
                        var newStr = new Date(Str);
                        newStr.setDate(newStr.getDate() - 1);
                        var newdate = new Date(newStr);
                        date[i] = newdate.toISOString().split("T")[0];
                    }
                    var dateranges = []; //obtenemos los datos checking/checkout y los metemos en datepicker
                    for (var i = 0; i < len; i++) {
                        dateranges.push({
                            start: moment(
                                response["data"][i].reservation_checking
                            ),end: moment(date[i]),});
                    }
                    var daterangesfix = [];
                    for (var i = 0; i < len; i++) {
                        var startDatefix = moment(
                            response["data"][i].reservation_checking
                        ).format("DD-MM-YYYY");
                        var endDatefix = moment(
                            response["data"][i].reservation_checkout
                        ).format("DD-MM-YYYY");
                        daterangesfix.push(startDatefix,endDatefix);
                    }

                    $('input[name="daterange"]').on(
                        "apply.daterangepicker",function validateDaterange() {
                            var txtStartDate = $(
                                'input[name="daterange"]'
                            ).data("daterangepicker").startDate;
                            var txtEndDate = $('input[name="daterange"]').data(
                                "daterangepicker"
                            ).endDate;
                            var startDate;
                            var endDate;
                            var tempDate;
                            if (txtStartDate == "") return false;
                            if (txtEndDate == "") return false;
                            startDate = new Date(txtStartDate);
                            endDate = new Date(txtEndDate);
                            for (i = 0; i < 2 * len; i++) {
                                var temp = daterangesfix[i].split("-");
                                tempDate = new Date(
                                    temp[2],temp[1] - 1,temp[0]
                                );
                                if (
                                    startDate < tempDate &&
                                    endDate > tempDate
                                ) {
                                    alert("Invalid Date Range");
                                    return false;
                                }
                            }
                        }
                    );
                    return dateranges.reduce(function (bool,range) {
                        return (
                            bool || (date >= range.start && date <= range.end)
                        );
                    },false);

                },});
        },});
});


$("#button1").click(function (event) {
    startDate = $('input[name="daterange"]').data("daterangepicker").startDate;
    var d = new Date(startDate),month = "" + (d.getMonth() + 1),day = "" + d.getDate(),year = d.getFullYear();
    start_Date_fix = year + "-" + month + "-" + day;
    document.getElementById("start_Date").value = start_Date_fix;

    endDate = $('input[name="daterange"]').data("daterangepicker").endDate;
    var d = new Date(endDate),year = d.getFullYear();
    end_Date_fix = year + "-" + month + "-" + day;
    document.getElementById("end_Date").value = end_Date_fix;

    //calcular numero de noches
    var date = $('input[name="daterange"]').val();
    var str = date.split("-");
    var startDate = str[0];
    var startDate_f = startDate.split("/");
    var startDate_fo = new Date(
        startDate_f[0],startDate_f[1] - 1,startDate_f[2]
    );
    var endDate = str[1];
    var endDate_f = endDate.split("/");
    var endDate_fo = new Date(endDate_f[0],endDate_f[1] - 1,endDate_f[2]);
    var Difference_In_Days = Math.round(
        (endDate_fo - startDate_fo) / (1000 * 60 * 60 * 24)
    );

    var year = startDate_f[0];
    var month = startDate_f[1];
    var day = startDate_f[2].replace(/\s+/g,"");
    var guests = document.getElementById("guests").value;

    $.ajax({
        url:
            "calculatePrice/" +
            year +
            "/" +
            month +
            "/" +
            day +
            "/" +
            Difference_In_Days +
            "/" +
            idRoom +
            "/" +
            guests,data: {},success: function (data) {
            document.getElementById("total_amount").value = data;
        },});
});

我粘贴了一个完整的副本，但我想问题应该出在这些行中。正如你将看到的，我是一个新手，我希望你理解我的英语水平很差。我花了一些时间阅读帖子，但我不太确定这一点。 非常感谢。

解决方法

我已经解决了，我刚刚能够像这样把函数取出来；

<section transition:slide> ... </section>

,

我建议使用 Laravel 的验证来验证服务器端的日期范围 如果需要格式化，工具和碳。而不是在价格计算器路线上使用 GET 方法：

$.ajax({
    url:
        "calculatePrice/" +
        year +
        "/" +
        month +
        "/" +
        day +
        "/" +
        Difference_In_Days +
        "/" +
        idRoom +
        "/" +
        guests,

您将发出一个 post 请求并使用 Request $request typehint 或 Request Facade 来访问传入数据并简单地从计算器返回数据或继续使用 GET 方法并将日期输入作为通配符/路由参数传递

如果您需要前端验证，我建议您使用 Vue 组件和 Vuelidate 等包来简化流程。根据我的经验，前端验证在不使用 Vuelidate 的情况下非常耗时。这是我的建议，因为还有很多日期选择器 Vue 组件可用，它们也可以配置为在前端进行格式化。

（如果“警报”是指实际的警报窗口而不是引导程序组件） 旁注：使用警报报告验证错误是不切实际的，在我个人看来，不应该使用。相反，验证服务器端并返回错误消息，在前端检查错误消息，然后在其输入的附近显示这些消息。

在我输入此内容时，您似乎已经回答了您自己的问题，所以我还是将其留在这里。