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

我正在尝试编写一个日期选择器，它还会在日历旁边显示一些信息。 目前我有这个代码。

$（“#日期选择器”）。日期选择器({
显示前：功能（输入、安装）{
insertMessage（）；
}
});
$（'#ui datepicker div'）。委托（'.ui datepicker prev、.ui datepicker next、'click'，insertMessage）；
函数insertMessage（消息）{
clearTimeout（insertMessage.timer）；
if（$（'#ui datepicker div.ui datepicker calendar'）。是（':visible'））
$（'ui datepicker div'）.append（'information panel'）；
其他的
insertMessage.timer=setTimeout（insertMessage，10）；
}

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

编辑：

---

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

有什么想法吗？

我将

append（）

更改为

prepend（）

，并将您的CSS更改为：

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

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

参见此

你只需要调整一些CSS来实现这一点，检查下面的代码

CSS

---

urs是一个很好的解决方案。但我想如果你看全屏结果，datepicker的初始加载似乎有一些问题。此外，由于我的代码，在输入框下方出现了一条粗线。如何删除dat？？在月份之间导航会隐藏面板。如何修复dat。请看这个提琴，它在jQuery版本1.6中运行良好，但不知道版本1.8或更高版本发生了什么，yup面板似乎不是日期选择器的一部分。但这很聪明。将

#ui datepicker div的
左边距
更改为
填充左边距
，它就解决了这个问题。检查他们的。还有一个错误。在月份之间导航会隐藏面板。我想需要在js中应用更好的方法。
.info{
    width:50px;
    height:50px;
    float: left;
    margin-left: -60px;
    background: lightgreen;
}
#ui-datepicker-div {
    margin-left: 60px;
}

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