如何在默认日期选择器旁边添加额外的面板

Question

我正在尝试编写一个日期选择器，它还将在日历旁边显示一些信息。 目前我有这个代码。 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);
}

它在日历下方显示“信息面板”。我想在日历左侧显示信息。我想我必须将整个 datepicker 包装到一个 div 中，然后并排插入面板和 datepicker。但不知道如何实现。

编辑： 在月份之间导航会隐藏面板。我认为需要一种更好的 javascript 方法。

有什么想法吗？

Answer 1

我将 append() 更改为 prepend() 并将您的 CSS 更改为：

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

不是最干净的解决方案（负边距），但它does work。

Answer 2

看到这个Fiddle

你只需要调整一些 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;
}