jQuery UI Datepicker - Datepicker HTMLを変更する方法

Question

jQuery UI Datepickerによって生成されたDatepicker HTMLを簡単に変更する必要があります。カレンダーテーブルの後ろに短いテキストを追加します。

私はbeforeShowイベントを使用してこれを実行しようとしているが、私はこれを使用して、現在のHTMLにアクセスすることができますが、それは動作しません操作：

beforeShow: function(input, inst) { 
//#this works 
alert($('#ui-datepicker-div').html()); 
//#this does nothing 
$('#ui-datepicker-div').append('message');   
} 

私は、これは日付ピッカーHTML要素のためかもしれないと思います後でDOMに追加されるので、ライブメソッドはHTMLを更新する必要がありますが、この関数コールバックを使用してライブメソッドを連結する方法はわかりません。あるいは私はまったく間違った方法でこれに接近している可能性があります。

多くのことを検索して試してみたが、誰かがこれを手伝ってもらえるかどうか本当にありがたく思うが、私はこの作業をすることはできない。ありがとう。

Answer 1

.ui-datepicker-calendarテーブルがメッセージに追加されるまで#ui-datepicker-divに挿入されるまで待つ必要があるようです。あなたはそれをチェックするためのタイマ行うことができます：

$('#datepicker').datepicker({ 
    beforeShow: function(input, inst) { 
     insertMessage(); 
    } 
}); 

// listen to the Prev and Next buttons 
$('#ui-datepicker-div').delegate('.ui-datepicker-prev, .ui-datepicker-next', 'click', insertMessage); 

function insertMessage() { 
    clearTimeout(insertMessage.timer); 

    if ($('#ui-datepicker-div .ui-datepicker-calendar').is(':visible')) 
     $('#ui-datepicker-div').append('<div>foo</div>'); 
    else 
     insertMessage.timer = setTimeout(insertMessage, 10); 
} 

をアクションでそれを参照してください： http://jsfiddle.net/william/M9Z7T/2/。

実際にはhttp://jsfiddle.net/M9Z7T/126/をご覧ください。

Answer 2

$('.datepicker').datepicker({ beforeShow: function() { 
     setTimeout(appendsomething, 10); 
    }, 
    onChangeMonthYear: function() { 
     setTimeout(appendsomething, 10); 
     } 
    } 
    ); 

var appendsomething = function() { 
    $("#ui-datepicker-div").append("<div class='something'>something</div>"); 
} 

Answer 3

_generateHTMLの機能をサルパッチするには、次のトリックを使用します。次の例では、一部のjQuery-uiクラスをjQuery-Mobileクラスに置き換えます。

(function() { 
    $.datepicker._generateHTML_old = $.datepicker._generateHTML; 
    $.datepicker._generateHTML = function (inst) { 
     var html = this._generateHTML_old(inst); 
     html = html.replace(/<a class="(ui-datepicker-prev ui-corner-all)(ui-state-disabled)?"/, '<a class="$1 ui-btn ui-btn-left ui-icon-carat-l ui-btn-icon-notext$2"'); 
     html = html.replace(/<a class="(ui-datepicker-next ui-corner-all)(ui-state-disabled)?"/, '<a class="$1 ui-btn ui-btn-right ui-icon-carat-r ui-btn-icon-notext$2"'); 
     html = html.replace(/<span class="ui-icon ui-icon-circle-triangle-.">(.+?)<\/span>/g, '$1'); 
     return html; 
    }; 
})(); 

編集：HTMLを編集するために正規表現/文字列関数を使用することは、実際には悪い考えです。 HTMLを要素内に配置し、操作して、結果のHTMLを取得することを検討してください。

Answer 4

それは、この限り簡単に行うことができます（これは新しい日付ピッカーで動作します）

：

$('.datepicker').datepicker('show'); 
$(".ui-datepicker").append(<div>Foo</div>); 

$(document).on('click', '.ui-datepicker-next', function() { 
    $(".ui-datepicker").append(<div>Foo</div>); 
}) 

$(document).on('click', '.ui-datepicker-prev', function() { 
    $(".ui-datepicker").append(<div>Foo</div>); 
})