将 Ajax 数组插入日期范围选择器答案

【问题标题】：Inserting an Ajax array into a date range picker将 Ajax 数组插入日期范围选择器
【发布时间】：2019-08-20 04:49:23
【问题描述】：

我已经从社区获得了很多关于这个项目的帮助，但我还需要更多帮助。我有一个 Javascript 日期范围选择器，我需要从 MySQL 数据库中插入一个 Ajax 数组，但由于某种原因它不起作用。这是我的代码：

文件 #1 getdaterangepicker.php

   <?php
include 'dbconfig.php';

$sql="SELECT start_date, end_date FROM date_ranges ";
$result = mysqli_query($conn,$sql);

// Create empty array.
$date_ranges = array();

// Add every row to array;
while($row = mysqli_fetch_array($result)) {

    // Create an associative array to store the values in.
    // This will later be a JavaScript Object.
    array_push($date_ranges, array(
        'start'   => $row['start_date'],
        'end'     => $row['end_date']
    ));

    mysqli_close($conn);

} 

// Send the $date_ranges as JSON.
$json = json_encode($date_ranges); // '[{"start": "2019-08-18", "end": "2019-08-19"}]'
echo $json;
?>

文件2 index.php：

// AJAX request wrapper function.
// Call this function to get the dates from the server.
function getDateRanges(callback) {
    $.ajax({
        url: 'getdaterangepicker.php',       // Change this to the uri of your file
        method: 'GET',                 // Use the GET method
        dataType: 'html',              // Expect a JSON response
        success: function(response) {  // What will happen when the request succeeds
            if (response) {            // Check if there is a response
                callback(response);    // Pass the response into the callback
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus + ': ' + errorThrown);
        }
    });
}
getDateRanges(function(dates) {

    $('input[name="start_date"]').daterangepicker({
        autoUpdateInput: false,
        locale: {
            cancelLabel: 'Clear'
        },
        isInvalidDate: function(date) {
            // Here use your dates that you've got from the server.
            var dateRanges = [dates];
                        console.log(dates);
            return dateRanges.reduce(function(bool, range) {
                return bool || (date >= moment(range.start) && date <= moment(range.end)); 
            }, false);
        }
    });

    $('input[name="start_date"]').on('apply.daterangepicker', function(ev, picker) {
        document.getElementById("start_date").value = picker.startDate.format('MM/DD/YYYY');
        document.getElementById("end_date").value = picker.endDate.format('MM/DD/YYYY');
    });

    $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
        $(this).val('');
    });

});

它应该可以工作，javascript 控制台输出正确的数组 ([{"start":"2019-08-20","end":"2019-08-25"}]) 但它自身的日期选择器并没有划掉无效日期，但是如果我进入代码并将 var dateRanges = [dates]; 替换为 var dateRanges = [{"start": "2019-08-25", "end": "2019-08-31"}];正如预期的那样，它完美地工作。是什么赋予了？有任何想法吗？日期范围选择器来自这里：http://www.daterangepicker.com

【问题讨论】：

dates 不是已经是一个数组了吗？ var dateRanges = dates; 会发生什么
@Nick - 我不关注？
您正在使用var dateRanges = [dates]; 创建一个额外级别的数组，我认为您只需要var dateRanges = dates;
当我这样做时，我得到这个错误：Uncaught TypeError: dateRanges.reduce is not a function
啊 - dates 是一个字符串，而不是一个数组。您还需要将dataType: 'html' 更改为dataType: 'json'。

标签： javascript arrays ajax daterangepicker

【解决方案1】：

您有几个问题。主要是你的ajax请求上的dataType是html，而应该是json。因为它是html，所以dates 最终是一个字符串。更正此问题后，dates 将根据需要成为一个数组，然后您可以直接将其分配给dateRanges，而无需添加嵌套级别，即

var dateRanges = dates;

【讨论】：