前回、今作成中の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>
・・・以下省略