googlecode の jquery-ui wicket の Datepicker を使う時の注意
com.googlecode.wicket.jquery.ui.form.datepicker.AjaxDatePicker
の使用で発生すること。
日付を変更入力したときに onValueChanged で、ページ構成の都合上、JavaScript で再読み込み= document.location.reload() を実行してしまうと、
input の value は、以下のように、
{選択日付}; {選択日付}
のように値が入ってしまう。
これはあまりにも酷い。
RAW レベルの情報、Wicket の FormComponent の getRawInput() で参照できるものが
入ってしまうのである。
これを回避するためにようやく見つけた方法が以下のとおり、
FormComponent の setConvertedInput(Date date) を実行する。
import com.googlecode.wicket.jquery.ui.form.datepicker.AjaxDatePicker;
import com.googlecode.wicket.jquery.core.Options;
:
:
final WebMarkupContainer container = new WebMarkupContainer("content");
AjaxDatePicker datePicker = = new AjaxDatePicker("dateField", targetModel, "MM/dd/yyyy", new Options()){
SimpleDateFormat sf = new SimpleDateFormat("MM/dd/yyyy");
@Override
public void onValueChanged(AjaxRequestTarget target){
try{
Date date = sf.parse(this.getInput());
// Panel の入れ替えを実行 目的は、<body>の中で <script> で記述する JavaScript を動的に書き換えること。。
container.remove("panel");
panel = new MyPanel("panel", new Model<Date>(date));
panel.setOutputMarkupId(true);
container.add(panel);
target.add(container);
// 書き変わった <script> の function を実行するために reload() を実行
target.appendJavaScript("document.location.reload()");
this.setConvertedInput(date);
}catch(ParseException e){
}
}
};
add(datePicker);
HTMLの記述
<input wicket:id="dateField" type="text">
<div wicket:id="content">
<div wicket:id="panel"></div>
</div>
これで、なんとかなる。