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

Answer 2

我已经完成了你的jsfiddle的变化。 http://jsfiddle.net/kishoresahas/Aut9b/377/

＆＃13;

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, '', ''];
            }                                        }
    }); 
});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 3

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

您可以致电：

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

然后，您正在检查dates数组中是否存在日期，并发出声明：

var highlight = dates[date];

换句话说，你检查了密钥，但是在创建dates数组时，你只需要push()与数组建立简单的数字索引：

dates.push(date);

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

这是fiddle。我在那里嘲笑了ajax请求。请记住，我还将从服务器恢复的日期格式更改为mm/dd/yyyy（09/09/2015）。使用您在注释中提供的格式，最终数组中的索引不符合标准。

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

3 个答案: