UI Bootstrap

Bootstrap components written in pure AngularJS by the AngularUI Team

Code on Github

Getting started

Angular 2

For Angular 2 support, check out ng-bootstrap , created by the UI Bootstrap team.

Dependencies

This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are:

  • AngularJS (requires AngularJS 1.4.x or higher, tested with 1.6.1). 0.14.3 is the last version of this library that supports AngularJS 1.3.x and 0.12.0 is the last version that supports AngularJS 1.2.x.
  • Angular-animate (the version should match with your angular's, tested with 1.6.1) if you plan in using animations, you need to load angular-animate as well.
  • Angular-touch (the version should match with your angular's, tested with 1.6.1) if you plan in using swipe actions, you need to load angular-touch as well.
  • Bootstrap CSS (tested with version 3.3.7). This version of the library (2.5.0) works only with Bootstrap CSS in version 3.x. 0.8.0 is the last version of this library that supports Bootstrap CSS in version 2.3.x.

Files to download

Build files for all directives are distributed in several flavours: minified for production usage, un-minified for development, with or without templates. All the options are described and can be downloaded from here. It should be noted that the -tpls files contain the templates bundled in JavaScript, while the regular version does not contain the bundled templates. For more information, check out the FAQ here and the README here.

Alternativelly, if you are only interested in a subset of directives, you can create your own build.

Whichever method you choose the good news that the overall size of a download is fairly small: 122K minified for all directives with templates and 98K without (~31kB with gzip compression, with templates, and 28K gzipped without)

Installation

As soon as you've got all the files downloaded and included in your page you just need to declare a dependency on the ui.bootstrap module:

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

If you are using UI Bootstrap in the CSP mode, e.g. in an extension, make sure you link to the ui-bootstrap-csp.css in your HTML manually.

You can fork one of the plunkers from this page to see a working example of what is described here.

Migration to prefixes

Since version 0.14.0 we started to prefix all our components. If you are upgrading from ui-bootstrap 0.13.4 or earlier, check our migration guide.

CSS

Original Bootstrap's CSS depends on empty href attributes to style cursors for several components (pagination, tabs etc.). But in AngularJS adding empty href attributes to link tags will cause unwanted route changes. This is why we need to remove empty href attributes from directive templates and as a result styling is not applied correctly. The remedy is simple, just add the following styling to your application: 

.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }

FAQ

Please check our FAQ section for common problems / solutions.

Reading the documentation

Each of the components provided in ui-bootstrap have documentation and interactive Plunker examples.

For the directives, we list the different attributes with their default values. In addition to this, some settings have a badge on it:

  • - This setting has an angular $watch listener applied to it.
  • B - This setting is a boolean. It doesn't need a parameter.
  • C - This setting can be configured globally in a constant service*.
  • $ - This setting expects an angular expression instead of a literal string. If the expression support a boolean / integer, you can pass it directly.
  • readonly - This setting is readonly.

For the services (you will recognize them with the $ prefix), we list all the possible parameters you can pass to them and their default values if any.

* Some directives have a config service that follows the next pattern: uibDirectiveConfig. The service's settings use camel case. The services can be configured in a .config function for example.

Accordion (ui.bootstrap.accordion)

This content is straight in the template.
{{group.content}}

The body of the uib-accordion group grows to fit the contents

{{item}}
Hello
Custom template with custom header template World

Please, to delete your account, click the button below

I can have markup, too! This is just some content to illustrate fancy headings.

The accordion directive builds on top of the collapse directive to provide a list of items, with collapsible bodies that are collapsed or expanded by clicking on the item's header.

The body of each accordion group is transcluded into the body of the collapsible element.

uib-accordion settings

  • close-others $ C (Default: true) - Control whether expanding an item will cause the other items to close.

  • template-url (Default: template/accordion/accordion.html) - Add the ability to override the template used on the component.

uib-accordion-group settings

  • heading (Default: none) - The clickable text on the group's header. You need one to be able to click on the header for toggling.

  • is-disabled $ (Default: false) - Whether the accordion group is disabled or not.

  • is-open $ (Default: false) - Whether accordion group is open or closed.

  • template-url (Default: uib/template/accordion/accordion-group.html) - Add the ability to override the template used on the component.

Accordion heading

Instead of the heading attribute on the uib-accordion-group, you can use an uib-accordion-heading element inside a group that will be used as the group's header.

If you're using a custom template for the uib-accordion-group, you'll need to have an element for the heading to be transcluded into using uib-accordion-header (e.g. <div uib-accordion-header></div>).

Known issues

To use clickable elements within the accordion, you have to override the accordion-group template to use div elements instead of anchor elements, and add cursor: pointer in your CSS. This is due to browsers interpreting anchor elements as the target of any click event, which triggers routing when certain elements such as buttons are nested inside the anchor element.

If custom classes on the accordion-group element are desired, one needs to either modify the template to remove the ng-class usage in the accordion-group template and use ng-class on the accordion-group element (not recommended), or use an interpolated expression in the class attribute, i.e. <uib-accordion-group class="{{customClass()}}"></uib-accordion-group>.

<div ng-controller="AccordionDemoCtrl">
  <script type="text/ng-template" id="group-template.html">
    <div class="panel-heading">
      <h4 class="panel-title" style="color:#fa39c3">
        <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
          <span uib-accordion-header ng-class="{'text-muted': isDisabled}">
            {{heading}}
          </span>
        </a>
      </h4>
    </div>
    <div class="panel-collapse collapse" uib-collapse="!isOpen">
      <div class="panel-body" style="text-align: right" ng-transclude></div>
    </div>
  </script>

  <p>
    <button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
    <button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
  </p>

  <div class="checkbox">
    <label>
      <input type="checkbox" ng-model="oneAtATime">
      Open only one at a time
    </label>
  </div>
  <uib-accordion close-others="oneAtATime">
    <div uib-accordion-group class="panel-default" heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
      This content is straight in the template.
    </div>
    <div uib-accordion-group class="panel-default" heading="{{group.title}}" ng-repeat="group in groups">
      {{group.content}}
    </div>
    <div uib-accordion-group class="panel-default" heading="Dynamic Body Content">
      <p>The body of the uib-accordion group grows to fit the contents</p>
      <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
      <div ng-repeat="item in items">{{item}}</div>
    </div>
    <div uib-accordion-group class="panel-default" heading="Custom template" template-url="group-template.html">
      Hello
    </div>
    <div uib-accordion-group class="panel-default" is-open="status.isCustomHeaderOpen" template-url="group-template.html">
      <uib-accordion-heading>
        Custom template with custom header template <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isCustomHeaderOpen, 'glyphicon-chevron-right': !status.isCustomHeaderOpen}"></i>
      </uib-accordion-heading>
      World
    </div>
    <div uib-accordion-group class="panel-danger" heading="Delete account">
      <p>Please, to delete your account, click the button below</p>
      <button class="btn btn-danger">Delete</button>
    </div>
    <div uib-accordion-group class="panel-default" is-open="status.open">
      <uib-accordion-heading>
        I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
      </uib-accordion-heading>
      This is just some content to illustrate fancy headings.
    </div>
  </uib-accordion>
