0

異なる日付タイプに異なるホバーメソッドを割り当てることは可能ですか？

例えば：

beforeShowDay: function(dDate){
              if(condition1){
                  //assign specific method to the "available" type / cell
                  return [true, 'Available', 'specific text'];
              }else if(condition2){
                  //assign specific method to the "not available" type / cell
                  return [false, 'Full', 'specific text'];
              }
              //and so on...
}

私の問題は、datepickerテーブルの特定のセル要素にアクセスする方法がわからないことです。各セルに同じホバー関数を与える方法は知っていますが、特定の日付タイプに異なる関数を割り当てる方法がわかりません。

CSSで色などを変更することはできますが、ホバー機能内にいくつかの追加機能が必要です。たとえば、別のdivにテキストを表示します。

解決しました

私は自分の問題の解決策を見つけましたが、それは想定どおりにかなり異なる方向に進んでいます。次のコードを使用して、セルタイプ/日付タイプごとに異なるホバー関数を定義できました。

function setCellHover() {
$(".ui-datepicker-calendar tbody td").mouseenter(function() {

    if($(this).attr("class").indexOf("Available") != -1){
        //do your specific stuff for the "available" cell-type here
    }else if($(this).attr("class").indexOf("Full") != -1){
        //do your specific stuff for the "full" cell-type here
    }//and so on...
    });
}

ご覧のとおり、datepickerの「beforeShowDay」オプションで設定されている現在のセルのcssclassNameを探します。次に、そこでさまざまなホバー動作を割り当てます。

4

1 に答える 1

0

私が知っている方法は 2 つありますが、どちらもあまり良くありません。

var dateElements = $("td[data-month][data-year]", calendar);
dateElements.each(function() {
    var day = parseInt($(this).text(), 10);
    var month = $(this).data("month");
    var year = $(this).data("year");
    var dateElement = $(this);
    dateElement.mouseover(function() {
        console.log(day, month, year);
    });
});

もう 1 つは、奇数の beforeShowDay オプション引数を使用してクラスを生成することです。http://api.jqueryui.com/datepicker/#option-beforeShowDay

beforeShowDayType: Function( Date date ) デフォルト: null

関数はパラメーターとして日付を取り、[0] はこの日付が選択可能かどうかを示す true/false に等しく、[1] は CSS クラス名またはデフォルト表示の "" に等しく、[ 2] この日付のオプションのポップアップ ツールチップ。表示される前に、日付ピッカーで毎日呼び出されます。

あなたのリクエストは一般的なユースケースのシナリオであるため、誰かがより良い方法を提供してくれることを願っています.

于 2013-03-18T22:59:46.160 に答える