jQuery mobile の Datebox を Wicket で

Wicket の DatePicker と同様なものが、jQuery mobile にあることを見つけた

http://dev.jtsage.com/jQM-DateBox/

Calendar Mode 、Android Mode 、Flip Mode 様々な形式がある。

ソースを以下から入手して使う。

http://dev.jtsage.com/jQM-DateBox/demos/install.html

jQM-DateBox サイトから入手したままでは、英語表記のカレンダーなので日本語にする為に
下記、JavaScript を用意する。

/* datebox_ja.js */
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
   'dateFormat': 'YYYY/MM/DD',
   'daysOfWeekShort': ['日','月','火','水','木','金','土'],
   'monthsOfYear': ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
   'titleDateDialogLabel': 'カレンダー',
   'pickPageTheme': 'b',
   'pickPageButtonTheme': 'b'
 });

Wicket の org.apache.wicket.extensions.markup.html.form.DateTextField
を継承して上記、JavaScript , CSS を Component の renderHead で出力するように
すると、datebox 用のコンポーネントを用意できる。

DateTextField 継承コンポーネントは、、、

import java.text.SimpleDateFormat;
import java.util.Date;
import org.apache.wicket.extensions.markup.html.form.DateTextField;
import org.apache.wicket.markup.ComponentTag;
import org.apache.wicket.markup.html.IHeaderResponse;
import org.apache.wicket.model.IModel;
import org.apache.wicket.request.resource.PackageResourceReference;
/**
 * Datebox
 * 　初期表示の日付としてコンストラクタで日付文字列 yyyy/MM/dd 形式で受け取る。
 */
public class Datebox extends DateTextField{
   private String initDate;
   public Datebox(String id,IModel<Date> model){
      super(id,model);
      SimpleDateFormat sf = new SimpleDateFormat("yyyy/MM/dd");
      this.initDate = sf.format(new Date());
   }
   public Datebox(String id,IModel<Date> model,String initDate){
      super(id,model);
      this.initDate = initDate;
   }
   @Override
   protected void onComponentTag(ComponentTag tag){
      tag.put("id",getId());
      tag.put("type","date");
      tag.put("data-role","datebox");
      tag.put("value",this.initDate);
   }
   /*
    * Datebox と同じ場所に、javascript と CSS が存在するものとして、、
    */
   @Override
   public void renderHead(IHeaderResponse response){
      super.renderHead(response);
      response.renderCSSReference(
          new PackageResourceReference(Datebox.class,"jquery.mobile-1.0b2.min.css"));
      response.renderCSSReference(
          new PackageResourceReference(Datebox.class,"jquery.mobile.datebox.css"));
      response.renderJavaScriptReference(
          new PackageResourceReference(Datebox.class,"jquery-1.6.2.min.js"));
      response.renderJavaScriptReference(
          new PackageResourceReference(Datebox.class,"jquery.mobile-1.0b2.min.js"));
      response.renderJavaScriptReference(
          new PackageResourceReference(Datebox.class,"jquery.mobile.datebox-1.0b1.js"));
      response.renderJavaScriptReference(
          new PackageResourceReference(Datebox.class,"datebox_ja.js"));
   }
}

初期表示の日付としてコンストラクタで日付文字列 yyyy/MM/dd 形式で受け取る。

HTML は、
<input wicket:id="mydate" name="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox"}' />

ちょっとアイコンがはみ出てしまった。
アイコンをタッチすると、

input タグの、 data-options='{"mode": "calbox"}' を取り除けば
スマートフォンらしく、以下のようになる