Module License: Apache License, Version 2.0

Added by: Sam Deering





Stars: 23

Watchers: 23

Forks: 36

Module Description

angular-bootstrap-datepicker - AngularJS directives for the bootstrap-datepicker

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


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


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

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="bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="angular-bootstrap-datepicker.css" />

<script src="jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="angular.js"></script>
<script src="angular-bootstrap-datepicker.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.


To use the directive, use the following code :

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

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

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

ng-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 ng-options.

For a working example, see

Module stats last updated: 2017-05-13 16:00:05

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!