Bootstrap（实际上是 JQuery）DatePicker 在 Wicket 模式中不隐藏模糊
Posted
技术标签:
【中文标题】Bootstrap（实际上是 JQuery）DatePicker 在 Wicket 模式中不隐藏模糊【英文标题】：Bootstrap (actually JQuery) DatePicker does not hide on blur in Wicket modal 【发布时间】：2016-05-02 16:50:34 【问题描述】：我在模态框内的面板上有一个检票口引导程序DateTextField。当点击显示日期选择器时，日期选择器附加到根页面，而不是模式。
这会导致一个问题：如果不向 datepicker 添加一些 z-index，我无法在模态顶部看到它。
当我从选择器中模糊时，它应该关闭。不知何故，由于选择器不是模态的子项，只有在模态之外单击它时，单击外部日期选择器才会关闭它。模态内部没有任何反应。
我可以通过自动关闭来调整它，但是当你去输入并手动使用退格来清除值时，没有办法通过单击模式内的某个地方来关闭日期选择器。
一些html来说明：
<html>
<panel>
<modal>
<input>datefield is here</input>
</modal>
<panel>
<datepicker comes here>
</html>
如何将日期选择器附加到模态，或者以其他方式解决模态内部的模糊问题？
我试图在面板上附加一个隐藏日期选择器的点击事件，但是当它打开时它会立即隐藏日期选择器。
编辑：
尽管 html 被人为地移动到那里并正确放置在 DOM 树中，但单击到模态不会执行任何操作。不过，感谢@Gavriel 关于在 DOM 元素之间移动内容的见解。
编辑2：
重现情况的代码：
class MyPanel extends Panel
DateTextField field = new DateTextField("foo");
(...)
add(field);
class MyPage extends WebPage
(...)
ModalWindow modal = new ModalWindow("modal");
modal.add(new MyPanel());
(...)
html for the panel, containing the dateTextField
<html>
..
<input wicket:id="foo"></input>
..
</html>
从 sn-p 中可以看出，java 代码生成 jQuery 部分。
编辑3：
我说的是这个生物：
[DateTextField 来源]https://github.com/l0rdn1kk0n/wicket-bootstrap/blob/master/bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/form/DateTextField.java
编辑4：
嗯.. 我在 javascript 中在模态输入中添加了一个模糊事件侦听器，该模糊甚至不起作用。所以事实证明，真正的问题是如何让 onblur 在模态中工作。因为那是坏的！
编辑5：
对不起，不能给小提琴。在 Edit3 中，您可以看到我用于选择器的来源，而我真正调用的是这个函数：
protected CharSequence createScript(final DateTextFieldConfig config)
return $(this).chain("datepicker", config).get();
它在 java 类中，所以根本不是 JavaScript，尽管语法看起来很相似。据我所知，小提琴里面没有Java代码。 Wicket 需要 java 部分，我很抱歉。
对于小提琴提问者，我在这个小提琴上发现了类似的情况：http://jsfiddle.net/VytfY/227/ - 100% 可以工作，我在这里提到的类似技术，对我的问题没有用。
上次编辑：
$('html').on('click',function(e)
if(e.target.className.indexOf('datepicker') == -1 &&
e.target.className != 'next' && e.target.className != 'prev' &&
e.target.className != 'year' && e.target.className != 'month')
if ($('.datepicker').get(0) != undefined)
$('.datepicker').get(0).remove();
);
感谢@Mathew，你让我开心，以上就是它的结局。我在输入元素中添加了一个 datepickerContainer 类，因此单击它不会隐藏选择器。
谢谢大家，已经搞定了！
还有一个：对于 IE，使用：
var canvas = $('.datepicker').get(0);
canvas.parentNode.removeChild(canvas);
而不是直接remove。 Remove 还不支持，即使是 IE11。
【问题讨论】：
我不是 100% 确定这会起作用，但请尝试 api.jqueryui.com/datepicker/#option-beforeShow 。要了解这个想法：***.com/questions/6832622/… 尝试在 DOM 中移动 inst（第二个参数）。 @Gavriel：我不太明白如何将 DOM 中的元素移动到另一个地方？您能否以答案的形式详细说明？ 当你将一个元素附加到 DOM 中时，它会从原来的位置移除，换句话说，如果你使用 $("#dst").append("#src ")，然后将 src 元素移动到 dst 寻找新思路：改变 DOM 并没有挽救局面。 【参考方案1】：想法是移动由datepicker创建的div。
使用http://api.jqueryui.com/datepicker/#option-beforeShow 您可以看到一个示例，它是如何在稍微不同的用例中使用的：How to add a custom class to my JQuery UI Datepicker
当你将一个元素附加到 DOM 中时，它会从原来的位置移除，换句话说，如果你使用$("#dst").append("#src")，那么 src 元素会被移动到 dst。
更新：我认为有一个更直接的方法：您提供您希望它使用的 div 的 id。这样你就可以在你的模态对话框中拥有这个 div。
$("#button").on('click', function()
$("#datepicker").datepicker();
);<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<button id="button">choose date</button>
<div id="datepicker"></div>
<div>footer</div>【讨论】：
这种工作，我可以在调试器中告诉正确 div 中的元素。仍然不起作用的是如何从检票口调用 javascript？我试图将脚本附加到 renderHead 但它在用户点击之前立即绘制了选择器。 我在 wicket 中的 java 元素为 datepicker html 提供了无法使用您的更新的可能性，但原始追加完成了它，并且当在模态内部时，我需要一些 css 将其准确放置在正确的位置。谢谢，我会接受这个答案！ 好吧，我接受得太早了。当点击在模式内时，onBlur 的初始问题仍然存在。我怀疑它会以这种方式解决，但事实并非如此。 你能用实际的 html、CSS、JavaScript 发布一个 jsfiddle 或 sn-p 吗？我应该在一开始就问它...... 请为您的问题设置一个 jsfiddle【参考方案2】：
$("#button").on('click', function()
var dt=$("#datepicker").show();
dt.datepicker().on('change', function (ev)
$(dt).hide();
);
$('html').on('click',function(e)
if(e.target.id !='button')
$(dt).hide();
);
);<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<button id="button">choose date</button>
<div id="datepicker"></div>
<div>footer</div>【讨论】：
嗯，选择隐藏在我当前的解决方案上运行良好。不起作用的是模糊，这意味着当您在元素外部单击时，选择器应该消失。如果您在模态外部单击，但在模态内部不单击，则模糊效果很好。 我在这里开始思考的是，如果我不能依赖通过 java 代码提供的 datepicker，我可能会从 html/javascript 手动启动 jquery datepicker。我们在应用程序中有几个选择器，更改为不同外观的选择器不是一件好事，所以我会等待 java 方式，如果有的话。 我稍微修改了你的脚本：$('html').on('click',function(e) if(e.target.id != none of datepicker elements) $( dt).remove(); );它奏效了。我对我的问题帖子发表了更多评论。以上是关于Bootstrap（实际上是 JQuery）DatePicker 在 Wicket 模式中不隐藏模糊的主要内容，如果未能解决你的问题，请参考以下文章