Help us understand the problem. What is going on with this article?

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でも上記のコードは動作することまでは確認できました。

hisayuki
IT系ノマドワーカーです。主にWeb系だけどRuby未経験、PHPはあんま好きじゃない。メインはJVM言語、そろそろ他のやりたいなって思えてきてる。 最近使ってる: aws/terraform/spring/kotlin/Angular/Typescript/DDD/github/CICD 興味ある: serverless/自動化/gcp
https://hisa-tech.site
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away