如何在 jQuery Datepicker 中的选定日期添加链接（href）答案

【问题标题】：How to add link (href) on selected days in jQuery Datepicker如何在 jQuery Datepicker 中的选定日期添加链接（href）
【发布时间】：2013-09-01 18:00:46
【问题描述】：

我需要这个脚本的小帮助：

var disabledDays = ["2013-9-5", "2013-9-13", "2013-9-28"];
var tips = ['aaa', 'bbb', 'ccc'];
$("#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, 'highlight', tips[i]];
            }
        }
        return [true];
    }
});

http://www.jsfiddle.net/VPzL7/

我不知道如何使用与我选择天数相同的方法在这些选定的天数上添加 href 链接。

【问题讨论】：

为什么需要添加href？对于您正在尝试做的事情，我会考虑另一种解决方案。
日历是带有突出显示日期和描述的站点小部件，我需要单击将用户重定向到特定事件详细信息页面 (*.php?eID=55)。

标签： jquery datepicker jquery-ui-datepicker jsfiddle

【解决方案1】：

试试这个解决方案：

HTML

<div id="datepicker"></div>

CSS

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

jQUery

var disabledDays = ["2013-9-20", "2013-9-24"];
var tips = ['some description1', 'some other description2'];
var hrefs = ['http://www.bbc.com/', 'http://www.cnn.com/'];

$("#datepicker").datepicker({
    showButtonPanel: false,
    firstDay: 1,
    dateFormat: 'yyyy-mm-dd',
    beforeShowDay: function (date) {
        var m = date.getMonth(),
            d = date.getDate(),
            y = date.getFullYear();
        for (var i = 0; i < disabledDays.length; i++) {
            if ($.inArray(y + '-' + (m + 1) + '-' + d, disabledDays) != -1) {
                return [true, 'highlight', tips[disabledDays.indexOf(y + '-' + (m + 1) + '-' + d)]];
            }
        }
        return [true];
    },
    onSelect: function(dateText, inst) {        
        var date = new Date(dateText.slice(4)),
            m = date.getMonth(),
            d = date.getDate(),
            y = date.getFullYear();        
        if ($.inArray(y + '-' + (m + 1) + '-' + d, disabledDays) != -1) {
            window.location = hrefs[disabledDays.indexOf((y + '-' + (m + 1) + '-' + d))];
        }
    }
});

这是一个有效的Fiddle。希望对其他人有所帮助..

【讨论】：

您可以使用单个对象数组来组织您的日期、工具提示和链接：var data = [{date: '2013-10-10', tip: 'event1', link: 'http://example.com/1'}, {date: '2013-10-15', tip: 'event2', link: 'http://example.com/2'}];
@Richard 我认为代码中存在轻微错误：{ window.location = hrefs[disabledDays.indexOf((y + '-' + (m + 1) + '-' + (d+1)))]; } 似乎可以修复它

【解决方案2】：

这不是您问题的直接答案，但可以作为解决方案。如果您需要重定向到某个页面，请使用onSelect 选项（http://api.jqueryui.com/datepicker/#option-onSelect）

var links = { "2013-09-05": 'http://my-website.com/event/world-domination' };

//...

    onSelect: function (dateString) {
        if ( links[ dateString ] )
          document.location.href = links[ dateString ];
    }

【讨论】：

【解决方案3】：

似乎 jQueryUI 没有提供这样做的方法，但您可以为每个“特殊”日期分配一个 second 类以在之后处理它

return [true, 'date_'+String(y)+String(m)+String(d)+' highlight', tips[i]];

然后您可以添加侦听器以在每个特殊日期被点击时触发

jQuery(document).on('click','.date_201385',function() {
 do something;
});

【讨论】：