如何将特定 ID（如工具提示）添加到 Jquery Datepicker 中的日期？

Question

您好，我是 Jquery 的初学者，我开始使用 Jquery datepicker，我使用此代码是因为对我的项目有好处，但我需要在日期中添加特定的 ID，因为单击日期时将显示一个 Div有信息

显示信息的代码不重要

JQUERY

var disabledDays = ["2014-3-5", "2014-3-13", "2014-3-28"];
var tips = ['aaa', 'bbb', 'ccc'];

//the IDs
var ids = ['first', 'second', '3er'];

$("#datepicker").datepicker({
    showButtonPanel: false,
    firstDay: 1,
    dateFormat: 'yy-mm-dd',
    beforeShowDay: function (date) {
        var m = date.getMonth(),
            d = date.getDate(),
            y = date.getFullYear();
        for (i = 0; i < disabledDays.length; i++) {
            if ($.inArray(y + '-' + (m + 1) + '-' + d, disabledDays) != -1) {
                //return [false];
                return [true, 'id='+ids[i], 'highlight', tips[disabledDays.indexOf(y + '-' + (m + 1) + '-' + d)]];
            }
        }
        return [true];
    }

});

$("#first").click(function () {
    $("#aaa-info").show();
});

这是 HTML 代码

<div id="datepicker"></div>
<div id="aaa-info" class="novisible"></div>
<div id="bbb-info" class="novisible"></div>
<div id="ccc-info" class="novisible"></div>

这是 CSS

td.highlight {
    border: none !important;
    padding: 1px 0 1px 1px !important;
    background: none !important;
    overflow:hidden;
}
.novisible{
    display:none;
    background:#000;
    height:200px;
    width:200px;
}
td.highlight a {
    background: #99dd73 url(bg.png) 50% 50% repeat-x !important;
    border: 1px #88a276 solid !important;
}

Answer 1

我不确定您是否要在日期选择器中为每一天添加一个 ID。但我得到了基本的功能。文档说beforeShowDay 函数必须返回一个包含三个元素的数组。您正在返回 4 个元素。此外，您不必运行循环，因为数据选择器会在日历中显示的每一天运行它。我删除了循环并编辑了返回数组，它可以工作。

这是FIDDLE

这是我更改的代码。

 beforeShowDay: function (date) {
    var m = date.getMonth(),
        d = date.getDate(),
        y = date.getFullYear();

        if ($.inArray(y + '-' + (m + 1) + '-' + d, disabledDays) != -1) {

            return [true, 'highlight', 'Tooltip: function returned true'];
        }
        else {
            return [ false, 'highlight', 'Tooltip: function returned false']
        }
  }

如果目标是显示当天的信息，我会添加一个函数来获取日期、查找页面上的隐藏元素并返回文本。像这样的。

myTip = function(date){
    //use the date to find hidden information on page
    var myDate = date.toString();
    var tip = "This date is " + myDate;
    return tip;
};

然后你可以把返回数组改成这个

 return [true, 'highlight', myTip(date) ];

New fiddle