Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
angularjs directive for bootstrap datepicker : eternicode/bootstrap-datepicker,
angular.module('bDatepicker', []).
directive('bDatepicker', function(){
return {
require: '?ngModel',
restrict: 'A',
link: function($scope, element, attrs, controller) {
var updateModel;
updateModel = function(ev) {
return $scope.$apply(function() {
return controller.$setViewValue(;
if (controller != null) {
controller.$render = function() {
element.datepicker().data() = controller.$viewValue;
return controller.$viewValue;
return attrs.$observe('bDatepicker', function(value) {
var options;
options = {};
if (angular.isObject(value)) {
options = value;
if (typeof(value) === "string" && value.length > 0) {
options = angular.fromJson(value);
return element.datepicker(options).on('changeDate', updateModel);
Copy link

HasAndries commented Jul 18, 2012

Use like:

<input b-datepicker="{{dateOptions}}" ng-model="dateObject" >

$scope.dateOptions = {format: 'dd/mm/yyyy'}

This works with angular v1.0.0 and bootstrap v2.0.4
The Datepicker is here: or
Thanks to Novi:

Copy link

ejain commented Sep 25, 2012

This works great, but I noticed that when I manually enter an invalid date and lose focus, the date is not corrected, and next time I focus the input, the browser can hang!

Copy link

danbarua commented Apr 10, 2013

@ejain <-- handles user entering invalid dates manually

Copy link

ronbuchanan commented May 28, 2013

This has been working quite well, except for a few things.

  1. When clicking on the input and then off, a date will still be put in the field rather than leaving it blank.
  2. How to set it to an initial date value? I tried "{ date: '1/1/2013' }" but it would not show it on the view.

Copy link

bluee commented Sep 9, 2014

+1 Would be really nice if options were working as set here: b-datepicker="{{dateOptions}}"

Copy link

anilsingh581 commented Apr 1, 2015

Copy link

danielbonnell commented Oct 26, 2015

@bluee did you ever have any luck getting options to work?

Copy link

Yeswanth-JG commented Apr 22, 2016

Check My Fork GIST

Copy link

MrSpider commented May 19, 2016

Check my simplified fork using momentjs and ES6 modules

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment