日付ピッカーの表示をカスタマイズする
日付ピッカーの表示は、uib-datepicker-popupディレクティブ配下でdatepicker-options属性を指定することで、カスタマイズすることもできます。datepicker-options属性は「オプション名: 値」のハッシュ形式で指定できます。設定可能なオプションは、以下のとおりです。
| 分類 | プロパティ | 概要 | デフォルト値 |
|---|---|---|---|
| 基本 | initDate | ng-model値が指定されない場合の初期値 | － |
| datepickerMode | カレンダーの表示モード（year／month／day） | day | |
| startingDay | 週の始まりの曜日（0：日～6：土） | 0 | |
| minDate | 選択可能な日付の最小値 | － | |
| maxDate | 選択可能な日付の最大値 | － | |
| 表示 | minMode | 表示モードの下限 | day |
| maxMode | 表示モードの上限 | year | |
| formatDay | 日の形式 | dd | |
| formatMonth | 月の形式 | MMMM | |
| formatYear | 年の形式 | yyyy | |
| formatDayHeader | 週ヘッダーの形式 | EEE | |
| formatDayTitle | 日付を選択する際のタイトル形式 | MMMM yyyy | |
| formatMonthTitle | 月を選択するときのタイトル形式 | yyyy | |
| その他 | dateDisabled | 選択できない日付 | － |
| customClass | 特定の日付に適用するスタイル | － |
たとえば以下は、先ほどのサンプルを修正して、日付を選択する際のタイトル形式を「yyyy年MM月」に、表示モードの上限をmonth（月選択）までとしています。カレンダーを日本語表記した場合、実質、formatDayTitleプロパティは必須です。さもないと「5月 2016」のような表記になってしまうからです。
リスト3 date.html
<input id="date" type="text" ng-model="current" ng-focus="onopen($event)" uib-datepicker-popup="yyyy-MM-dd" is-open="opened" current-text="今日" clear-text="クリア" close-text="閉じる" datepicker-options="options" />
リスト4 date.js
angular.module('myApp', [ 'ui.bootstrap' ])
.controller('MyController', ['$scope', function($scope) {
$scope.current = new Date();
$scope.options = {
formatDayTitle: "yyyy年MM月",
maxMode: "month"
}
...中略...
}]);
確かに、日付選択時のタイトルが変更されていること、年選択画面に移動できないことが確認できるはずです。
ボタンからカレンダーを表示する
もちろん、イベントリスナーの紐付けを振り替えてやれば、テキストボックスへのフォーカスではなく、ボタンのクリックによってカレンダーを表示させることもできます。
以下には、修正したコードについてのみ掲載します。
リスト5 date.html
<div class="col-md-2">
<label for="date">日付：</label>
<p class="input-group">
<input id="date" name="date" type="text" class="form-control"
ng-model="current" uib-datepicker-popup="yyyy-MM-dd" is-open="opened"
current-text="今日" clear-text="クリア" close-text="閉じる"
datepicker-options="options" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="onopen($event)">
<i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
先ほどの例では、テキストボックスにng-focus属性で紐づけていたリスナーを、ボタンのng-click属性で宣言するだけです。
ボタンに適用しているカレンダーのアイコンは、Bootstrap標準で提供されているものです。Bootstrapでは、よく利用するアイコンをあまた提供していますので、どんなものがあるのか、チェックしておくと良いでしょう。
Bootstrapによるアイコンボタンについては、「Bootstrapで業務Webアプリのカッコいい入力フォームを作る」などの記事も参考にしてください。
