diff --git a/.travis.yml b/.travis.yml
index 7abee59..93dcc4d 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - 0.10
+  - 6.9.5
   
 before_script:
   - npm install -g bower
diff --git a/bootstrap-datepicker.js b/bootstrap-datepicker.js
index 3faa7a2..8e1f9a3 100644
--- a/bootstrap-datepicker.js
+++ b/bootstrap-datepicker.js
@@ -1,126 +1,168 @@
-angular.module("schemaForm").run(["$templateCache", function($templateCache) {$templateCache.put("directives/decorators/bootstrap/datepicker/datepicker.html","<div class=\"form-group {{form.htmlClass}}\" ng-class=\"{\'has-error\': hasError()}\">\n  <label class=\"control-label {{form.labelHtmlClass}}\" ng-show=\"showTitle()\">{{form.title}}</label>\n  <div ng-class=\"{\'input-group\': (form.fieldAddonLeft || form.fieldAddonRight)}\">\n    <span ng-if=\"form.fieldAddonLeft\"\n          class=\"input-group-addon\"\n          ng-bind-html=\"form.fieldAddonLeft\"></span>\n    <input ng-show=\"form.key\"\n           type=\"text\"\n           class=\"form-control {{form.fieldHtmlClass}}\"\n           schema-validate=\"form\"\n           ng-model=\"$$value$$\"\n           ng-disabled=\"form.readonly\"\n           pick-a-date=\"form.pickadate\"\n           min-date=\"form.minDate\"\n           max-date=\"form.maxDate\"\n           select-years=\"form.selectYears\"\n           select-months=\"form.selectMonths\"\n           name=\"{{form.key.slice(-1)[0]}}\"\n           format=\"form.format\" />\n    <span ng-if=\"form.fieldAddonRight\"\n          class=\"input-group-addon\"\n          ng-bind-html=\"form.fieldAddonRight\"></span>\n  </div>\n  <span class=\"help-block\">{{ (hasError() && errorMessage(schemaError())) || form.description}}</span>\n</div>\n");}]);
-angular.module('schemaForm').directive('pickADate', function() {
-
-  //String dates for min and max is not supported
-  //https://github.com/amsul/pickadate.js/issues/439
-  //So strings we create dates from
-  var formatDate = function(value) {
-    //Strings or timestamps we make a date of
-    if (angular.isString(value) || angular.isNumber(value)) {
-      return new Date(value);
-    }
-    return value; //We hope it's a date object
-  };
-
-  return {
-    restrict: 'A',
-    require: 'ngModel',
-    scope: {
-      ngModel: '=',
-      pickADate: '=',
-      minDate: '=',
-      maxDate: '=',
-      format: '=',
-      selectYears: '=?',
-      selectMonths: '=?'
-    },
-    link: function(scope, element, attrs, ngModel) {
-      //Bail out gracefully if pickadate is not loaded.
-      if (!element.pickadate) {
-        return;
-      }
-
-      //By setting formatSubmit to null we inhibit the
-      //hidden field that pickadate likes to create.
-      //We use ngModel formatters instead to format the value.
-      var opts = {
-        onClose: function() {
-          element.blur();
+angular.module('schemaForm').run(['$templateCache', function($templateCache) {$templateCache.put('directives/decorators/bootstrap/datepicker/datepicker.html','<div class="form-group {{form.htmlClass}}" ng-class="{\'has-error\': hasError()}">\n  <label class="control-label {{form.labelHtmlClass}}"\n         ng-class="{\'sr-only\': !showTitle()}"\n         for="{{form.key.slice(-1)[0]}}">{{form.title}}</label>\n  <div ng-class="{\'input-group\': (form.fieldAddonLeft || form.fieldAddonRight)}">\n    <span ng-if="form.fieldAddonLeft" class="input-group-addon" ng-bind-html="form.fieldAddonLeft"></span>\n    <input id="{{form.key.slice(-1)[0]}}"\n           ng-show="form.key"\n           type="text"\n           class="form-control {{form.fieldHtmlClass}}"\n           schema-validate="form"\n           sf-field-model\n           ng-disabled="form.readonly"\n           pick-a-date="form.pickadate"\n           min-date="form.minDate"\n           max-date="form.maxDate"\n           select-years="form.selectYears"\n           select-months="form.selectMonths"\n           name="{{form.key.slice(-1)[0]}}"\n           format="form.format" />\n    <span ng-if="form.fieldAddonRight" class="input-group-addon" ng-bind-html="form.fieldAddonRight"></span>\n  </div>\n  <span class="help-block">{{ (hasError() && errorMessage(schemaError())) || form.description}}</span>\n</div>\n');}]);
+/**
+ * @ngdoc directive
+ * @module schemaForm
+ * @name pickADate
+ * @description
+ * Creates a directive to pass through to $.fn.pickadate
+ */
+(function(angular) {
+  'use strict';
+
+  angular
+      .module('schemaForm')
+      .directive('pickADate', pickADateDirective);
+
+  function pickADateDirective() {
+    return {
+        restrict: 'A',
+        require: 'ngModel',
+        scope: {
+          pickADate: '=',
+          minDate: '=',
+          maxDate: '=',
+          format: '=',
+          selectYears: '=?',
+          selectMonths: '=?'
         },
-        formatSubmit: null,
-        selectYears: (scope.selectYears || false),
-        selectMonths: (scope.selectMonths || false)
-      };
-      if (scope.pickADate) {
-        angular.extend(opts, scope.pickADate);
-      }
-      element.pickadate(opts);
-
-      //Defaultformat is for json schema date-time is ISO8601
-      //i.e.  "yyyy-mm-dd"
-      var defaultFormat = 'yyyy-mm-dd';
-
-      //View format on the other hand we get from the pickadate translation file
-      var viewFormat    = $.fn.pickadate.defaults.format;
-
-      var picker = element.pickadate('picker');
-
-      //The view value
-      ngModel.$formatters.push(function(value) {
-        if (angular.isUndefined(value) || value === null) {
-          return value;
-        }
-
-        //We set 'view' and 'highlight' instead of 'select'
-        //since the latter also changes the input, which we do not want.
-        picker.set('view', value, {format: scope.format || defaultFormat});
-        picker.set('highlight', value, {format: scope.format || defaultFormat});
-
-        //piggy back on highlight to and let pickadate do the transformation.
-        return picker.get('highlight', viewFormat);
-      });
-
-      ngModel.$parsers.push(function() {
-        return picker.get('select', scope.format || defaultFormat);
-      });
-
-      //bind once.
-      if (angular.isDefined(attrs.minDate)) {
-        var onceMin = scope.$watch('minDate', function(value) {
-          if (value) {
-            picker.set('min', formatDate(value));
-            onceMin();
+        link: function(scope, element, attrs, ngModel) {
+            //Bail out gracefully if pickadate is not loaded.
+            if (!element.pickadate) {
+              return;
+            }
+
+            //By setting formatSubmit to null we inhibit the
+            //hidden field that pickadate likes to create.
+            //We use ngModel formatters instead to format the value.
+            var opts = {
+                onClose: function() {
+                  element.blur();
+                },
+                formatSubmit: null,
+                selectYears: (scope.selectYears || false),
+                selectMonths: (scope.selectMonths || false)
+              };
+            if (scope.pickADate) {
+              angular.extend(opts, scope.pickADate);
+            }
+            element.pickadate(opts);
+
+            //Defaultformat is for json schema date-time is ISO8601
+            //i.e.  "yyyy-mm-dd"
+            var defaultFormat = 'yyyy-mm-dd';
+
+            //View format on the other hand we get from the pickadate translation file
+            var viewFormat    = $.fn.pickadate.defaults.format;
+
+            var picker = element.pickadate('picker');
+
+            //The view value
+            ngModel.$formatters.push(function(value) {
+                if (angular.isUndefined(value) || value === null) {
+                  return value;
+                }
+
+                //We set 'view' and 'highlight' instead of 'select'
+                //since the latter also changes the input, which we do not want.
+                picker.set('view', value, {format: scope.format || defaultFormat});
+                picker.set('highlight', value, {format: scope.format || defaultFormat});
+
+                //piggy back on highlight to and let pickadate do the transformation.
+                return picker.get('highlight', viewFormat);
+              });
+
+            ngModel.$parsers.push(function() {
+                return picker.get('select', scope.format || defaultFormat);
+              });
+
+            //bind once.
+            if (angular.isDefined(attrs.minDate)) {
+              var onceMin = scope.$watch('minDate', function(value) {
+                  if (value) {
+                    picker.set('min', formatDate(value));
+                    onceMin();
+                  }
+                }, true);
+            }
+
+            if (angular.isDefined(attrs.maxDate)) {
+              var onceMax = scope.$watch('maxDate', function(value) {
+                  if (value) {
+                    picker.set('max', formatDate(value));
+                    onceMax();
+                  }
+                }, true);
+            }
           }
-        }, true);
-      }
+      };
 
-      if (angular.isDefined(attrs.maxDate)) {
-        var onceMax = scope.$watch('maxDate', function(value) {
-          if (value) {
-            picker.set('max', formatDate(value));
-            onceMax();
-          }
-        }, true);
+    //String dates for min and max is not supported
+    //https://github.com/amsul/pickadate.js/issues/439
+    //So strings we create dates from
+    function formatDate(value) {
+      //Strings or timestamps we make a date of
+      if (angular.isString(value) || angular.isNumber(value)) {
+
+        return new Date(value);
       }
-    }
-  };
-});
 
-angular.module('schemaForm').config(
-['schemaFormProvider', 'schemaFormDecoratorsProvider', 'sfPathProvider',
-  function(schemaFormProvider,  schemaFormDecoratorsProvider, sfPathProvider) {
+      return value; //We hope it's a date object
+    }
+  }
+}(window.angular));
+
+(function(angular) {
+  'use strict';
+
+  angular
+      .module('schemaForm')
+      .config([
+          'schemaFormProvider',
+          'schemaFormDecoratorsProvider',
+          'sfPathProvider',
+          'sfBuilderProvider',
+          datepickerConfig
+      ]);
+
+  /**
+   * Define the datepicker addon in schemaForm
+   * @param {schemaFormProvider} schemaFormProvider
+   * @param {schemaFormDecoratorsProvider} schemaFormDecoratorsProvider
+   * @param {sfPathProvider} sfPathProvider
+   * @param {sfBuilderProvider} sfBuilderProvider
+   */
+  function datepickerConfig(
+      schemaFormProvider,
+      schemaFormDecoratorsProvider,
+      sfPathProvider,
+      sfBuilderProvider
+  ) {
+    schemaFormProvider.defaults.string.unshift(datepicker);
+    //Add to the bootstrap directive
+    schemaFormDecoratorsProvider.defineAddOn(
+        'bootstrapDecorator',
+        'datepicker',
+        'directives/decorators/bootstrap/datepicker/datepicker.html',
+        sfBuilderProvider.stdBuilders
+    );
 
-    var datepicker = function(name, schema, options) {
+    /**
+     * Sets date and date-time formats to use datepicker by default.
+     * @param {string} name
+     * @param {object} schema
+     * @param {object} options
+     * @returns {object|undefined}
+     */
+    function datepicker(name, schema, options) {
       if (schema.type === 'string' && (schema.format === 'date' || schema.format === 'date-time')) {
         var f = schemaFormProvider.stdFormObj(name, schema, options);
+
         f.key  = options.path;
         f.type = 'datepicker';
         options.lookup[sfPathProvider.stringify(options.path)] = f;
+
         return f;
       }
-    };
-
-    schemaFormProvider.defaults.string.unshift(datepicker);
-
-    //Add to the bootstrap directive
-    schemaFormDecoratorsProvider.addMapping(
-      'bootstrapDecorator',
-      'datepicker',
-      'directives/decorators/bootstrap/datepicker/datepicker.html'
-    );
-    schemaFormDecoratorsProvider.createDirective(
-      'datepicker',
-      'directives/decorators/bootstrap/datepicker/datepicker.html'
-    );
+    }
   }
-]);
+}(window.angular));
diff --git a/bootstrap-datepicker.min.js b/bootstrap-datepicker.min.js
index 967cc73..243fe84 100644
--- a/bootstrap-datepicker.min.js
+++ b/bootstrap-datepicker.min.js
@@ -1 +1 @@
-angular.module("schemaForm").run(["$templateCache",function(e){e.put("directives/decorators/bootstrap/datepicker/datepicker.html",'<div class="form-group {{form.htmlClass}}" ng-class="{\'has-error\': hasError()}"><label class="control-label {{form.labelHtmlClass}}" ng-show="showTitle()">{{form.title}}</label><div ng-class="{\'input-group\': (form.fieldAddonLeft || form.fieldAddonRight)}"><span ng-if="form.fieldAddonLeft" class="input-group-addon" ng-bind-html="form.fieldAddonLeft"></span> <input ng-show="form.key" type="text" class="form-control {{form.fieldHtmlClass}}" schema-validate="form" ng-model="$$value$$" ng-disabled="form.readonly" pick-a-date="form.pickadate" min-date="form.minDate" max-date="form.maxDate" select-years="form.selectYears" select-months="form.selectMonths" name="{{form.key.slice(-1)[0]}}" format="form.format"> <span ng-if="form.fieldAddonRight" class="input-group-addon" ng-bind-html="form.fieldAddonRight"></span></div><span class="help-block">{{ (hasError() && errorMessage(schemaError())) || form.description}}</span></div>')}]),angular.module("schemaForm").directive("pickADate",function(){var e=function(e){return angular.isString(e)||angular.isNumber(e)?new Date(e):e};return{restrict:"A",require:"ngModel",scope:{ngModel:"=",pickADate:"=",minDate:"=",maxDate:"=",format:"=",selectYears:"=?",selectMonths:"=?"},link:function(t,a,r,o){if(a.pickadate){var i={onClose:function(){a.blur()},formatSubmit:null,selectYears:t.selectYears||!1,selectMonths:t.selectMonths||!1};t.pickADate&&angular.extend(i,t.pickADate),a.pickadate(i);var n="yyyy-mm-dd",s=$.fn.pickadate.defaults.format,l=a.pickadate("picker");if(o.$formatters.push(function(e){return angular.isUndefined(e)||null===e?e:(l.set("view",e,{format:t.format||n}),l.set("highlight",e,{format:t.format||n}),l.get("highlight",s))}),o.$parsers.push(function(){return l.get("select",t.format||n)}),angular.isDefined(r.minDate))var d=t.$watch("minDate",function(t){t&&(l.set("min",e(t)),d())},!0);if(angular.isDefined(r.maxDate))var m=t.$watch("maxDate",function(t){t&&(l.set("max",e(t)),m())},!0)}}}}),angular.module("schemaForm").config(["schemaFormProvider","schemaFormDecoratorsProvider","sfPathProvider",function(e,t,a){var r=function(t,r,o){if("string"===r.type&&("date"===r.format||"date-time"===r.format)){var i=e.stdFormObj(t,r,o);return i.key=o.path,i.type="datepicker",o.lookup[a.stringify(o.path)]=i,i}};e.defaults.string.unshift(r),t.addMapping("bootstrapDecorator","datepicker","directives/decorators/bootstrap/datepicker/datepicker.html"),t.createDirective("datepicker","directives/decorators/bootstrap/datepicker/datepicker.html")}]);
\ No newline at end of file
+angular.module("schemaForm").run(["$templateCache",function(e){e.put("directives/decorators/bootstrap/datepicker/datepicker.html",'<div class="form-group {{form.htmlClass}}" ng-class="{\'has-error\': hasError()}">\n  <label class="control-label {{form.labelHtmlClass}}" ng-class="{\'sr-only\': !showTitle()}" for="{{form.key.slice(-1)[0]}}">{{form.title}}</label>\n  <div ng-class="{\'input-group\': (form.fieldAddonLeft || form.fieldAddonRight)}">\n    <span ng-if="form.fieldAddonLeft" class="input-group-addon" ng-bind-html="form.fieldAddonLeft"></span>\n    <input id="{{form.key.slice(-1)[0]}}" ng-show="form.key" type="text" class="form-control {{form.fieldHtmlClass}}" schema-validate="form" sf-field-model ng-disabled="form.readonly" pick-a-date="form.pickadate" min-date="form.minDate" max-date="form.maxDate" select-years="form.selectYears" select-months="form.selectMonths" name="{{form.key.slice(-1)[0]}}" format="form.format">\n    <span ng-if="form.fieldAddonRight" class="input-group-addon" ng-bind-html="form.fieldAddonRight"></span>\n  </div>\n  <span class="help-block">{{ (hasError() && errorMessage(schemaError())) || form.description}}</span>\n</div>\n')}]),function(e){"use strict";e.module("schemaForm").directive("pickADate",function(){return{restrict:"A",require:"ngModel",scope:{pickADate:"=",minDate:"=",maxDate:"=",format:"=",selectYears:"=?",selectMonths:"=?"},link:function(r,a,o,i){if(a.pickadate){var n={onClose:function(){a.blur()},formatSubmit:null,selectYears:r.selectYears||!1,selectMonths:r.selectMonths||!1};r.pickADate&&e.extend(n,r.pickADate),a.pickadate(n);var s="yyyy-mm-dd",d=$.fn.pickadate.defaults.format,f=a.pickadate("picker");if(i.$formatters.push(function(t){return e.isUndefined(t)||null===t?t:(f.set("view",t,{format:r.format||s}),f.set("highlight",t,{format:r.format||s}),f.get("highlight",d))}),i.$parsers.push(function(){return f.get("select",r.format||s)}),e.isDefined(o.minDate))var l=r.$watch("minDate",function(e){e&&(f.set("min",t(e)),l())},!0);if(e.isDefined(o.maxDate))var m=r.$watch("maxDate",function(e){e&&(f.set("max",t(e)),m())},!0)}}};function t(t){return e.isString(t)||e.isNumber(t)?new Date(t):t}})}(window.angular),function(e){"use strict";e.module("schemaForm").config(["schemaFormProvider","schemaFormDecoratorsProvider","sfPathProvider","sfBuilderProvider",function(e,t,r,a){e.defaults.string.unshift(function(t,a,o){if("string"===a.type&&("date"===a.format||"date-time"===a.format)){var i=e.stdFormObj(t,a,o);return i.key=o.path,i.type="datepicker",o.lookup[r.stringify(o.path)]=i,i}}),t.defineAddOn("bootstrapDecorator","datepicker","directives/decorators/bootstrap/datepicker/datepicker.html",a.stdBuilders)}])}(window.angular);
\ No newline at end of file
diff --git a/bower.json b/bower.json
index 0b16e56..c66c497 100644
--- a/bower.json
+++ b/bower.json
@@ -1,9 +1,9 @@
 {
   "name": "angular-schema-form-datepicker",
   "main": [
-    "bootstrap-datepicker.min.js"
+    "bootstrap-datepicker.js"
   ],
-  "version": "0.4.0",
+  "version": "0.4.2",
   "authors": [
     "Textalk",
     "David Jensen <david.lgj@gmail.com>"
diff --git a/gulpfile.js b/gulpfile.js
index 46295c3..07cb494 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -3,7 +3,7 @@
 var gulp = require('gulp');
 
 var templateCache = require('gulp-angular-templatecache');
-var minifyHtml = require('gulp-minify-html');
+var minifyHtml = require('gulp-htmlmin');
 var concat = require('gulp-concat');
 var uglify = require('gulp-uglify');
 var streamqueue = require('streamqueue');
diff --git a/package.json b/package.json
index 822a556..05934d2 100644
--- a/package.json
+++ b/package.json
@@ -1,34 +1,35 @@
 {
   "name": "angular-schema-form-datepicker",
-  "version": "0.4.1",
-  "description": "Datepicker add-on for schema form",
+  "version": "0.4.2",
+  "description": "Datepicker add-on for angular schema form",
   "scripts": {
     "test": "rm -fr coverage && ./node_modules/karma/bin/karma start --single-run --browsers PhantomJS karma.conf.js"
   },
   "author": "Textalk",
   "license": "MIT",
+  "main": "bootstrap-datepicker.js",
   "devDependencies": {
-    "chai": "^1.9.0",
-    "coveralls": "^2.11.0",
-    "gulp": "^3.5.6",
-    "gulp-angular-templatecache": "^1.2.1",
-    "gulp-concat": "^2.2.0",
-    "gulp-jscs": "^1.1.0",
-    "gulp-minify-html": "^0.1.1",
-    "gulp-plumber": "^0.6.5",
-    "gulp-uglify": "^0.2.1",
-    "karma": "^0.12.0",
-    "karma-chai-sinon": "^0.1.3",
-    "karma-coverage": "^0.2.1",
-    "karma-growler-reporter": "0.0.1",
-    "karma-mocha": "^0.1.3",
-    "karma-ng-html2js-preprocessor": "^0.1.0",
-    "karma-phantomjs-launcher": "^1.0.0",
-    "mocha": "^1.18.0",
-    "mocha-lcov-reporter": "0.0.1",
-    "phantomjs-prebuilt": "^2.1.7",
-    "sinon": "^1.9.0",
-    "sinon-chai": "^2.5.0",
-    "streamqueue": "0.0.5"
+    "chai": "^4.1.2",
+    "coveralls": "^3.0.0",
+    "gulp": "^3.9.1",
+    "gulp-angular-templatecache": "^2.2.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-htmlmin": "^4.0.0",
+    "gulp-jscs": "^4.1.0",
+    "gulp-plumber": "^1.2.0",
+    "gulp-uglify": "^3.0.0",
+    "karma": "^2.0.0",
+    "karma-chai-sinon": "^0.1.5",
+    "karma-coverage": "^1.1.1",
+    "karma-growler-reporter": "0.0.2",
+    "karma-mocha": "^1.3.0",
+    "karma-ng-html2js-preprocessor": "^1.0.0",
+    "karma-phantomjs-launcher": "^1.0.4",
+    "mocha": "^5.0.0",
+    "mocha-lcov-reporter": "^1.3.0",
+    "phantomjs-prebuilt": "^2.1.16",
+    "sinon": "^4.2.2",
+    "sinon-chai": "^2.14.0",
+    "streamqueue": "^1.1.2"
   }
 }
diff --git a/src/angular-pickadate.js b/src/angular-pickadate.js
index c207349..33a4b7d 100644
--- a/src/angular-pickadate.js
+++ b/src/angular-pickadate.js
@@ -1,96 +1,111 @@
-angular.module('schemaForm').directive('pickADate', function() {
+/**
+ * @ngdoc directive
+ * @module schemaForm
+ * @name pickADate
+ * @description
+ * Creates a directive to pass through to $.fn.pickadate
+ */
+(function(angular) {
+  'use strict';
 
-  //String dates for min and max is not supported
-  //https://github.com/amsul/pickadate.js/issues/439
-  //So strings we create dates from
-  var formatDate = function(value) {
-    //Strings or timestamps we make a date of
-    if (angular.isString(value) || angular.isNumber(value)) {
-      return new Date(value);
-    }
-    return value; //We hope it's a date object
-  };
-
-  return {
-    restrict: 'A',
-    require: 'ngModel',
-    scope: {
-      ngModel: '=',
-      pickADate: '=',
-      minDate: '=',
-      maxDate: '=',
-      format: '=',
-      selectYears: '=?',
-      selectMonths: '=?'
-    },
-    link: function(scope, element, attrs, ngModel) {
-      //Bail out gracefully if pickadate is not loaded.
-      if (!element.pickadate) {
-        return;
-      }
+  angular
+      .module('schemaForm')
+      .directive('pickADate', pickADateDirective);
 
-      //By setting formatSubmit to null we inhibit the
-      //hidden field that pickadate likes to create.
-      //We use ngModel formatters instead to format the value.
-      var opts = {
-        onClose: function() {
-          element.blur();
+  function pickADateDirective() {
+    return {
+        restrict: 'A',
+        require: 'ngModel',
+        scope: {
+          pickADate: '=',
+          minDate: '=',
+          maxDate: '=',
+          format: '=',
+          selectYears: '=?',
+          selectMonths: '=?'
         },
-        formatSubmit: null,
-        selectYears: (scope.selectYears || false),
-        selectMonths: (scope.selectMonths || false)
-      };
-      if (scope.pickADate) {
-        angular.extend(opts, scope.pickADate);
-      }
-      element.pickadate(opts);
+        link: function(scope, element, attrs, ngModel) {
+            //Bail out gracefully if pickadate is not loaded.
+            if (!element.pickadate) {
+              return;
+            }
 
-      //Defaultformat is for json schema date-time is ISO8601
-      //i.e.  "yyyy-mm-dd"
-      var defaultFormat = 'yyyy-mm-dd';
+            //By setting formatSubmit to null we inhibit the
+            //hidden field that pickadate likes to create.
+            //We use ngModel formatters instead to format the value.
+            var opts = {
+                onClose: function() {
+                  element.blur();
+                },
+                formatSubmit: null,
+                selectYears: (scope.selectYears || false),
+                selectMonths: (scope.selectMonths || false)
+              };
+            if (scope.pickADate) {
+              angular.extend(opts, scope.pickADate);
+            }
+            element.pickadate(opts);
 
-      //View format on the other hand we get from the pickadate translation file
-      var viewFormat    = $.fn.pickadate.defaults.format;
+            //Defaultformat is for json schema date-time is ISO8601
+            //i.e.  "yyyy-mm-dd"
+            var defaultFormat = 'yyyy-mm-dd';
 
-      var picker = element.pickadate('picker');
+            //View format on the other hand we get from the pickadate translation file
+            var viewFormat    = $.fn.pickadate.defaults.format;
 
-      //The view value
-      ngModel.$formatters.push(function(value) {
-        if (angular.isUndefined(value) || value === null) {
-          return value;
-        }
+            var picker = element.pickadate('picker');
 
-        //We set 'view' and 'highlight' instead of 'select'
-        //since the latter also changes the input, which we do not want.
-        picker.set('view', value, {format: scope.format || defaultFormat});
-        picker.set('highlight', value, {format: scope.format || defaultFormat});
+            //The view value
+            ngModel.$formatters.push(function(value) {
+                if (angular.isUndefined(value) || value === null) {
+                  return value;
+                }
 
-        //piggy back on highlight to and let pickadate do the transformation.
-        return picker.get('highlight', viewFormat);
-      });
+                //We set 'view' and 'highlight' instead of 'select'
+                //since the latter also changes the input, which we do not want.
+                picker.set('view', value, {format: scope.format || defaultFormat});
+                picker.set('highlight', value, {format: scope.format || defaultFormat});
 
-      ngModel.$parsers.push(function() {
-        return picker.get('select', scope.format || defaultFormat);
-      });
+                //piggy back on highlight to and let pickadate do the transformation.
+                return picker.get('highlight', viewFormat);
+              });
 
-      //bind once.
-      if (angular.isDefined(attrs.minDate)) {
-        var onceMin = scope.$watch('minDate', function(value) {
-          if (value) {
-            picker.set('min', formatDate(value));
-            onceMin();
-          }
-        }, true);
-      }
+            ngModel.$parsers.push(function() {
+                return picker.get('select', scope.format || defaultFormat);
+              });
+
+            //bind once.
+            if (angular.isDefined(attrs.minDate)) {
+              var onceMin = scope.$watch('minDate', function(value) {
+                  if (value) {
+                    picker.set('min', formatDate(value));
+                    onceMin();
+                  }
+                }, true);
+            }
 
-      if (angular.isDefined(attrs.maxDate)) {
-        var onceMax = scope.$watch('maxDate', function(value) {
-          if (value) {
-            picker.set('max', formatDate(value));
-            onceMax();
+            if (angular.isDefined(attrs.maxDate)) {
+              var onceMax = scope.$watch('maxDate', function(value) {
+                  if (value) {
+                    picker.set('max', formatDate(value));
+                    onceMax();
+                  }
+                }, true);
+            }
           }
-        }, true);
+      };
+
+    //String dates for min and max is not supported
+    //https://github.com/amsul/pickadate.js/issues/439
+    //So strings we create dates from
+    function formatDate(value) {
+      //Strings or timestamps we make a date of
+      if (angular.isString(value) || angular.isNumber(value)) {
+
+        return new Date(value);
       }
+
+      return value; //We hope it's a date object
     }
-  };
-});
+  }
+}(window.angular));
diff --git a/src/bootstrap-datepicker.js b/src/bootstrap-datepicker.js
index ccc3a96..852e131 100644
--- a/src/bootstrap-datepicker.js
+++ b/src/bootstrap-datepicker.js
@@ -1,28 +1,55 @@
-angular.module('schemaForm').config(
-['schemaFormProvider', 'schemaFormDecoratorsProvider', 'sfPathProvider',
-  function(schemaFormProvider,  schemaFormDecoratorsProvider, sfPathProvider) {
+(function(angular) {
+  'use strict';
 
-    var datepicker = function(name, schema, options) {
+  angular
+      .module('schemaForm')
+      .config([
+          'schemaFormProvider',
+          'schemaFormDecoratorsProvider',
+          'sfPathProvider',
+          'sfBuilderProvider',
+          datepickerConfig
+      ]);
+
+  /**
+   * Define the datepicker addon in schemaForm
+   * @param {schemaFormProvider} schemaFormProvider
+   * @param {schemaFormDecoratorsProvider} schemaFormDecoratorsProvider
+   * @param {sfPathProvider} sfPathProvider
+   * @param {sfBuilderProvider} sfBuilderProvider
+   */
+  function datepickerConfig(
+      schemaFormProvider,
+      schemaFormDecoratorsProvider,
+      sfPathProvider,
+      sfBuilderProvider
+  ) {
+    schemaFormProvider.defaults.string.unshift(datepicker);
+    //Add to the bootstrap directive
+    schemaFormDecoratorsProvider.defineAddOn(
+        'bootstrapDecorator',
+        'datepicker',
+        'directives/decorators/bootstrap/datepicker/datepicker.html',
+        sfBuilderProvider.stdBuilders
+    );
+
+    /**
+     * Sets date and date-time formats to use datepicker by default.
+     * @param {string} name
+     * @param {object} schema
+     * @param {object} options
+     * @returns {object|undefined}
+     */
+    function datepicker(name, schema, options) {
       if (schema.type === 'string' && (schema.format === 'date' || schema.format === 'date-time')) {
         var f = schemaFormProvider.stdFormObj(name, schema, options);
+
         f.key  = options.path;
         f.type = 'datepicker';
         options.lookup[sfPathProvider.stringify(options.path)] = f;
+
         return f;
       }
-    };
-
-    schemaFormProvider.defaults.string.unshift(datepicker);
-
-    //Add to the bootstrap directive
-    schemaFormDecoratorsProvider.addMapping(
-      'bootstrapDecorator',
-      'datepicker',
-      'directives/decorators/bootstrap/datepicker/datepicker.html'
-    );
-    schemaFormDecoratorsProvider.createDirective(
-      'datepicker',
-      'directives/decorators/bootstrap/datepicker/datepicker.html'
-    );
+    }
   }
-]);
+}(window.angular));
diff --git a/src/datepicker.html b/src/datepicker.html
index 12a5b82..71eb70b 100644
--- a/src/datepicker.html
+++ b/src/datepicker.html
@@ -1,14 +1,15 @@
 <div class="form-group {{form.htmlClass}}" ng-class="{'has-error': hasError()}">
-  <label class="control-label {{form.labelHtmlClass}}" ng-show="showTitle()">{{form.title}}</label>
+  <label class="control-label {{form.labelHtmlClass}}"
+         ng-class="{'sr-only': !showTitle()}"
+         for="{{form.key.slice(-1)[0]}}">{{form.title}}</label>
   <div ng-class="{'input-group': (form.fieldAddonLeft || form.fieldAddonRight)}">
-    <span ng-if="form.fieldAddonLeft"
-          class="input-group-addon"
-          ng-bind-html="form.fieldAddonLeft"></span>
-    <input ng-show="form.key"
+    <span ng-if="form.fieldAddonLeft" class="input-group-addon" ng-bind-html="form.fieldAddonLeft"></span>
+    <input id="{{form.key.slice(-1)[0]}}"
+           ng-show="form.key"
            type="text"
            class="form-control {{form.fieldHtmlClass}}"
            schema-validate="form"
-           ng-model="$$value$$"
+           sf-field-model
            ng-disabled="form.readonly"
            pick-a-date="form.pickadate"
            min-date="form.minDate"
@@ -17,9 +18,7 @@
            select-months="form.selectMonths"
            name="{{form.key.slice(-1)[0]}}"
            format="form.format" />
-    <span ng-if="form.fieldAddonRight"
-          class="input-group-addon"
-          ng-bind-html="form.fieldAddonRight"></span>
+    <span ng-if="form.fieldAddonRight" class="input-group-addon" ng-bind-html="form.fieldAddonRight"></span>
   </div>
   <span class="help-block">{{ (hasError() && errorMessage(schemaError())) || form.description}}</span>
 </div>
diff --git a/test/tests.js b/test/tests.js
index 6d6a7fd..2d63f5d 100644
--- a/test/tests.js
+++ b/test/tests.js
@@ -49,10 +49,10 @@ describe('Schema form', function() {
         $compile(tmpl)(scope);
         $rootScope.$apply();
         tmpl.children().length.should.be.equal(1);
-        tmpl.children().eq(0).children().eq(0).is('div').should.be.true;
-        tmpl.children().eq(0).children().eq(0).find('input[pick-a-date]').length.should.ok;
-        tmpl.children().eq(0).children().eq(0).find('input[pick-a-date]').attr('max-date').should.be.ok;
-        tmpl.children().eq(0).children().eq(0).find('input[pick-a-date]').attr('min-date').should.be.ok;
+        tmpl.children().eq(0).is('div').should.be.true;
+        tmpl.children().eq(0).find('input[pick-a-date]').length.should.be.equal(1);
+        tmpl.children().eq(0).find('input[pick-a-date]').attr('max-date').should.be.ok;
+        tmpl.children().eq(0).find('input[pick-a-date]').attr('min-date').should.be.ok;
 
         $.fn.pickadate.should.have.beenCalled;
 
@@ -96,7 +96,7 @@ describe('Schema form', function() {
 
         $compile(tmpl)(scope);
         $rootScope.$apply();
-        tmpl.children().eq(0).children().eq(0).find('input[pick-a-date]').attr('disabled').should.ok;
+        tmpl.children().eq(0).find('input[pick-a-date]').attr('disabled').should.ok;
 
         $.fn.pickadate.should.have.beenCalled;