0

月の各日に関連付けられたテキストを表示するために Jquery UI カレンダーと Qtip を使用するセットアップがあります。

次のように UI コンポーネントを初期化します。

$('#datepicker').datepicker({                
        dateFormat: 'dd/mm/yy',
        beforeShowDay: highlightDays,
        showOtherMonths: true,
        numberOfMonths: 2
    });

この後、qtips を開始します。

$('#datepicker').find("td").each(function(){
        $(this).qtip({    
          content:  {   text: tips[$(this).attr('title')]  },
          show: {   solo: true  },    
          hide: 'unfocus'
        });
    })

表示する必要がある情報は、データベースから入力した「tips」という配列に保持します。問題は、月を変更したり、日付をクリックしたりするたびに、qtip が表示されなくなることです。

この回避策を試しましたが、うまくいきません:

$('#datepicker').datepicker({                
        dateFormat: 'dd/mm/yy',
        beforeShowDay: highlightDays,
        showOtherMonths: true,
        numberOfMonths: 2,
        onChangeMonthYear: function(year, month, inst){
             $('#datepicker').find("td").each(function(){
                $(this).qtip({    
                  content:  {   text: tips[$(this).attr('title')]  },
                  show: {   solo: true  },    
                  hide: 'unfocus'
                });
            })
        }
    });

ユーザーが日の要素をクリックして月を変更した場合でも、qtips を保持する方法についてのアイデアはありますか?

更新 #1

これは、問題を再現するフィドルですhttp://jsfiddle.net/ZKtAZ/3/ (更新されたフィドル)

アップデート #2

EmirCalabuch が提案したように「オン」を試みましたが、まだ月の変更時にhttp://jsfiddle.net/ZKtAZ/9/が機能していません。

ばかげたことを言っているかもしれませんが、カレンダーが月を変更すると、実際には日付ピッカー全体がリセットされ、これが機能しない理由かもしれません。

アップデート #3

ここで見つけることができるこれに対する解決策を見つけましたhttp://jsfiddle.net/ZKtAZ/11/。

実際には、クリック イベントを日付ピッカーにバインドして、月の変更時に適切なアクションを設定する必要がありました。

クリックされた日の問題は、ピッカーを開始するときに次のコードを使用して解決されました。

onSelect: function (date, inst) {
        inst.inline = false;
    }

ここでこの回答を使用して解決策が見つかりましたhttps://stackoverflow.com/a/2312825/1168944

あなたの時間と貢献に感謝します。

4

1 に答える 1