jquery-ui wicket の Datepicker を使う時の注意

googlecode の jquery-ui wicketDatepicker を使う時の注意

com.googlecode.wicket.jquery.ui.form.datepicker.AjaxDatePicker

の使用で発生すること。

日付を変更入力したときに onValueChanged で、ページ構成の都合上、JavaScript で再読み込み= document.location.reload() を実行してしまうと、

input value は、以下のように、
  {選択日付}; {選択日付}
のように値が入ってしまう。

f:id:posturan:20160313193243j:plain



これはあまりにも酷い。

RAW レベルの情報、WicketFormComponent 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>


これで、なんとかなる。

f:id:posturan:20160313193236j:plain