bootstrapのdatepickerを使ってみる

前回、今作成中のWebLogicアプリにbootstrapを使う事にしたので、次は日付入力にdatepickerを使ってみることにしました。datepickerって、使う方も入力しやすいし、作る方も余計な日付チェック処理を作らなくて済むし、素晴らしいコンポーネントだと思います。昔はテキスト入力エリアを年/月/日と３個繋げて、日付妥当性やメンドクサイうるう年チェックとかしてたんですよ・・・
しかも、ダウンロード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>
・・・以下省略

<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" />

$(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>

・・・以下省略