Jquery UI 日期选择器 - 仅启用从服务器返回的日期数组

Question

关于这个主题，我几乎每个 post 都读过。这不是什么新鲜事。然而，每次有人在不同的背景下带着同样的问题来到这里。似乎 JQUERY UI 应该在其下一个大版本中固有地支持这一点。好的，现在这是我的代码，我只想启用从控制器返回到我的视图的日期选择器中的那些日期，我在 <input> 隐藏字段中输入了这些日期。这是我的 html:

<?php foreach ($trip_dates as $single_trip_date) { ?>
<form id="datesetter">
<?php $date = new DateTime($single_trip_date->trip_date); ?>
<input type="hidden" value="<?= $date->format('d-m-Y'); ?>"/>

这是我的代码：

$(document).ready(function(){ 
var date_d = [];
$("#datesetter input[type=hidden]").each(function() {
var date_d = new Date();
date_d = [$(this).val()];
console.log(date_d); // Output is: ["12-01-2016"] ["14-01-2016"]

function addZ(n) {
return (n < 10? '0' : '') + n;
}
function available(date) {
dmy = addZ(date.getDate()) + "-" + addZ((date.getMonth()+1)) + "-" + date.getFullYear();
        if ($.inArray(dmy, date_d) == -1) {
            console.log(dmy);
            console.log("php dates: "+date_d); //out put is only first date in series, i.e. 12-01-2016
        return [false, ""];
        }          else {
        return [true,"","Unavailable"];
        }
        }

 $('#datepick').datepicker({
    dateFormat: 'dd/mm//yy',
    beforeShowDay: available
});
    });

});

但是当我在 console.log 中看到可用函数中可用日期的输出时，它只重复打印第一个日期系列，没有另一个日期的迹象，即 14-01-2016。

结果，在日期选择器中只启用了第 12 个日期，而其他所有日期都被禁用。我希望启用 date_d 变量中的所有日期。谁能告诉我怎么做？

Answer 1

这样应该可以，如果你有问题我可以更新

更新

还有一件事，从 php ('d-m-Y') 返回的日期有不同的格式与日期选择器中的日期对比 ('dd/mm//yy')

使用相同，即日期选择器中的格式应为 'dd-mm-yy'，相当于 php 的 'd-m-Y' 格式

var available_formatted_dates_list = [/*put your formatted date strings  here.. eg "01-01-2016", "01-12-2016"*/];
function check_available_date( date )
{
    var formatted_date = '', ret = [true, "", ""];
    if (date instanceof Date)
    {
        formatted_date = $.datepicker.formatDate( 'dd-mm-yy', date );
    }
    else
    {
        formatted_date = '' + date;
    }
    if ( -1 === available_formatted_dates_list.indexOf(formatted_date) )
    {
        ret[0] = false;
        ret[1] = "date-disabled"; // put yopur custom csc class here for disabled dates
        ret[2] = "Date not available"; // put your custom message here
    }
    return ret;
}

 $('#datepick').datepicker({
    dateFormat: 'dd-mm-yy',
    beforeShowDay: check_available_date
});

jQuery UI datepicker beforeShowDay option

您可以使用 $.datepicker.formatDate 实用函数来格式化日期以匹配可用的日期格式，然后检查它是否匹配

而不是创建自己的格式

此外，您可能应该将隐藏字段中的所有可用日期放入一个数组中，如下所示（只做一次而不是每次）：

var available_formatted_dates_list = [];
// fill the available dates list from the hidden fields
$("#datesetter input[type=hidden]").each(function() {
     available_formatted_dates_list.push($(this).val());
});

然后使用填充的 available_formatted_dates_list 数组从 datepicker 中过滤日期，就像上面的第一个例子一样。

Answer 2

您与日期选择器相关的代码有效，只需 fixed 在数组中添加日期：

date_d.push($(this).val());

Jquery UI 日期选择器 - 仅启用从服务器返回的日期数组

Jquery UI datepicker - enable only array of dates returned from server

jquery

jquery-ui

jquery-ui-datepicker