時刻入力ボックスを実装する
同じくUI BootstrapのTimepickerデイレクティブを利用することで、時刻入力ボックスを生成できます。UI Bootstrapを有効にする手順は、先ほどのDatepickerの場合と同じなので、詳細は前節の解説も合わせて参照してください。
<!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>
angular.module('myApp', [ 'ui.bootstrap' ]) .controller('MyController', ['$scope', function($scope) { $scope.current = new Date(); $scope.hourStep = 1; $scope.minuteStep = 10; $scope.amPm = true; }]);
![時刻選択ボックスを表示](http://cz-cdn.shoeisha.jp/static/images/article/9371/9371_006.gif)
時刻入力ボックスを生成するのは、<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プロジェクト)