読者です 読者をやめる 読者になる 読者になる

Wicket ModalWindow で Datepicker は、、

Wicket のモーダルウィンドウ(ModalWindow)上に、jQuery-uiDatepicker を配置しない方が良いみたいだ。

一見、想定どおりに表示できても、、

f:id:posturan:20160313175215j:plain



カーソルでモーダルウィンドウの上のバーのハンドル部分をクリックしてドラッグすると、、

f:id:posturan:20160313175222j:plain


このようにズレてしまう。Datepicker としての日付選択機能は動いて悪さはしないが、
かなりみっともない。

final ModalWindow window = new ModalWindow("modal");
window.setInitialWidth(460);
window.setInitialHeight(300);
window.setCssClassName(ModalWindow.CSS_CLASS_GRAY);
add(window);
add(new Button("exec").add(new AjaxEventBehavior("onclick"){
   @Override
   protected void onEvent(AjaxRequestTarget target){
      window.setContent(new TestPanel(window.getContentId()));
      window.setResizable(false);
      window.show(target);

      target.appendJavaScript("setting();");
   }
}));

AjaxEventBehavior で実行するJavaScript は、、

$(function(){
   $.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
});
var setting = function(){
   $("input[name='enddate']").datepicker({
      prevText:"前月", nextText:"翌月",
      changeMonth: true,
      changeYear: true, yearRange: '-2:+4',
   });
};

この中の setting メソッドを実行。

Page の HTML は、、、

<button type="button" wicket:id="exec">Exec</button>
<div wicket:id="modal"></div>

モーダルウィンドウのHTML は、、、

<wicket:panel>
<div>
<input type="text" name="enddate" value="">

</div>
</wicket:panel>


Panel の CSS として、

.w_caption{ display: none; }

を指定して CAPTION を非表示も考えたが、モーダルウィンドウの端でドラッグ
できてしまうので同じである。