0

カレンダーと一緒にいくつかの情報も表示する日付ピッカーをコーディングしようとしています。現在、私はこのコードを持っています。 http://jsfiddle.net/sFBn2/

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

$('#ui-datepicker-div').delegate('.ui-datepicker-prev, .ui-datepicker-next', 'click', insertMessage);

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

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

カレンダーの下に「情報パネル」が表示されます。カレンダーの左側に情報を表示したい。日付ピッカー全体を div にラップしてから、パネルと日付ピッカーを並べて挿入する必要があると思います。しかし、それを達成する方法がわかりません。

編集: 月間を移動すると、パネルが非表示になります。JavaScriptへのより良いアプローチが必要だと思います。

何かご意見は？

4

2 に答える 2

0

このフィドルを参照してください

これを実現するには、いくつかの CSS を微調整する必要があります。以下のコードを確認してください。

CSS

#ui-datepicker-div {
    width: 400px;
    float:left;
    position: relative;
}
table.ui-datepicker-calendar{
    width: 300px;
    float:right;
}
.ui-datepicker-header {
    width: 300px;
    float: right;
}
.info{width:50px;height:50px;float:left;
    position:absolute;
    top: 0;
    left: 0;
}
于 2013-09-05T09:51:47.337 に答える
0

を変更しappend()、prepend()CSS を次のように変更しました。

.info{
    width:50px;
    height:50px;
    float: left;
    margin-left: -60px;
    background: lightgreen;
}
#ui-datepicker-div {
    margin-left: 60px;
}

最もクリーンなソリューションではありませんが (負のマージンを使用)、機能します。

于 2013-09-05T09:43:57.673 に答える