</div>

angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
  $scope.oneAtATime = true;

  $scope.groups = [
    {
      title: 'Dynamic Group Header - 1',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 2',
      content: 'Dynamic Group Body - 2'
    }
  ];

  $scope.items = ['Item 1', 'Item 2', 'Item 3'];

  $scope.addItem = function() {
    var newItemNo = $scope.items.length + 1;
    $scope.items.push('Item ' + newItemNo);
  };

  $scope.status = {
    isCustomHeaderOpen: false,
    isFirstOpen: true,
    isFirstDisabled: false
  };
});

Alert (ui.bootstrap.alert)

{{alert.msg}}
A happy alert!

This directive can be used both to generate alerts from static and dynamic model data (using the ng-repeat directive).

uib-alert settings

  • close() $ - A callback function that gets fired when an alert is closed. If the attribute exists, a close button is displayed as well.

  • dismiss-on-timeout (Default: none) - Takes the number of milliseconds that specify the timeout duration, after which the alert will be closed. This attribute requires the presence of the close attribute.

  • template-url (Default: uib/template/alert/alert.html) - Add the ability to override the template used in the component.

<div ng-controller="AlertDemoCtrl">
  <script type="text/ng-template" id="alert.html">
    <div ng-transclude></div>
  </script>

  <div uib-alert ng-repeat="alert in alerts" ng-class="'alert-' + (alert.type || 'warning')" close="closeAlert($index)">{{alert.msg}}</div>
  <div uib-alert template-url="alert.html" style="background-color:#fa39c3;color:white">A happy alert!</div>
  <button type="button" class='btn btn-default' ng-click="addAlert()">Add Alert</button>
