elartix / angular-bootstrap-datepicker

AngularJS 1.4.x date picker directive styled by Bootstrap 3.3.6 and compatible with bootstrap-datepicker 1.6

angular-bootstrap-datepicker

AngularJS directives for the bootstrap-datepicker

At the moment, only the "Component" type is supported.

---

This is a fork from rbatllet/angular-bootstrap-datepicker to fix a problem with isolated scope inheritance of the ngModel.

Demo

Here's a working jsfiddle A more dynamic demo of all the options is available for the original bootstrap-datepicker.

Installation

Installation is easy, jQuery, AngularJS and Bootstrap's JS/CSS are required. You can download angular-bootstrap-datepicker via bower: bower install https://github.com/kipopov/angular-bootstrap-datepicker.git -save

When you are done downloading all the dependencies and project files the only remaining part is to add dependencies as an AngularJS module:

angular.module('myModule', ['ng-bootstrap-datepicker']);

You also need to include these files:

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="bower_components/angular-bootstrap-datepicker/dist/angular-bootstrap-datepicker.min.css" />

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-bootstrap-datepicker/dist/angular-bootstrap-datepicker.min.js" charset="utf-8"></script>

Make sure you use charset="utf-8" in your script tag if your browser (or those of your users) is displaying characters wrong when using another language.

Settings

To use the directive, use the following code and compatible with Angular 1.4:

<input type="text" ng-datepicker date-options="datepickerOptions" model="date">

ng-datepicker : Indicates you want your input as a date picker.

date-options : Object of the controller scope containing the options for your date picker.

model : Variable of the controller scope to store the date. The date is currently store as a string, formatted according to the one set in date-options.

For a working example, see https://github.com/rbatllet/angular-bootstrap-datepicker/blob/master/example/demo.html