UI Bootstrap の datepicker-popup は、クリックしたら Datepicker を表示するようにするためのディレクティブです。日付選択のためのカレンダーですね。
こんなやつです。
まずはコード
以下のような感じで利用することができます。
<div class="input-group" ng-controller="DatePickerController">
<input type="text"
class="form-control"
ng-model="date"
datepicker-popup
is-open="datePickerOpen">
<div class="input-group-addon" ng-click="toggleDatePicker($event)">
<i class="glyphicon glyphicon-calendar"></i>
</div>
</div>
angular.module('datepicker-example', ['ui.bootstrap'])
.controller('DatePickerController', function($scope) {
$scope.date = new Date();
$scope.datePickerOpen = false;
$scope.toggleDatePicker = function($event) {
// これが重要！！！
$event.stopPropagation();
$scope.datePickerOpen = !$scope.datePickerOpen;
};
});
動くコードは Plunker に上げてます。
ng-model
datepicker-popup を設定する要素には ng-model が必要です。Datepicker で選択した日付の Date オブジェクトが ng-model で指定したプロパティに入ってきます。
ポップアップの開閉
is-open に渡したフラグを on/off することで、datepicker の入ったポップアップを開閉します。
一番のハマりどころが、 クリックイベントのバブリングを止める必要がある ところ。
datepicker-popup は、ポップアップの外をクリックした際に閉じるようにするために、親の要素に click イベントが来るとポップアップを閉じてしまいます。$event.stopPropagation() をしないと、開閉のためのフラグが true になった直後に親要素のイベントハンドラによって false にされてしまい、ポップアップが開きません。確かに公式サイトの例にもそう書いてあるのですが、見落としていると全く意味がわからないので要注意です。
設定
HTML の属性でカスタマイズすることもできるのですが、アプリ全体で共通の設定は UI Bootstrap で提供されている設定オブジェクト（constant）を変更するのが楽です。
angular.module('datepikcer-example')
.config(function(datepickerConfig, datepickerPopupConfig) {
angular.extend(datepickerConfig, {
showWeeks: false,
formatDay: 'd'
});
angular.extend(datepickerPopupConfig, {
currentText: '今日',
clearText: 'クリア',
closeText: '閉じる'
});
});
オプションの一覧は 公式ドキュメント にあります。
一つの要素で
上記の例ではポップアップを出す要素とクリックする要素が分かれていますが、一つの要素に統合することもできます。
<div ng-controller="DatePickerController">
<button type="text"
class="btn btn-default"
ng-model="date"
datepicker-popup
is-open="datePickerOpen"
ng-click="toggleDatePicker($event)">
{{date | date : 'yyyy年MM月dd日'}}
</button>
</div>
ng-model って任意の要素に追加できるんですね。
スタイリング
ポップアップには datepicker-popup-wrap という属性がついているので、それを使うのが良さそうです。
例えば・・・
[datepicker-popup-wrap] {
padding: 10px;
}