AngularJSアプリで日付／時刻を入力するライブラリ - UI Bootstrap（Datepicker／Timepicker）

AngularJSアプリ開発を支援する便利モジュール（13）

日付ピッカーの表示をカスタマイズする

　日付ピッカーの表示は、uib-datepicker-popupディレクティブ配下でdatepicker-options属性を指定することで、カスタマイズすることもできます。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標準のアイコン（http://getbootstrap.com/components/）

　Bootstrapによるアイコンボタンについては、「Bootstrapで業務Webアプリのカッコいい入力フォームを作る」などの記事も参考にしてください。