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