2

datepicker の日付をリンクに変換したいと思います。どうやってやるの？があることは知っていますが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()) 
    })
})

jsフィドル

このバージョンの別の例では、それぞれに Title 属性を追加します

  • 注：実際に編集できないことがわかったのはテキストだけです。テキストは、日付を決定するために使用されます。

アップデート

小さなタイマーを使用する必要があるという点で少しハックですが (実際には問題にならないはずです)、クリックして月や年を変更することで変更を続行する方法を見つけました。タイマーの理由は単純で、レンダリングです。「新しい」日は、イベントが発生してから数秒後までレンダリングされないため、タイマーの理由です。

新しいスクリプト_

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 に答える