時刻入力ボックスを実装する
同じくUI BootstrapのTimepickerデイレクティブを利用することで、時刻入力ボックスを生成できます。UI Bootstrapを有効にする手順は、先ほどのDatepickerの場合と同じなので、詳細は前節の解説も合わせて参照してください。
リスト6 time.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<!-- UI BootstrapとBootstrap本体をインポート -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-i18n/angular-locale_ja-jp.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="scripts/time.js"></script>
</head>
<body ng-controller="MyController">
<form>
<uib-timepicker ng-model="current"
hour-step="hourStep" minute-step="minuteStep" show-meridian="amPm">
</uib-timepicker>
時刻：{{current.toLocaleTimeString()}}
</form>
</body>
</html>
リスト7 time.js
angular.module('myApp', [ 'ui.bootstrap' ])
.controller('MyController', ['$scope', function($scope) {
$scope.current = new Date();
$scope.hourStep = 1;
$scope.minuteStep = 10;
$scope.amPm = true;
}]);
時刻入力ボックスを生成するのは、<uib-timepicker>要素（ディレクティブ）の役割です。また、時刻入力ボックスの表示／挙動を変更するために、以下のような属性を指定できます。
| 属性 | 概要 | デフォルト値 |
|---|---|---|
| hour-step | 時間の増減 | 1 |
| minute-step | 分の増減 | 1 |
| show-meridian | 午前／午後の選択を表示するか | true |
| meridians | 午前／午後の表記（例：[AM, PM]） | － |
| mousewheel | マウスホイールによる選択を可能にするか | true |
| arrowkeys | ［↑］［↓］キーによる選択を可能にするか | true |
ng-model属性には、選択された時刻値がDateオブジェクトとして返されますので、ここでは、これをtoLocaleTimeStringメソッドで整形したものを、ページ上部に反映させているわけです。
まとめ
本稿では、日付／時刻入力に利用できるUI BootstrapのDatepicker／Timepikerを紹介しました。特に、カレンダーの表示は一から実装するとなると、中々に手間も大きい部分です。こうした定番のライブラリに頼ることで、ぐんとコードを簡素化できることが、お分かりいただけたと思います。
次回は、引き続き日付の操作に関する話題で、日付に紐づいた情報をカレンダーに表示するためのUI Bootstrap／UI Calendarについて紹介する予定です。
参考資料
- 『AngularJSアプリケーションプログラミング』（技術評論社）
- 『AngularJSライブラリ 活用レシピ 厳選 108』（WINGSプロジェクト）
