Question

我已经完成了关于这个主题的每一篇文章。这不是什么新鲜事。然而，每次有人在不同的背景下来到这里同样的问题。看起来像JQUERY UI应该在其下一个重要版本中支持这一点。好的，现在这里是我的代码，我想只启用从控制器返回到我的视图的datepicker中的那些日期，我在<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。

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

Answer 1

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

<强>更新

还有一件事，你在php（'d-m-Y'）返回的日期中有不同的格式 vs datepicker中的日期（'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中的日期，就像上面的第一个示例一样。

Answer 2

与datepicker相关的代码有效，只有fixed日期在数组中添加：

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

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

2 个答案: