CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapangular-ui-bootstrap
Simon
Simon

Reputation: 1476

UI-Bootstrap samples do not work

We are trying to work with UI-Bootstrap http://angular-ui.github.io/bootstrap/

trying to work though the examples and nothing seems to be working. According to the documentation we only need to reference angular and bootstrap css. However, it also seems that we need to add a reference to ui-bootstrap-tpls-0.10.0.js !?

Can someone please please shed some light on why the below isnt working, this is code directly off their website!:-

<!DOCTYPE html>
<html lang="en" ng-app="bootstrapDemoApp" id="top">
<head>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<script src="script/ui-bootstrap-tpls-0.10.0.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>

</head>
<body ng-app>

<div ng-controller="DatepickerDemoCtrl">


    <h4>Inline</h4>
<div style="display:inline-block; min-height:290px;">
  <div class="well well-sm" ng-model="dt">
      <datepicker min="minDate" show-weeks="showWeeks"></datepicker>
  </div>
</div>
</div>


<script>var DatepickerDemoCtrl = function ($scope) {
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();

  $scope.showWeeks = true;
  $scope.toggleWeeks = function () {
    $scope.showWeeks = ! $scope.showWeeks;
  };

  $scope.clear = function () {
    $scope.dt = null;
  };

  // Disable weekend selection
  $scope.disabled = function(date, mode) {
    return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
  };

  $scope.toggleMin = function() {
    $scope.minDate = ( $scope.minDate ) ? null : new Date();
  };
  $scope.toggleMin();

  $scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
  };

  $scope.dateOptions = {
    'year-format': "'yy'",
    'starting-day': 1
  };

  $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];
  $scope.format = $scope.formats[0];
};

</script>


</body>
</html>

Upvotes: 1

Views: 598

Answers (2)

Ren
Ren

Reputation: 1503

You need to inject 'ui.bootstrap' in your app.

Here is an example.

var app = angular.module('bootstrapDemoApp', ['ui.bootstrap']);

Hope this helps.

Upvotes: 3

Brocco
Brocco

Reputation: 64853

UI Bootstrap is a separate Angular Module, you will have to inject it into you module:

so change your markup to:

<body ng-app="YourAppName">

and add this to the start of your script:

angular.module('YourAppName', ['ui.bootstrap']);

and you will have to add your controller to your app:

angular.module('app').controller(DatepickerDemoCtrl);

Upvotes: 4

Related Questions