Javascript 如何使用jQuery'突出显示日期；s日期选择器

我使用jQueryUIDatePicker允许用户通过从显示的日历中选择日期来填充日期输入

到目前为止，一切正常：

然后，我想突出显示某些日期，以帮助用户选择，因此我查看了使之成为可能的

beforeShowDay

选项

beforeShowDayType:函数（日期）

以下是演示：

下一步不仅要突出显示某些日期，还要根据用户以前在其他输入中选择的内容（以相同的形式）动态地进行，因此我使用了

ajax

来检索要突出显示的日期

到目前为止，这是我的（不完整）代码

$(function() {
    $('.datepicker').datepicker({
        dateFormat : 'yy-mm-dd'
    });
}); 

function fillDates() {
        $('.datepicker').datepicker({
            beforeShowDay: function( date ) {
                var highlight = dates[date];
                if( highlight ) {
                    return [true, 'highlight', highlight];
                } else {
                    return [true, '', ''];
                }
            }
        });
}   

function getDates() {
    $.ajax({    
        type : "POST", 
        dataType: "text",
        url : "ajaxFindDates",
        data : {departure:$('#departure option:selected').val(),
            arrival:$('#arrival option:selected').val()},

        success : function(data) {              
            var dateStr = JSON.parse(data);
            var dates=[];
            for (var i = 0; i < dateStr.length; i++) {
                date=new Date(dateStr[i]);
                dates.push(date);
            }
            fillDates(dates);
        }
            ,
            error : function(data) {
                alert("Problem!" );
            }
        }); 
}

$（函数（）{
$（'.datepicker'）.datepicker({
日期格式：“yy-mm-dd”
});
}); 
函数fillDates（）{
$（'.datepicker'）.datepicker({
beforeShowDay:功能（日期）{
var highlight=日期[日期]；
如果（突出显示）{
返回[true，‘highlight’，highlight]；
}否则{
返回[真]，''；
}
}
});
}   
函数getDates（）{
$.ajax（{
类型：“POST”，
数据类型：“文本”，
url:“ajaxFindDates”，
数据：{离开：$（“#离开选项：选定”）.val（），
到达：$（“#到达选项：选中”）.val（），
成功：函数（数据）{
var dateStr=JSON.parse（数据）；
var日期=[]；
对于（var i=0；i

当

的值更改时，将调用函数

getDates（）

我曾尝试使用browser developer工具进行调试，但似乎从未执行

beforeShowDay

中定义的函数

任何帮助都将不胜感激！

---

谢谢。

您的

fillDates

函数没有

dates

参数

function fillDates(dates) {
    $('.datepicker').datepicker({
        beforeShowDay: function( date ) {
            var highlight = dates[date];
            if( highlight ) {
                return [true, 'highlight', highlight];
            } else {
                return [true, '', ''];
            }
        }
    });
} 

请检查日期数组值。它必须是JavaScript日期对象。我认为您不会像JavaScript日期对象那样存储它

你能试试这个吗？请

$(function() {
    $('.datepicker').datepicker({
        dateFormat : 'yy-mm-dd'
    });
}); 

function fillDates() {

        // Please select your specific DOM.
        var datepickerSelect = $('.datepicker').eq(0);

        datepickerSelect.datepicker("destroy").datepicker({
            dateFormat : 'yy-mm-dd',
            beforeShowDay: function( date ) {
                var highlight = dates[date];
                if( highlight ) {
                    return [true, 'highlight', highlight];
                } else {
                    return [true, '', ''];
                }
            }
        });
}   

function getDates() {
    $.ajax({    
        type : "POST", 
        dataType: "text",
        url : "ajaxFindDates",
        data : {departure:$('#departure option:selected').val(),
            arrival:$('#arrival option:selected').val()},

        success : function(data) {              
            var dateStr = JSON.parse(data);
            var dates=[];
            for (var i = 0; i < dateStr.length; i++) {
                date=new Date(dateStr[i]);
                dates.push(date);
            }
            fillDates(dates);
        }
            ,
            error : function(data) {
                alert("Problem!" );
            }
        }); 
}

$（函数（）{
$（'.datepicker'）.datepicker({
日期格式：“yy-mm-dd”
});
}); 
函数fillDates（）{
//请选择您的特定DOM。
var datepickerSelect=$（'.datepicker'）.eq（0）；
datepickerSelect.datepicker（“销毁”）.datepicker({
日期格式：'年-月-日'，
beforeShowDay:功能（日期）{
var highlight=日期[日期]；
如果（突出显示）{
返回[true，‘highlight’，highlight]；
}否则{
返回[真]，''；
}
}
});
}   
函数getDates（）{
$.ajax（{
类型：“POST”，
数据类型：“文本”，
url:“ajaxFindDates”，
数据：{离开：$（“#离开选项：选定”）.val（），
到达：$（“#到达选项：选中”）.val（），
成功：函数（数据）{
var dateStr=JSON.parse（数据）；
var日期=[]；
对于（var i=0；i

我已经在您的JSFIDLE中做了更改。

window.your_dates=[新日期（“2015年9月15日”）.toString（）
$（函数（）{
$（'.datepicker'）.datepicker({
日期格式：'年-月-日'，
beforeShowDay:功能（日期）{
//检查日期是否在日期数组中
if（$.inArray（date.toString（），您的_日期））{
console.log（您的_日期）；
//如果是，请返回以下内容。
返回[true，'要突出显示的css类'，'工具提示文本']；
}否则{
//违约
返回[真]，''；
}                                        }
}); 
});
#突出显示，.highlight{
/*背景色：#000000*/
}
.css类高亮显示>a.ui-state-default{
背景：url（“image/ui-bg_highlight-soft_25_ffef8f_1x100.png”）重复-x滚动50%顶部#ffef8f！重要；
边框：1px实心#F9DD34；
颜色：#363636；
}
首先，当
ajax
进入成功状态时，您需要销毁datepicker实例，然后再次创建它，以便在ShowDay

之前触发

您可以拨打以下电话：

$('.datepicker').datepicker('destroy');

然后，使用sush语句检查
dates
数组中是否存在日期：

var highlight = dates[date];

换句话说，您检查键，但在创建
日期
数组时，您只需
将日期推送到数组中，并创建简单的数字索引：

dates.push(date);

如果保持不变，我想你永远也找不到它们。您应该更改在数组中查找元素的方式，或者更改将元素添加到数组中的方式

这是你的电话号码。我在那里模拟了ajax请求。请记住，我还将从服务器接收的日期格式更改为
mm/dd/yyyy
（09/09/2015）。使用您在注释中提供的格式，最终数组中的索引不相同
 您的ajax是在成功状态下执行的吗？另外，使用`dataType:`text'，`然后使用
var dateStr=JSON.parse（数据）是多余的。您可以简单地使用
数据类型：“json”
。这是返回的数据（例如）：“[“2015-09-12”，“2015-09-11”]”能否在beforeShowDay中插入“console.log（日期[0]，日期）”代码
dates.push(date);