将jQuery UI日期选择器附加到特定的div

Question

我正在使用jQuery日期选择器与一系列输入字段，并希望将日期选择器添加到包含输入字段的div而不是渲染日期选择器的body元素。 有没有简单的方法来实现这个功能？谢谢！

- user4425526

---

似乎这是一个非常通用的问题，你有任何代码实现的方式吗？ - Aswin Ramakrishnan

请参考此问题：https://dev59.com/sWTWa4cB1Zd3GeqPC2aj - Dhruv Ramani

日期选择器被调用在一个包含有类的 div 元素内的输入框上。例如：<div class="datepicker-wrapper"><input class="datepicker"></div>。我需要将日期选择器附加到 .datepicker-wrapper 上，而不是 body。谢谢！ - user4425526

我想做你所做的！@Tom的答案不正确，为什么将其标记为正确答案？ - Mosijava

Answer 1

我发现最简单的解决方案是

$("#myDatePicker").datepicker({
    beforeShow:function(textbox, instance){
        $('.DivToAppendPicker').append($('#ui-datepicker-div'));
    }
});

- Moiz

---

虽然这确实可以工作，但是对话框仍然被赋予了“top”和“left”样式值，这意味着选择器不会出现在预期位置附近。我尝试将CSS设置为上述解决方案的一部分，但jQueryUI正在覆盖它。尚未找到解决方法。 - freefaller

在提出自己的问题后，有一个解决位置问题的方案 - 尽管它并不完美。 - freefaller

Answer 2

在页面中嵌入日期选择器而不是在叠加层中显示。只需在 div 上调用 .datepicker() 而不是在输入框上即可实现。请参考https://jqueryui.com/datepicker/#inline。

- Tom

---

即使被接受，这个答案与问题完全无关，也不能解决它。请参见https://dev59.com/e2ct5IYBdhLWcg3wF5tF - edc65

你错了。这个答案完全实现了他想要的目标。请仔细阅读他的描述，再次评论。他想要将带有添加代码.datepicker()的节点附加到特定的div而不是body元素。$('div.datepicker-wrapper').datepicker()在该div内生成html。这就是他想要的。http://jsfiddle.net/mnzdrkhu/ - Tom

附加到特定的div，是的，但弹出时不总是可见。这与滚动错误有关（至少已经存在4年，显然jqueryui的开发人员并不关心）。 - edc65

你在哪里看到他想要它弹出？这不是任何地方提到的要求，而且可以通过一个简单的js或css轻松实现，在其中设置display：none以进行焦点事件或其他操作。 - Tom

这不是答案，例如我想将其附加到#wrapperdiv中，在那里我可以为#ui-datepicker-div使用特定的CSS，我知道这有点像黑客，但出于其他原因很重要。 - ericpeters

由于它没有附加到正确的 div 上（对话框使用 .appendTo(...)），因此 #TecRMIProxyWrapper .ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; } 不起作用。 - ericpeters