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

Question

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

mic*_*ico 17 java jquery wicket datepicker twitter-bootstrap

我DateTextField在模态内的面板上有一个wicket bootstrap .从click中显示datepicker时,datepicker附加到根页面,而不是模态.

这导致了一个问题:没有向datepicker添加一些z-index,我无法在模态上看到它.

当我从选择器模糊时,它应该关闭.不知何故,由于拾取器不是模态的子项,因此单击外部日期选择器仅关闭它,如果它在模态外单击.内部模态没有任何反应.

我可以通过autoclose调整它,但是当你去输入并手动使用backSpace来清除值时,没有办法通过点击模态内的某个地方来关闭datepicker.

一些HTML要说清楚:

 <html>
   <panel>
     <modal>
       <input>datefield is here</input>
     </modal>
   <panel>
   <datepicker comes here>
 </html>

Run Code Online (Sandbox Code Playgroud)

如何将日期选择器附加到模态,或以其他方式修复模态内的模糊问题？

我试图在面板上附加一个隐藏datepicker的click事件,但是当它打开时它立即隐藏了datepicker.

编辑:

点击模式什么都不做,虽然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>

Run Code Online (Sandbox Code Playgroud)

从代码片段看,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();
}

Run Code Online (Sandbox Code Playgroud)

这是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();
            }
        }
     });

Run Code Online (Sandbox Code Playgroud)

谢谢@Mathew你做了我的一天,上面是它结束了.我在输入元素中添加了一个类,datepickerContainer因此单击它不会隐藏选择器.

谢谢大家,这已经完成了!

还有一个:对于IE,使用:

 var canvas =  $('.datepicker').get(0);
 canvas.parentNode.removeChild(canvas);

Run Code Online (Sandbox Code Playgroud)

而不是直接的remove.Remove尚未支持,甚至IE11.

Answer 1

Mat*_*cob 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();
           }
      });
});

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，7 月前
查看次数：	1118 次
最近记录：	9 年，7 月前