Question

我在模态内的面板上有一个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。

Answer 1

想法是移动由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。

＆＃13;

     
$("#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;

Answer 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>

Bootstrap（实际上是JQuery）DatePicker不会隐藏在Wicket模式中的模糊

2 个答案: