前回、画面の日付入力にdatepickerを使ってみましたが、
bootstrapのdatepickerを使ってみる
今度は時間の入力も必要な画面を追加する事になり、datetimepickerを使ってみる事にしました。
　使用したのは下記です。日本語も対応されています。
http://www.malot.fr/bootstrap-datetimepicker
　ダウンロードしたJSとCSSをdatepickerの時と同じようにコンテンツディレクトリ配下のresource内に配置。

xhtmlは下記のようになりました。aInfoという管理BeanにdispFromDateとdispEndDateの２つの文字列日付プロパティがあり、ボタン押下でgetListを呼び出し結果をresultListにdataTableで表示するという内容です。

<script type="text/javascript">
$(function() {
	  $('.datetimepicker').datetimepicker({
		  format: 'yyyy/mm/dd hh:ii:ss',
	      autoclose: true,
	      todayBtn: true,
	      pickerPosition: "bottom-left",
		  language: 'ja'
	  });
	});
</script>
・・・中略

<h:inputText id="fromDate" value="#{aInfo.dispFromDate}" class="datetimepicker from-control span2" >
  <f:ajax  execute="@this"/>
</h:inputText>
<h:inputText id="toDate" value="#{aInfo.dispEndDate}" class="datetimepicker from-control span2" >
  <f:ajax  execute="@this"/>
</h:inputText>
・・・中略

<h:commandButton id="listget" action="#{aInfo.getList}" value="表示" class="btn btn-default safebutton">
  <f:ajax execute="fromDate toDate" render="resultList"/>
</h:commandButton>

・・・中略
<h:dataTable id="resultList" var="list" value="#{aInfo.resultList}" class="table table-striped" >
・・・以下略

なお、日付フォーマットは今回の要件的に秒も対象にしていますが、datetimepickerのUI自体は分までが対応範囲なので秒については直入力という整理です。