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，然后并排插入面板和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;
}

如何在默认的datepicker旁边添加额外的面板

2 个答案: