feat(datepicker): timeless-json-mode

datepickerConfig option for json models when we don't care about the time.
* on init and parse: sets model to 'yyyy-MM-dd' format
* on format: converts model to date before normal formatting

[codepen](http://codepen.io/davious/pen/gpyVQm?editors=101)

Related: angular-ui#1891, angular-ui#2702, angular-ui#2906, angular-ui#2952

Author: davious

Diff for: src/datepicker/datepicker.js

@@ -514,6 +514,7 @@ function($compile, $parse, $document, $rootScope, $position, dateFilter, datePar
           onOpenFocus = angular.isDefined(attrs.onOpenFocus) ? scope.$parent.$eval(attrs.onOpenFocus) : datepickerPopupConfig.onOpenFocus,
           datepickerPopupTemplateUrl = angular.isDefined(attrs.datepickerPopupTemplateUrl) ? attrs.datepickerPopupTemplateUrl : datepickerPopupConfig.datepickerPopupTemplateUrl,
           datepickerTemplateUrl = angular.isDefined(attrs.datepickerTemplateUrl) ? attrs.datepickerTemplateUrl : datepickerPopupConfig.datepickerTemplateUrl,
+          timelessJsonMode = angular.isDefined(attrs.timelessJsonMode) ? attrs.timelessJsonMode : datepickerPopupConfig.timelessJsonMode,
           cache = {};
 
       scope.showButtonBar = angular.isDefined(attrs.showButtonBar) ? scope.$parent.$eval(attrs.showButtonBar) : datepickerPopupConfig.showButtonBar;
@@ -535,6 +536,19 @@ function($compile, $parse, $document, $rootScope, $position, dateFilter, datePar
         return (new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()) - new Date(date2.getFullYear(), date2.getMonth(), date2.getDate()));
       };
 
+      scope.jsonToDate = function(date) {
+        if (date && angular.isString(date) && date.indexOf('-') > -1) {
+          var update = date.indexOf('T') > -1;
+          date = date.substring(0, 10).split('-');
+          date = new Date(+date[0], +date[1] - 1, +date[2]);
+          if(update) {
+            ngModel.$setViewValue(dateFilter(date, dateFormat));
+            ngModel.$render(); 
+          }
+        }
+        return date;
+      };
+
       var isHtml5DateInput = false;
       if (datepickerPopupConfig.html5Types[attrs.type]) {
         dateFormat = datepickerPopupConfig.html5Types[attrs.type];
@@ -649,15 +663,15 @@ function($compile, $parse, $document, $rootScope, $position, dateFilter, datePar
           if (isNaN(date)) {
             return undefined;
           } else {
-            return date;
+            return timelessJsonMode ? dateFilter(date, 'yyyy-MM-dd') : date;
           }
         } else {
           return undefined;
         }
       }
 
       function validator(modelValue, viewValue) {
-        var value = modelValue || viewValue;
+        var value = (timelessJsonMode ? scope.jsonToDate(modelValue) : modelValue) || viewValue;
 
         if (!attrs.ngRequired && !value) {
           return true;
@@ -684,11 +698,17 @@ function($compile, $parse, $document, $rootScope, $position, dateFilter, datePar
         ngModel.$validators.date = validator;
         ngModel.$parsers.unshift(parseDate);
         ngModel.$formatters.push(function(value) {
+          if(timelessJsonMode) {
+            value = scope.jsonToDate(value);
+          }
           scope.date = value;
           return ngModel.$isEmpty(value) ? value : dateFilter(value, dateFormat);
         });
       } else {
         ngModel.$formatters.push(function(value) {
+          if(timelessJsonMode) {
+            value = scope.jsonToDate(value);
+          }
           scope.date = value;
           return value;
         });
@@ -817,4 +837,20 @@ function($compile, $parse, $document, $rootScope, $position, dateFilter, datePar
       return attrs.templateUrl || 'template/datepicker/popup.html';
     }
   };
+})
+
+.directive('datepickerJsonUtils', function() {
+  return {
+    restrict: 'A',
+    link: function(scope) {
+      scope.jsonToTicks = function(date) {
+        if (date && angular.isString(date) && date.indexOf('-') > -1) {
+          date = date.substring(0, 10).split('-');
+          date = new Date(+date[0], +date[1] - 1, +date[2]);
+        }
+        return date.getTime ? date.getTime() : null;
+      };
+      scope.oneDay = 1000 * 60 * 60 * 24;
+    }
+  };
 });

Diff for: src/datepicker/test/datepicker.spec.js

@@ -1255,6 +1255,57 @@ describe('datepicker directive', function() {
 
     });
 
+    describe('in timelessJsonMode with an ngModelController having formatters and parsers', function() {
+      var inputEl, dropdownEl, $document, $sniffer, $timeout;
+
+      function assignElements(wrapElement) {
+        inputEl = wrapElement.find('input');
+        dropdownEl = wrapElement.find('ul');
+        element = dropdownEl.find('table');
+      }
+
+      beforeEach(inject(function() {
+        $rootScope.date = '2010-09-30T00:00:00.000';
+        $rootScope.isopen = true;
+        var wrapper = $compile('<div><input ng-model="date" datepicker-popup="MM/dd/yyyy" timeless-json-mode="true" is-open="isopen"></div>')($rootScope);
+        $rootScope.$digest();
+        assignElements(wrapper);
+      }));
+ 
+      it('formats model to yyyy-MM-dd on initialization', function() {
+          expect(inputEl.val()).toBe('09/30/2010');
+          expect($rootScope.date).toEqual('2010-09-30');
+      });
+
+      it('updates the input when a day is clicked', function() {
+          clickOption(17);
+          expect(inputEl.val()).toBe('09/15/2010');
+          expect($rootScope.date).toEqual('2010-09-15');
+      });
+    });
+
+    describe('datepickerJsonUtils', function() {
+      var inputEl, dropdownEl, $document, $sniffer, $timeout;
+
+      function assignElements(wrapElement) {
+        inputEl = wrapElement.find('input');
+        dropdownEl = wrapElement.find('ul');
+        element = dropdownEl.find('table');
+      }
+
+      beforeEach(inject(function() {
+        $rootScope.date = '2010-09-15T00:00:00.000';
+        $rootScope.isopen = true;
+        var wrapper = $compile('<div><input ng-model="date" datepicker-popup="MM/dd/yyyy" timeless-json-mode="true" datepicker-json-utils max-date="jsonToTicks(date) + oneDay" is-open="isopen"></div>')($rootScope);
+        $rootScope.$digest();
+        assignElements(wrapper);
+      }));
+
+      it('jsonToDate should be on scope and work with max-date', function() {
+        expect(getAllOptionsEl().eq(19).prop('disabled')).toBe(true);
+      });
+    });
+
     describe('setting datepickerPopupConfig inside ng-if', function() {
       var originalConfig = {};
       beforeEach(inject(function (datepickerPopupConfig) {