Edited at

AngularJS と UI Bootstrapを使ってみた

More than 3 years have passed since last update.

最初は日付選択のカレンダーがほしいなと探していて、

辿りついたのがAngularJS と UI Bootstrapになりました!

公式が英語なのと、サンプルがいろいろ混ざってたので

今回はポップアップ時のみ、ぬきだしでサンプルメモを残していきます。


導入方法


AngularJS

npm install angular@1.4.8-rc.2

npm install angular-animate@1.4.8-rc.2


UI Bootstrap

npm install angular-ui-bootstrap


Bootstrap

npm install bootstrap


使用方法

今回はラベルに表示しています。

html側の表記は以下のとおり、jade使ってます。


jade

doctype html

html(ng-app='angluer.bootstrap')
head
title= title
link(rel='stylesheet', href='/javascripts/lib/bootstrap/dist/css/bootstrap.min.css')
script(src='/javascripts/lib/angular/angular.min.js')
script(src='/javascripts/lib/angular-animate/angular-animate.min.js')
script(src='/javascripts/lib/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js')
script(src='/javascripts/script.js')
body
div.form-group(ng-controller='Datepicker as dt')
h3.control-label 誕生日検索:{{dt.date | date : 'yyyy/MM/dd'}}
i.glyphicon.glyphicon-calendar(uib-datepicker-popup ng-model="dt.date" is-open="dt.popup.opened" min-date="dt.minDate" max-date="dt.maxDate" datepicker-options="dt.dateOptions" ng-required="true" close-text="Close" ng-click="dt.open()")
hr

コントローラは以下のとおりです。


script.js

var angboot = angular.module('angluer.bootstrap', ['ngAnimate', 'ui.bootstrap']);

angboot.controller('Datepicker', function () {
this.date = new Date(); //デフォルト日付
this.maxDate = new Date(2100,12, 31); //最大日付
this.minDate = new Date(1900,1,1); //最小日付
this.format = 'yyyy/MM/dd' //日付フォーマット

this.popup = {
opened: false
};

this.dateOptions = {
formatYear: 'yyyy', //カレンダーの年の表示フォーマット
startingDay: 1 //カレンダー初期日付
};

this.open = function() {
this.popup.opened = true;
};

});


ハマったのはvar angboot = angular.module('angluer.bootstrap', ['ngAnimate', 'ui.bootstrap']);のポイントで

取り込みモジュール名'ui.bootstrap'とスクリプト内での名称を一致させると、

動作しないというところでした。

失敗例:



var angboot = angular.module('ui.bootstrap', ['ngAnimate', 'ui.bootstrap']);

とりあえず、最新のangular.jsでも上記のコードは動作することまでは確認できました。