包装jquery ui datepicker小部件,链接到个别月份

时间:2013-05-30 14:19:59

标签: jquery jquery-ui datepicker

我一直在使用jquery ui datepicker http://api.jqueryui.com/datepicker/并遇到了一个我希望你可以提供帮助的问题。目前,我创建了一个多月份的日期采摘网格,显示了一年中的每个月。我想要做的是改变每个日期选择器的标题,以便月份名称附加一个链接。

想法是点击月份名称会将用户带到另一个页面,其中显示该月份的较大版本。我的问题是如何用链接包装每个日期选择器的标题?

$( '#calendargrid' ).datepicker( { 
     dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], numberOfMonths: [3,4]
});

感谢。

1 个答案:

答案 0 :(得分:0)

该插件不支持您想要的内容,但您可以执行一些棘手的代码来实现您的愿望行为。

在插件设置完datepicker之后,可能会添加一些类和元素。或者您可以使用month数组。我做了一些测试,这个数组支持HTML代码:

$("#calendargrid").datepicker({
    dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    numberOfMonths: [3,4]
    monthNames: [
        '<a id="jan" onclick="seeMonth(this.id)">January</a>',
        '<a id="feb" onclick="seeMonth(this.id)">February</a>',
        '<a id="mar" onclick="seeMonth(this.id)">March</a>',
        '<a id="april" onclick="seeMonth(this.id)">April</a>',
        '<a id="may" onclick="seeMonth(this.id)">May</a>',
        '<a id="june" onclick="seeMonth(this.id)">June</a>',
        '<a id="july" onclick="seeMonth(this.id)">July</a>',
        '<a id="aug" onclick="seeMonth(this.id)">August</a>',
        '<a id="sep" onclick="seeMonth(this.id)">September</a>',
        '<a id="oct" onclick="seeMonth(this.id)">October</a>',
        '<a id="nov" onclick="seeMonth(this.id)">November</a>',
        '<a id="dic" onclick="seeMonth(this.id)">December</a>']
});

function seeMonth(monthName) {
    // Redirect the user to the other page
}