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

how to add extra panel alongside default datepicker

本文关键字：添加 默认 日期 选择器      更新时间：2023-09-26

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

有什么想法吗？

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

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

不是最干净的解决方案（边距为负），但它确实有效。

看这个小提琴

你只需要调整一些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;
}
相关文章：