如何使用 jQuery 的 datepicker 突出显示日期

Question

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

到目前为止，一切正常：http://jsfiddle.net/Aut9b/374/

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

beforeShowDayType: 函数（日期日期）

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

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

我尝试使用浏览器开发工具调试，似乎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!" );
            }
        }); 
}

Answer 2

首先，当ajax进入成功状态时，你需要销毁datepicker实例，然后重新创建它以触发beforeShowDay。

你可以通过调用来做到这一点：

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

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

var highlight = dates[date];

换句话说，您检查键，但在创建 dates 数组时，您只需 push() 日期到数组制作简单的数字索引：

dates.push(date);

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

这里是fiddle。我在那里嘲笑了ajax请求。请记住，我还将从服务器接收的日期格式更改为mm/dd/yyyy(09/09/2015)。使用您在 cmets 中提供的格式，最终数组中的索引不相同。

Answer 3

我已经在您的 jsfiddle 中进行了更改。 http://jsfiddle.net/kishoresahas/Aut9b/377/

window.your_dates = [new Date("15-Sep-2015").toString()]
$(function() {
    $('.datepicker').datepicker({
        dateFormat : 'yy-mm-dd',
        beforeShowDay: function(date) {
            // check if date is in your array of dates
            if($.inArray(date.toString(), your_dates)) {
                console.log(your_dates);
                // if it is return the following.
                return [true, 'css-class-to-highlight', 'tooltip text'];
            } else {
                // default
                return [true, '', ''];
            }                                        }
    }); 
});

#highlight, .highlight {
    /*background-color: #000000;*/
}
.css-class-to-highlight > a.ui-state-default {
    background: url("images/ui-bg_highlight-soft_25_ffef8f_1x100.png") repeat-x scroll 50% top #FFEF8F !important;
    border: 1px solid #F9DD34;
    color: #363636;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="input" class="datepicker"/>