bootstrapのdatepickerを使ってみる

前回、今作成中のWebLogicアプリにbootstrapを使う事にしたので、次は日付入力にdatepickerを使ってみることにしました。datepickerって、使う方も入力しやすいし、作る方も余計な日付チェック処理を作らなくて済むし、素晴らしいコンポーネントだと思います。昔はテキスト入力エリアを年/月/日と3個繋げて、日付妥当性やメンドクサイうるう年チェックとかしてたんですよ・・・
しかも、ダウンロードURLではオプション設定の書き方も教えてくれてます。
bootstrap-datepicker
JSF2画面xhtmlの該当箇所は下記ですが、そのままだとBean側が更新されないので、f:ajaxで通知してます。

<h:outputStylesheet name="bootstrap/css/bootstrap-datepicker.min.css" />
<h:outputScript name="bootstrap/js/bootstrap-datepicker.min.js" />
<h:outputScript name="bootstrap/js/bootstrap-datepicker.ja.min.js" />
<script type="text/javascript">
$(function() {
  $('.datepicker').datepicker({
    language: 'ja',
    format: 'yyyy/mm/dd',
    autoclose: true,
    todayHighlight: true
  });
});
</script>
・・・中略
          <h:inputText value="#{bean.inDate}" class="from-control datepicker" >
             <f:ajax  execute="@this"/>
          </h:inputText>
・・・以下省略
カテゴリー: JavaJavaEE   作成者: bokusui パーマリンク

bokusui について

ソフトウェアハウスでのPG・SEから始まり、10年近く勤めた金融系企業の社内SEを数年前にやめ、フリーランス時代を経たのち法人成りしました。システム開発の全工程をこじんまりとやり続けています。