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

Question

我几乎浏览了关于这个主题的每一篇文章。这不是什么新鲜事。然而，每次有人来到这里，都会在不同的背景下遇到同样的问题。看起来 JQUERY UI 应该在其下一个大版本中固有地支持这一点。好的，现在这是我的代码，我只想启用从 Controller 返回到我的 View 的日期选择器中的那些日期，我在 <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')

使用相同，即datepicker中的格式应为'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 中过滤日期，如上面的第一个示例。