Wicket のモーダルウィンドウ(ModalWindow)上に、jQuery-ui のDatepicker を配置しない方が良いみたいだ。
一見、想定どおりに表示できても、、
カーソルでモーダルウィンドウの上のバーのハンドル部分をクリックしてドラッグすると、、
このようにズレてしまう。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 を非表示も考えたが、モーダルウィンドウの端でドラッグ
できてしまうので同じである。