A Simple datepicker directive based on bootstrap3-datetimepicker

Angular Core Dependency: 1.3.0

Module License: Apache License, Version 2.0

Added by: Sam Deering





Stars: 8

Watchers: 8

Forks: 11

Module Description


A AngularJS directives for the bootstrap3-datepicker

##New maintainer

I'm looking for someone willing to help on this. Obviously there is not much to do, but still it require some attention. Feel free to contact me in any way if your interested in this.


Here's a working jsfiddle Look here for more information about the original jquery-plugin and more demo.


Installation is easy, jQuery, momentjs, font-awesome, AngularJS and Bootstrap's JS/CSS are required. You can download angular-bootstrap-datepicker via bower: bower install angular-bootstrap3-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-bootstrap3-datepicker']);

You also need to include these files:

<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="font-awesome.css" />
<link rel="stylesheet" href="ng-bs3-datepicker.css" />

<script src="jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="angular.js"></script>
<script src="moment.js"></script>
<script src="moment-your-locale.js"></script>
<script src="ng-bs3-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 :

<ng-bs3-datepicker ng-model="date" language="en" date-format="YYYY-MM-DD">

datepicker : Indicates you want a date picker

language : The locale you want to use for this date picker. To work, this require adding the corresponding momentjs locale file.

ng-model : Variable of the controller scope to store the date. The date is currently store as a string, formatted according to date format.

date-format: Format to use to format the date. The correct definition can be found here

For a working example, see

Thanks to

  • cletourneau:
  • Eonasdan:

Module stats last updated: 2015-06-07 05:27:32

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!