我在模态内的面板上有一个wicket bootstrap DateTextField
。当clickpicker从click中显示时,datepicker将附加到根页面,而不是模态。
这会导致一个问题:如果没有为datepicker添加一些z-index,我就无法在模态上看到它。
当我从选择器模糊时,它应该关闭。不知何故,由于拾取器不是模态的子项,因此单击外部日期选择器仅关闭它,如果它在模态外单击。内部模态没有任何反应。
我可以通过autoclose调整它,但是当你去输入并手动使用backSpace来清除值时,没有办法通过点击模态内的某个地方来关闭datepicker。
有些html要说清楚:
<html>
<panel>
<modal>
<input>datefield is here</input>
</modal>
<panel>
<datepicker comes here>
</html>
如何将日期选择器附加到模态,或以其他方式修复模态内的模糊问题?
我试图在面板上附加一个隐藏了datepicker的点击事件,但是当它打开时它立即隐藏了datepicker。
修改
Click to modal什么都不做,虽然html在那里人工移动并且正确放置在DOM树中。感谢@Gavriel关于在DOM元素之间移动东西的洞察力。
EDIT2:
重现情况的代码:
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>
从代码片段看,java代码生成了jQuery部分。
EDIT3:
我说的是这个生物:
[DateTextField sources] https://github.com/l0rdn1kk0n/wicket-bootstrap/blob/master/bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/form/DateTextField.java
Edit4:
嗯..我在Javascript中添加了一个模糊事件监听器,在模态输入中,模糊甚至无效。事实证明,手中的真正问题是如何在模态中进行onblur工作。因为那就是破碎!!
Edit5:
抱歉,不能给小提琴。从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。
答案 0 :(得分:2)
想法是移动由datepicker创建的div。
使用http://api.jqueryui.com/datepicker/#option-beforeShow您可以在稍微不同的用例中看到如何使用它的示例:How to add a custom class to my JQuery UI Datepicker
当你将一个元素附加到已经在DOM中的DOM时,它会从原始位置删除,换句话说,如果你使用$("#dst").append("#src")
,那么src元素将被移动到dst。
更新:我认为有一种更直接的方式:您提供您想要使用的div的ID。这样你就可以在模态对话框中使用这个div。
$("#button").on('click', function(){
$("#datepicker").datepicker();
});
&#13;
<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>
&#13;
答案 1 :(得分:1)
$("#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>