使用 ajax 的 JQuery 中的插件 datetimepicker 出错答案

【问题标题】：Error with plugin datetimepicker in JQuery with ajax使用 ajax 的 JQuery 中的插件 datetimepicker 出错
【发布时间】：2017-05-22 09:47:19
【问题描述】：

我尝试这样做，禁用所有日期并启用我通过参数传递的日期

此代码无效

$.ajax({
    method: "GET",
    url: "url",
})
.success(function(msg) {
    console.log(JSON.parse(msg));
    var disableIni = JSON.parse(msg);

    var disable = [];

    for (var i = 0; i < disableIni.length; i++)
    {
        disable[i] = moment(disableIni[i][0] + "/" + disableIni[i][1] + "/" + disableIni[i][2], "M/DD/YYYY");
        if (i > 5)
        {
            break;
        }
    }

    console.log(disable);

    var vectorTest = [moment("5/25/2017", "M/DD/YYYY"), moment("5/26/2017", "M/DD/YYYY"), moment("5/27/2017", "M/DD/YYYY")];

    console.log(vectorTest);

    var vector = disable;
    console.log(vector);

    $('#input_from').datetimepicker({
        locale: 'es',
        format: 'DD-MM-YYYY',
        enabledDates: $.each(vector, function(i, value) {
            return value;
        })
    });
});

但如果我将var vector = disable 更改为var vector = vectorTest，则工作正常：

$.ajax({
    method: "GET",
    url: "url",
})
.success(function(msg) {
    console.log(JSON.parse(msg));
    var disableIni = JSON.parse(msg);

    var disable = [];

    for (var i = 0; i < disableIni.length; i++)
    {
        disable[i] = moment(disableIni[i][0] + "/" + disableIni[i][1] + "/" + disableIni[i][2], "M/DD/YYYY");
        if (i > 5)
        {
            break;
        }
    }

    console.log(disable);

    var vectorTest = [moment("5/25/2017", "M/DD/YYYY"), moment("5/26/2017", "M/DD/YYYY"), moment("5/27/2017", "M/DD/YYYY")];

    console.log(vectorTest);

    var vector = vectorTest;
    console.log(vector);

    $('#input_from').datetimepicker({
        locale: 'es',
        format: 'DD-MM-YYYY',
        enabledDates: $.each(vector, function(i, value) {
            return value;
        })
    });
});

有可能做到我想要的吗？？

编辑

ajax 响应：

这是一个包含其他 3 个位置的数组的数组。 [0] => 月，[1] => 日，[2] => 年

谢谢

【问题讨论】：

您的msg 变量是字符串还是对象？如果对象则使用msg.data
创建一个变量disableParams = [true,msg]，然后使用这个disable:disableParams
通过json_encode()转成json发送，然后使用parseJSON()正确使用
试试这个 msgArr = JSON.parse(msg) 然后使用 msgArr。 JSON.parse() 将字符串转换为数组
现在的错误是什么？如果上面的结果是一个字符串，则通过添加 tempMsg = "["+msg+"]" 使其成为二维数组字符串，然后使用 JSON.parse(tempMsg) 将其转换为二维数组。

标签： jquery datetimepicker bootstrap-datetimepicker eonasdan-datetimepicker

【解决方案1】：

您可以执行以下操作：

$.ajax({
  method: "GET",
  url: "url",
  dataType: "json",
  success: function(response){
    var disable = [];
    for(var i=0; i<response.length; i++){
      var data = response[i];
      disable.push( moment([ data[2], data[0], data[1] ]) );
    }

    $('#input_from').datetimepicker({
      locale: 'es',
      format: 'DD-MM-YYYY',
      enabledDates: disable
    });
  }
});

您可以使用jQuery.ajax 的success 和dataType 键。

然后您可以循环您的结果并使用 moment(Array) 方法构建一个时刻对象数组，并将其传递给 datetimepicker 的 enabledDates 选项。

【讨论】：

【解决方案2】：

您可以使用beforeShowDay，该函数将日期作为参数，并且必须返回一个数组：

[0]: true/false 表示此日期是否可选
[1]（可选）：添加到日期单元格的 CSS 类名或默认显示的“”
[2]（可选）：此日期的弹出工具提示

在日期选择器中每天调用该函数之前显示出来。

请看以下内容：

var availableDates = [[2017,6,1],[2017,6,2],[2017,6,5]];

function available(date) {
  t = [date.getDate(),(date.getMonth()+1),date.getFullYear()];
  var result = $.grep(availableDates, function(v,i) {
    return v[0]===t[2] && v[1]===t[1] && v[2]===t[0];
  }).length > 0;
  return [result];
}

$('#date').datepicker({ beforeShowDay: available });

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" name="date" id="date" readonly="readonly" size="12" />

在上面的代码中，您可以通过修改布尔条件从启用/禁用切换：

length > 0 而不是length == 0

希望对你有帮助，再见。

【讨论】：