Bootstrap (на самом деле JQuery) DatePicker не скрывает размытие в Wicket modal

У меня есть калитка-бутстрап DateTextField на панели внутри модального. Когда datepicker отображается с клика, datepicker прикрепляется к корневой странице, а не модальному.

Это вызывает проблему: без добавления некоторого z-индекса в datepicker я не вижу его поверх модального.

Когда я размываюсь из сборщика, он должен закрыться. Так или иначе, из-за того, что сборщик не является дочерним по отношению к модальному, щелчок за пределами datepicker закрывает его только, если он щелкнут вне модального. Внутри модального ничего не происходит.

Я могу настроить это с помощью autoclose, но когда вы идете на ввод и вручную используете backSpace для очистки значения, нет возможности закрыть datepicker, щелкнув где-то внутри модального.

Некоторые html, чтобы сделать это ясно:

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

Как получить привязку даты, прикрепленную к модальному, или как-то еще исправить проблему размытия внутри модального?

Я попытался прикрепить панель к событию click, которое скрывает datepicker, но сразу же скрывает датупинг, когда он открывается.

Edit:

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

ОТВЕТЫ

Ответ 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>

Ответ 2

Идея заключается в перемещении div, созданного datepicker.

Используйте http://api.jqueryui.com/datepicker/#option-beforeShow Вы можете увидеть пример того, как он используется в немного другом варианте использования: Как добавить пользовательский класс в свой JQuery UI Datepicker

Когда вы добавляете элемент в DOM, который уже был внутри DOM, он удаляется из исходного места, другими словами, если вы используете $("#dst").append("#src"), то элемент src перемещается в dst.

Обновление: я думаю, что есть более простой способ: вы указываете id div, который хотите использовать. Таким образом, вы можете иметь этот div внутри вашего модального диалога.

     
$("#button").on('click', function(){
    $("#datepicker").datepicker();
});
<link href="#" onclick="location.href='https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'; return false;" 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>