2

我想把日期选择器中的日子变成链接。我怎样才能做到这一点？我知道它有onSelect，但是当用户将鼠标悬停在天上时，这并没有给用户提供视觉线索。

我尝试了以下方法，但它似乎确实执行了回调函数。使用 jQuery UI v1.9.2 和 jQuery v1.8.1。

$(document).ready(function () {
    $("#datepicker").datepicker({
        renderCallback: function ($td, thisDate, month, year) {
            alert('hi');
        }
    });
});

更新

即使变通办法也很容易实现，我决定采用 Kevin B 的方法。这是整个事情。

var old_generateHTML = $.datepicker._generateHTML;
$.datepicker._generateHTML = function () {
    function getMonth(s) {
        var months = {
            'January': '01', 'February': '02', 'March': '03', 'April': '04', 'May': '05', 'June': '06',
            'July': '07', 'August': '08', 'September': '09', 'October': '10', 'November': '11', 'December': '12'
        }
        return months[s];
    }
    var ret = old_generateHTML.apply(this, arguments);
    var month = ret.replace(/^.*month">([a-z]+)<\/span.*$/i, "$1");
    var year = ret.replace(/^.*year">([0-9]{4})<\/span.*$/i, "$1");
    ret = ret.replace(/href="#">([0-9]{1,2})<\/a>/g, "href=\"process.php?date=" + getMonth(month) + "/$1/" + year + "\">$1</a>");
    return ret;
};

$(document).ready(function () {
    $("#datepicker").datepicker();
});
4

3 回答 3

2

我建议扩展该generateHTML方法，以便每次生成日期选择器的 html 时，都会创建您的链接。

演示：http: //jsfiddle.net/C4jWz/1/

var old_generateHTML = $.datepicker._generateHTML;

$.datepicker._generateHTML = function() {
    var ret = old_generateHTML.apply(this,arguments);
    ret = ret.replace(/href="#">([0-9]{1,2})<\/a>/g, "href=\"process.php?day=$1\">$1</a>");
    return ret;    
};

//<a class="ui-state-default ui-state-hover" href="#">13</a>

$( "#datepicker" ).datepicker();

特别是这个只得到日，月/年可以以同样的方式获得。

于 2012-11-28T20:08:21.700 回答
1

如果我明白您的意思，那么您只需将以下内容添加到您的 CSS 中：

.ui-datepicker td a {
    text-decoration: underline !important;
    color: #1122CC !important; /* For a more traditional Blue use '#0000FF' */
}

您可以使用以下内容轻松更改所有日期的链接：

$("#datepicker").datepicker().on("click", function(e) { //  must be done on input click as the div is recreated everytime
    $(".ui-datepicker td a").each(function(i) { //  filters through each date
        //  the following grabs the href property and replaces the # tag with the text (aka. the date)
        $(this).prop("href", $(this).prop("href").replace("#", $(this).text()))
        //  I think this could easily be shortened to:
        //  $(this).prop("href", $(this).text()) 
    })
})

jsFiddle

此版本中的另一个示例我为每个示例添加了一个 Title 属性

  • 注意：我发现你唯一不能真正编辑的是文本。文本用于确定日期。

更新

这有点 hackish，因为我必须使用一个小计时器（真的不应该是一个问题），但我找到了一种方法来处理继续单击以更改月份和/或年份的更改。定时器的原因很简单，渲染。“新”的日子直到事件发生后的一瞬间才会呈现，这就是计时器的原因。

新脚本_

function updateDates() {
    $(".ui-datepicker td a").each(function(i) {
        $(this).prop("href", $(this).prop("href").replace("#", $(this).text()))
    });
}

$( "#datepicker" ).datepicker({
    onChangeMonthYear: function (year, month, inst) {
        setTimeout(function() { updateDates(); }, 500);
    }
}).on("click", function(e) {
    $(".ui-datepicker td a").each(function(i) {
        updateDates();
    })
});

新例子_

于 2012-11-28T18:55:43.790 回答
0

我想你需要做这样的事情（未经测试，主要是逻辑）：

$('#datepicker .ui-state-default').each( function() { // i think only the days 
//have this class, you can try and use 'ui-state-default a' 
// or something like that
var thisText = $(this).text();
var href = checkWhichLinksIsThis(thisText);
$(this).attr('href', href);
});

我在这里所做的基本上是遍历所有天链接，通过文本检查哪个是checkWhichLinkIsThis方法并相应地更改href。

希望这能让你朝着大方向前进。

于 2012-11-28T19:03:24.103 回答