なお、本連載ではAngularJSそのものに関しては解説しませんので、専門書として『AngularJSアプリケーションプログラミング』、姉妹連載「AngularJSではじめるJavaScriptフレームワーク開発スタイル」などを合わせて参照してください。
はじめに
前回はUI BootstrapのDatepicker／Timepickerディレクティブを利用して、日付／時刻入力ボックスを実装しました。
今回も引き続き、日付の話題。日付に紐づいた情報をカレンダー上に表示してみます。利用するのは、以下のライブラリです。
- UI Bootstrap（Datepicker）
- UI Calendar
対象読者
- AngularJSについて基本的な概念を理解している方
- AngularJSで利用できる拡張モジュールに興味がある方
- AngularJSアプリ上でカレンダーにアプリ固有の情報を埋め込みたい方
検証環境
この記事では、以下の環境でサンプルの動作を確認しています。
- AngularJS 1.5.2
- UI Bootstrap 1.2.5
- UI Calendar 1.0.1
- Chrome 49
- Firefox 45
- Internet Explorer 11
簡易なカレンダーを表示する - UI Bootstrap（Datepicker）
前回紹介したUI Bootstrap（Datepicker）の続きです。UI Bootstrap（Datepicker）で生成できるのは、ポップアップカレンダーだけではありません。ページに直接埋め込める、いわゆるインラインカレンダーを実装する際にも利用できます。
これには、以下のように<datepicker>要素を利用してください。
リスト1 calendar.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<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/calendar.js"></script>
</head>
<body ng-controller="MyController">
<!-- （1）ng-model属性に変数currentを紐づけ -->
<uib-datepicker ng-model="current" datepicker-options="options">
</uib-datepicker>
{{current.toLocaleString()}}
</body>
</html>
リスト2 calendar.js
angular.module('myApp', [ 'ui.bootstrap' ])
.controller('MyController', ['$scope', function($scope) {
$scope.options = {
formatDayTitle: "yyyy年MM月",
// （2）minDateに今日の日付を設定
minDate: new Date(),
showWeeks: true
};
}]);
<datepicker>要素で利用できる、主な属性は以下の通りです。
| 属性 | 概要 | デフォルト値 |
|---|---|---|
| ng-model | 日付値を格納するモデル | － |
| datepicker-options | カレンダーに適用するオプション | （設定値は前回の表を参照） |
（1）では、ng-model属性に変数currentを紐づけていますので、カレンダーで選択された日付を文字列変換した上でページに反映させなさいという意味になります。ただし、ここではminDateオプションに今日の日付をセットしていますので、カレンダー上は、今日以前の日付は選択できません（2）。
