javascript - 如何使用 jQuery 的日期选择器突出显示日期

Question

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

到目前为止，一切都按预期工作:http://jsfiddle.net/Aut9b/374/

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

beforeShowDayType: Function( Date date )

Default: null

A function that takes a date as a parameter and must return an array with:

  [0]: true/false indicating whether or not this date is selectable 
  [1]: a CSS class name to add to the date's cell or "" for the default presentation 
  [2]: an optional popup tooltip for this date

The function is called for each day in the datepicker before it is displayed.

这是演示:http://jsfiddle.net/Aut9b/375/

下一步不仅要突出显示某些日期，还要根据用户之前在其他输入中选择的内容(以相同的形式)动态地进行突出显示，因此我使用了 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!" );
            }
        }); 
}

函数getDates()当 <select> 的值被调用时变化。

我尝试使用浏览器开发者工具进行调试，似乎 beforeShowDay 中定义的函数永远不会执行。

任何帮助将不胜感激!谢谢。

Answer 1

您的 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!" );
            }
        }); 
}