</div>

angular.module('ui.bootstrap.demo').controller('AlertDemoCtrl', function ($scope) {
  $scope.alerts = [
    { type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
    { type: 'success', msg: 'Well done! You successfully read this important alert message.' }
  ];

  $scope.addAlert = function() {
    $scope.alerts.push({msg: 'Another alert!'});
  };

  $scope.closeAlert = function(index) {
    $scope.alerts.splice(index, 1);
  };
});

Buttons (ui.bootstrap.buttons)

Single toggle

{{singleModel}}

Checkbox

Model: {{checkModel}}
Results: {{checkResults}}

Radio & Uncheckable Radio

{{radioModel || 'null'}}

With the buttons directive, we can make a group of buttons behave like a set of checkboxes (uib-btn-checkbox) or behave like a set of radio buttons (uib-btn-radio).

uib-btn-checkbox settings

  • btn-checkbox-false (Default: false) - Sets the value for the unchecked status.

  • btn-checkbox-true (Default: true) - Sets the value for the checked status.

  • ng-model $ - Model where we set the checkbox status. By default true or false.

uib-btn-radio settings

  • ng-model $ - Model where we set the radio status. All radio buttons in a group should use the same ng-model.

  • uib-btn-radio - $ Value to assign to the ng-model if we check this radio button.

  • uib-uncheckable $ (Default: null) - An expression that evaluates to a truthy or falsy value that determines whether the uncheckable attribute is present.

  • uncheckable B - Whether a radio button can be unchecked or not.

Additional settings uibButtonConfig

  • activeClass (Default: active) - Class to apply to the checked buttons.

  • toggleEvent (Default: click) - Event used to toggle the buttons.

Known issues

To use tooltips or popovers on elements within a btn-group, set the tooltip/popover appendToBody option to true. This is due to Bootstrap CSS styling. See here for more information.

<div ng-controller="ButtonsCtrl">
    <h4>Single toggle</h4>
    <pre>{{singleModel}}</pre>
    <button type="button" class="btn btn-primary" ng-model="singleModel" uib-btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
        Single Toggle
    </button>
    <h4>Checkbox</h4>
    <pre>Model: {{checkModel}}</pre>
    <pre>Results: {{checkResults}}</pre>
    <div class="btn-group">
        <label class="btn btn-primary" ng-model="checkModel.left" uib-btn-checkbox>Left</label>
        <label class="btn btn-primary" ng-model="checkModel.middle" uib-btn-checkbox>Middle</label>
        <label class="btn btn-primary" ng-model="checkModel.right" uib-btn-checkbox>Right</label>
    </div>
    <h4>Radio &amp; Uncheckable Radio</h4>
    <pre>{{radioModel || 'null'}}</pre>
    <div class="btn-group">
        <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Left'">Left</label>
        <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Middle'">Middle</label>
        <label class="btn btn-primary" ng-model="radioModel" uib-btn-radio="'Right'">Right</label>
    </div>
    <div class="btn-group">
        <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Left'" uncheckable>Left</label>
        <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Middle'" uncheckable>Middle</label>
        <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Right'" uib-uncheckable="uncheckable">Right</label>
    </div>
    <div>
        <button class="btn btn-default" ng-click="uncheckable = !uncheckable">
            Toggle uncheckable
        </button>
    </div>
</div>

angular.module('ui.bootstrap.demo').controller('ButtonsCtrl', function ($scope) {
  $scope.singleModel = 1;

  $scope.radioModel = 'Middle';

  $scope.checkModel = {
    left: false,
    middle: true,
    right: false
  };

  $scope.checkResults = [];

  $scope.$watchCollection('checkModel', function () {
    $scope.checkResults = [];
    angular.forEach($scope.checkModel, function (value, key) {
      if (value) {
        $scope.checkResults.push(key);
      }
    });
  });
});

Collapse (ui.bootstrap.collapse)

Resize window to less than 768 pixels to display mobile menu toggle button.

Some content
Some content

uib-collapse provides a simple way to hide and show an element with a css transition

uib-collapse settings

  • collapsed() $ - An optional expression called after the element finished collapsing.

  • collapsing() $ - An optional expression called before the element begins collapsing. If the expression returns a promise, animation won't start until the promise resolves. If the returned promise is rejected, collapsing will be cancelled.

  • expanded() $ - An optional expression called after the element finished expanding.

  • expanding() $ - An optional expression called before the element begins expanding. If the expression returns a promise, animation won't start until the promise resolves. If the returned promise is rejected, expanding will be cancelled.

  • uib-collapse $ (Default: false) - Whether the element should be collapsed or not.

  • horizontal $ - An optional attribute that permit to collapse horizontally.

Known Issues

When using the horizontal attribute with this directive, CSS can reflow as the collapse element goes from 0px to its desired end width, which can result in height changes. This can cause animations to not appear to run. The best way around this is to set a fixed height via CSS on the horizontal collapse element so that this situation does not occur, and so the animation can run as expected.

<style>
  .horizontal-collapse {
    height: 70px;
  }
  .navbar-collapse.in {
    overflow-y: hidden;
  }
</style>
<div ng-controller="CollapseDemoCtrl">
	<p>Resize window to less than 768 pixels to display mobile menu toggle button.</p>
	<nav class="navbar navbar-default" role="navigation">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" ng-click="isNavCollapsed = !isNavCollapsed">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">A menu</a>
		</div>
		<div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">
			<ul class="nav navbar-nav">
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
			</ul>
		</div>
	</nav>
	<hr>
	<button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse Vertically</button>
	<hr>
	<div uib-collapse="isCollapsed">
		<div class="well well-lg">Some content</div>
	</div>

	<button type="button" class="btn btn-default" ng-click="isCollapsedHorizontal = !isCollapsedHorizontal">Toggle collapse Horizontally</button>
	<hr>
	<div class="horizontal-collapse" uib-collapse="isCollapsedHorizontal" horizontal>
		<div class="well well-lg">Some content</div>
	</div>
</div>

angular.module('ui.bootstrap.demo').controller('CollapseDemoCtrl', function ($scope) {
  $scope.isNavCollapsed = true;
  $scope.isCollapsed = false;
  $scope.isCollapsedHorizontal = false;
});

Dateparser (ui.bootstrap.dateparser)

Formatting codes playground

The uibDateParser is what the uib-datepicker uses internally to parse the dates. You can use it standalone by injecting the uibDateParser service where you need it.

The public API for the dateParser is a single method called parse.

Certain format codes support i18n. Check this guide for more information.

uibDateParser's parse function

parameters

  • input (Type: string, Example: 2004/Sep/4) - The input date to parse.

  • format (Type: string, Example: yyyy/MMM/d) - The format we want to use. Check all the supported formats below.

  • baseDate (Type: Date, Example: new Date()) - If you want to parse a date but maintain the timezone, you can pass an existing date here.

return
  • If the specified input matches the format, a new date with the input will be returned, otherwise, it will return undefined.

uibDateParser's format codes

  • yyyy (Example: 2015) - Parses a 4 digits year.

  • yy (Example: 15) - Parses a 2 digits year.

  • y (Example: 15) - Parses a year with 1, 2, 3, or 4 digits.

  • MMMM (Example: February, i18n support) - Parses the full name of a month.

  • MMM (Example: Feb, i18n support) - Parses the short name of a month.

  • MM (Example: 12, Leading 0) - Parses a numeric month.

  • M (Example: 3) - Parses a numeric month.

  • M! (Example: 3 or 03) - Parses a numeric month, but allowing an optional leading zero

  • LLLL (Example: February, i18n support) - Stand-alone month in year (January-December). Requires Angular version 1.5.1 or higher.

  • dd (Example: 05, Leading 0) - Parses a numeric day.

  • d (Example: 5) - Parses a numeric day.

  • d! (Example: 3 or 03) - Parses a numeric day, but allowing an optional leading zero

  • EEEE (Example: Sunday, i18n support) - Parses the full name of a day.

  • EEE (Example: Mon, i18n support) - Parses the short name of a day.

  • HH (Example: 14, Leading 0) - Parses a 24 hours time.

  • H (Example: 3) - Parses a 24 hours time.

  • hh (Example: 11, Leading 0) - Parses a 12 hours time.

  • h (Example: 3) - Parses a 12 hours time.

  • mm (Example: 09, Leading 0) - Parses the minutes.

  • m (Example: 3) - Parses the minutes.

  • sss (Example: 094, Leading 0) - Parses the milliseconds.

  • ss (Example: 08, Leading 0) - Parses the seconds.

  • s (Example: 22) - Parses the seconds.

  • a (Example: 10AM) - Parses a 12 hours time with AM/PM.

  • Z (Example: -0800) - Parses the timezone offset in a signed 4 digit representation

  • ww (Example: 03, Leading 0) - Parses the week number

  • w (Example: 03) - Parses the week number

  • G, GG, GGG (Example: AD) - Parses the era (AD or BC)

  • GGGG (Example: Anno Domini) - Parses the long form of the era (Anno Domini or Before Christ)

* The ones marked with Leading 0, needs a leading 0 for values less than 10. Exception being milliseconds which needs it for values under 100.

** It also supports fullDate|longDate|medium|mediumDate|mediumTime|short|shortDate|shortTime as the format for parsing.

*** It supports template literals as a string between the single quote ' character, i.e. 'The Date is' MM/DD/YYYY. If one wants the literal single quote character, one must use ''''.

<div ng-controller="DateParserDemoCtrl">
  <h4>Formatting codes playground</h4>
  <p class="form-group">
    <label>Define your format</label>
    <input type="text" ng-model="format" class="form-control">
  </p>
  <p class="form-group">
    <label>Result</label>
    <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="date" />
  </p>
</div>

angular.module('ui.bootstrap.demo').controller('DateParserDemoCtrl', function ($scope, uibDateParser) {
  $scope.format = 'yyyy/MM/dd';
  $scope.date = new Date();
});

Datepicker (ui.bootstrap.datepicker) 

Selected date is: {{dt | date:'fullDate' }}

Inline

Our datepicker is flexible and fully customizable.

You can navigate through days, months and years.

The datepicker has 3 modes:

  • day - In this mode you're presented with a 6-week calendar for a specified month.
  • month - In this mode you can select a month within a selected year.
  • year - In this mode you are presented with a range of years (20 by default).

uib-datepicker settings

  • ng-model $ - The date object. Must be a Javascript Date object. You may use the uibDateParser service to assist in string-to-object conversion.

  • ng-model-options $ C (Default: {}) - Supported angular ngModelOptions:

    • allowInvalid
    • timezone

  • template-url (Default: uib/template/datepicker/datepicker.html) - Add the ability to override the template used on the component.

Apart from the previous settings, to configure the uib-datepicker you need to create an object in Javascript with all the options and use it on the datepicker-options attribute:

  • datepicker-options $ - An object to configure the datepicker in one place.

    • customClass ({date: date, mode: mode}) - An optional expression to add classes based on passing an object with date and current mode properties.

    • dateDisabled ({date: date, mode: mode}) - An optional expression to disable visible options based on passing an object with date and current mode properties.

    • datepickerMode C (Default: day) - Current mode of the datepicker (day|month|year). Can be used to initialize the datepicker in a specific mode.

    • formatDay C (Default: dd) - Format of day in month.

    • formatMonth C (Default: MMMM) - Format of month in year.

    • formatYear C (Default: yyyy) - Format of year in year range.

    • formatDayHeader C (Default: EEE) - Format of day in week header.

    • formatDayTitle C (Default: MMMM yyyy) - Format of title when selecting day.

    • formatMonthTitle C (Default: yyyy) - Format of title when selecting month.

    • initDate (Default: null) - The initial date view when no model value is specified.

    • maxDate C (Default: null) - Defines the maximum available date. Requires a Javascript Date object.

    • maxMode C (Default: year) - Sets an upper limit for mode.

    • minDate C (Default: null) - Defines the minimum available date. Requires a Javascript Date object.

    • minMode C (Default: day) - Sets a lower limit for mode.

    • monthColumns C (Default: 3) - Number of columns displayed in month selection.

    • ngModelOptions C (Default: null) - Sets ngModelOptions for datepicker. This can be overridden through attribute usage

    • shortcutPropagation C (Default: false) - An option to disable the propagation of the keydown event.

    • showWeeks C (Default: true) - Whether to display week numbers.

    • startingDay C (Default: $locale.DATETIME_FORMATS.FIRSTDAYOFWEEK) - Starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday).

    • yearRows C (Default: 4) - Number of rows displayed in year selection.

    • yearColumns C (Default: 5) - Number of columns displayed in year selection.

Keyboard support

Depending on datepicker's current mode, the date may refer either to day, month or year. Accordingly, the term view refers either to a month, year or year range.

  • Left: Move focus to the previous date. Will move to the last date of the previous view, if the current date is the first date of a view.
  • Right: Move focus to the next date. Will move to the first date of the following view, if the current date is the last date of a view.
  • Up: Move focus to the same column of the previous row. Will wrap to the appropriate row in the previous view.
  • Down: Move focus to the same column of the following row. Will wrap to the appropriate row in the following view.
  • PgUp: Move focus to the same date of the previous view. If that date does not exist, focus is placed on the last date of the month.
  • PgDn: Move focus to the same date of the following view. If that date does not exist, focus is placed on the last date of the month.
  • Home: Move to the first date of the view.
  • End: Move to the last date of the view.
  • Enter/Space: Select date.
  • Ctrl+Up: Move to an upper mode.
  • Ctrl+Down: Move to a lower mode.
  • Esc: Will close popup, and move focus to the input.

Notes

If the date a user enters falls outside of the min-/max-date range, a dateDisabled validation error will show on the form.

<style>
  .full button span {
    background-color: limegreen;
    border-radius: 32px;
    color: black;
  }
  .partially button span {
    background-color: orange;
    border-radius: 32px;
    color: black;
  }
</style>
<div ng-controller="DatepickerDemoCtrl">
    <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>

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

    <hr />
    <button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
    <button type="button" class="btn btn-sm btn-default" ng-click="setDate(2009, 7, 24)">2009-08-24</button>
    <button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
    <button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" uib-tooltip="After today restriction">Min date</button>
</div>

angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
  $scope.today = function() {
    $scope.dt = new Date();
  };
  $scope.today();

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

  $scope.options = {
    customClass: getDayClass,
    minDate: new Date(),
    showWeeks: true
  };

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

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

  $scope.toggleMin();

  $scope.setDate = function(year, month, day) {
    $scope.dt = new Date(year, month, day);
  };

  var tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  var afterTomorrow = new Date(tomorrow);
  afterTomorrow.setDate(tomorrow.getDate() + 1);
  $scope.events = [
    {
      date: tomorrow,
      status: 'full'
    },
    {
      date: afterTomorrow,
      status: 'partially'
    }
  ];

  function getDayClass(data) {
    var date = data.date,
      mode = data.mode;
    if (mode === 'day') {
      var dayToCheck = new Date(date).setHours(0,0,0,0);

      for (var i = 0; i < $scope.events.length; i++) {
        var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);

        if (dayToCheck === currentDay) {
          return $scope.events[i].status;
        }
      }
    }

    return '';
  }
});

Datepicker Popup (ui.bootstrap.datepickerPopup) 

Selected date is: {{dt | date:'fullDate' }}

Popup

The datepicker popup is meant to be used with an input element. To understand usage of the datepicker, please refer to its documentation here.

uib-datepicker-popup settings

The popup is a wrapper that you can use in an input to toggle a datepicker. To configure the datepicker, use datepicker-options as documented in the inline datepicker.

  • alt-input-formats $ C (Default: []) - A list of alternate formats acceptable for manual entry.

  • clear-text C (Default: Clear) - The text to display for the clear button.

  • close-on-date-selection $ C (Default: true) - Whether to close calendar when a date is chosen.

  • close-text C (Default: Done) - The text to display for the close button.

  • current-text C (Default: Today) - The text to display for the current day button.

  • datepicker-append-to-body $ C (Default: false, Config: appendToBody) - Append the datepicker popup element to body, rather than inserting after datepicker-popup.

  • datepicker-options $ - An object with any combination of the datepicker settings (in camelCase) used to configure the wrapped datepicker.

  • datepicker-popup-template-url C (Default: uib/template/datepickerPopup/popup.html) - Add the ability to override the template used on the component.

  • datepicker-template-url C (Default: uib/template/datepicker/datepicker.html) - Add the ability to override the template used on the component (inner uib-datepicker).

  • is-open $ (Default: false) - Whether or not to show the datepicker.

  • ng-model $ - The date object. Must be a Javascript Date object. You may use the uibDateParser service to assist in string-to-object conversion.

  • on-open-focus $ C (Default: true) - Whether or not to focus the datepicker popup upon opening.

  • show-button-bar $ C (Default: true) - Whether or not to display a button bar underneath the uib-datepicker.

  • type C (Default: text, Config: html5Types) - You can override the input type to be (date|datetime-local|month). That will change the date format of the popup.

  • popup-placement C (Default: auto bottom-left, Config: 'placement') - Passing in 'auto' separated by a space before the placement will enable auto positioning, e.g: "auto bottom-left". The popup will attempt to position where it fits in the closest scrollable ancestor. Accepts:

    • top - popup on top, horizontally centered on input element.
    • top-left - popup on top, left edge aligned with input element left edge.
    • top-right - popup on top, right edge aligned with input element right edge.
    • bottom - popup on bottom, horizontally centered on input element.
    • bottom-left - popup on bottom, left edge aligned with input element left edge.
    • bottom-right - popup on bottom, right edge aligned with input element right edge.
    • left - popup on left, vertically centered on input element.
    • left-top - popup on left, top edge aligned with input element top edge.
    • left-bottom - popup on left, bottom edge aligned with input element bottom edge.
    • right - popup on right, vertically centered on input element.
    • right-top - popup on right, top edge aligned with input element top edge.
    • right-bottom - popup on right, bottom edge aligned with input element bottom edge.

  • uib-datepicker-popup C (Default: yyyy-MM-dd, Config: datepickerConfig) - The format for displayed dates. This string can take string literals by surrounding the value with single quotes, i.e. yyyy-MM-dd h 'o\'clock'.

Notes

If using this directive on input type date, a native browser datepicker could also appear.

<style>
  .full button span {
    background-color: limegreen;
    border-radius: 32px;
    color: black;
  }
  .partially button span {
    background-color: orange;
    border-radius: 32px;
    color: black;
  }
</style>
<div ng-controller="DatepickerPopupDemoCtrl">
    <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>

    <h4>Popup</h4>
    <div class="row">
      <div class="col-md-6">
        <p class="input-group">
          <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
      </div>

      <div class="col-md-6">
        <p class="input-group">
          <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <label>Format: <span class="muted-text">(manual alternate <em>{{altInputFormats[0]}}</em>)</span></label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select>
      </div>
    </div>

    <hr />
    <button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
    <button type="button" class="btn btn-sm btn-default" ng-click="setDate(2009, 7, 24)">2009-08-24</button>
    <button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
    <button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" uib-tooltip="After today restriction">Min date</button>
</div>

angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope) {
  $scope.today = function() {
    $scope.dt = new Date();
  };
  $scope.today();

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

  $scope.inlineOptions = {
    customClass: getDayClass,
    minDate: new Date(),
    showWeeks: true
  };

  $scope.dateOptions = {
    dateDisabled: disabled,
    formatYear: 'yy',
    maxDate: new Date(2020, 5, 22),
    minDate: new Date(),
    startingDay: 1
  };

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

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

  $scope.toggleMin();

  $scope.open1 = function() {
    $scope.popup1.opened = true;
  };

  $scope.open2 = function() {
    $scope.popup2.opened = true;
  };

  $scope.setDate = function(year, month, day) {
    $scope.dt = new Date(year, month, day);
  };

  $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
  $scope.format = $scope.formats[0];
  $scope.altInputFormats = ['M!/d!/yyyy'];

  $scope.popup1 = {
    opened: false
  };

  $scope.popup2 = {
    opened: false
  };

  var tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  var afterTomorrow = new Date();
  afterTomorrow.setDate(tomorrow.getDate() + 1);
  $scope.events = [
    {
      date: tomorrow,
      status: 'full'
    },
    {
      date: afterTomorrow,
      status: 'partially'
    }
  ];

  function getDayClass(data) {
    var date = data.date,
      mode = data.mode;
    if (mode === 'day') {
      var dayToCheck = new Date(date).setHours(0,0,0,0);

      for (var i = 0; i < $scope.events.length; i++) {
        var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);

        if (dayToCheck === currentDay) {
          return $scope.events[i].status;
        }
      }
    }

    return '';
  }
});

$uibModal is a service to create modal windows. Creating modals is straightforward: create a template and controller, and reference them when using $uibModal.

The $uibModal service has only one method: open(options).

$uibModal's open function

options parameter

Global defaults may be set for $uibModal via $uibModalProvider.options.

return

The open method returns a modal instance, an object with the following properties:

The scope associated with modal's content is augmented with:

Those methods make it easy to close a modal window without a need to create a dedicated controller.

Also, when using bindToController, you can define an $onInit method in the controller that will fire upon initialization.

Events fired:

UI Router resolves

If one wants to have the modal resolve using UI Router's pre-1.0 resolve mechanism, one can call $uibResolve.setResolver('$resolve') in the configuration phase of the application. One can also provide a custom resolver as well, as long as the signature conforms to UI Router's $resolve.

When the modal is opened with a controller, a $resolve object is exposed on the template with the resolved values from the resolve object. If using the component option, see details on how to access this object in component section of the modal documentation.