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

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);
}

它在日历下方显示“信息面板”。我想在日历的左侧显示信息。我想我必须将整个日期选择器包装到一个 div 中，然后并排插入面板和日期选择器。但不确定如何完成。

编辑: 在月份之间导航会隐藏面板。我认为需要一种更好的 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 .