feat(input) add support to for week

benlesh · benlesh · commit e5c0da0774c2 · 2014-01-17T10:07:11.000-05:00
Add support to date filter for outputing week of year Partially closes angular#757
diff --git a/src/ng/directive/input.js b/src/ng/directive/input.js
@@ -13,6 +13,7 @@ var EMAIL_REGEXP = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,6}$/;
 var NUMBER_REGEXP = /^\s*(\-|\+)?(\d+|(\d*(\.\d*)))\s*$/;
 var DATE_REGEXP = /^(\d{4})-(\d{2})-(\d{2})$/;
 var DATETIMELOCAL_REGEXP = /^(\d{4})-(\d\d)-(\d\d)T(\d\d):(\d\d):(\d\d)$/;
+var WEEK_REGEXP = /^(\d{4})-W(\d\d)$/;
 
 var inputType = {
 
@@ -222,6 +223,73 @@ var inputType = {
     </doc:example>
     */
   'datetime-local': dateTimeLocalInputType,
+
+   /**
+    * @ngdoc inputType
+    * @name ng.directive:input.week
+    *
+    * @description
+    * HTML5 or text input with week-of-the-year validation and transformation to Date. In browsers that do not yet support
+    * the HTML5 week input, a text element will be used. The text must be entered in a valid ISO-8601
+    * week format (yyyy-W##), for example: `2013-W02`. Will also accept a valid ISO
+    * week string or Date object as model input, but will always output a Date object to the model.
+    *
+    * @param {string} ngModel Assignable angular expression to data-bind to.
+    * @param {string=} name Property name of the form under which the control is published.
+    * @param {string=} min Sets the `min` validation error key if the value entered is less than `min`.
+    * @param {string=} max Sets the `max` validation error key if the value entered is greater than `max`.
+    * @param {string=} required Sets `required` validation error key if the value is not entered.
+    * @param {string=} ngRequired Adds `required` attribute and `required` validation constraint to
+    *    the element when the ngRequired expression evaluates to true. Use `ngRequired` instead of
+    *    `required` when you want to data-bind to the `required` attribute.
+    * @param {string=} ngChange Angular expression to be executed when input changes due to user
+    *    interaction with the input element.
+    *
+    * @example
+    <doc:example>
+    <doc:source>
+    <script>
+    function Ctrl($scope) {
+          $scope.value = '2013-W01';
+        }
+    </script>
+    <form name="myForm" ng-controller="Ctrl as dateCtrl">
+    Pick a date between in 2013:
+    <input type="date" name="input" ng-model="value"
+    placeholder="yyyy-MM-dd" min="2012-W32" max="2013-W52" required />
+    <span class="error" ng-show="myForm.input.$error.required">
+    Required!</span>
+    <span class="error" ng-show="myForm.input.$error.week">
+    Not a valid date!</span>
+    <tt>value = {{value}}</tt><br/>
+    <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
+    <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
+    <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
+    <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
+    </form>
+    </doc:source>
+    <doc:scenario>
+    it('should initialize to model', function() {
+          expect(binding('value')).toEqual('2013-W01');
+          expect(binding('myForm.input.$valid')).toEqual('true');
+        });
+
+    it('should be invalid if empty', function() {
+          input('value').enter('');
+          expect(binding('value')).toEqual('');
+          expect(binding('myForm.input.$valid')).toEqual('false');
+        });
+
+    it('should be invalid if over max', function() {
+          input('value').enter('2015-W01');
+          expect(binding('value')).toEqual('');
+          expect(binding('myForm.input.$valid')).toEqual('false');
+        });
+    </doc:scenario>
+    </doc:example>
+    */
+  'week': weekInputType,
+   
   /**
    * @ngdoc inputType
    * @name ng.directive:input.number
@@ -662,6 +730,119 @@ function textInputType(scope, element, attr, ctrl, $sniffer, $browser) {
   }
 }
 
+
+function weekInputType(scope, element, attr, ctrl, $sniffer, $browser, $filter) {
+   textInputType(scope, element, attr, ctrl, $sniffer, $browser);
+
+   ctrl.$parsers.push(function(value) {
+      if(ctrl.$isEmpty(value)) {
+         ctrl.$setValidity('week', true);
+         return value;
+      }
+
+      if(WEEK_REGEXP.test(value)) {
+         ctrl.$setValidity('week', true);
+         return new Date(getTime(value).time);
+      }
+
+      ctrl.$setValidity('week', false);
+      return undefined;
+   });
+
+   ctrl.$formatters.push(function(value) {
+      if(isDate(value)) {
+         return $filter('date')(value, 'yyyy-Www');
+      }
+      return ctrl.$isEmpty(value) ? '' : ''+value;
+   });
+
+   if(attr.min) {
+      var minValidator = function(value) {
+         var valTime = getTime(value),
+            minTime = getTime(attr.min);
+
+         var valid = ctrl.$isEmpty(value) ||
+            valTime.time >= minTime.time;
+
+         ctrl.$setValidity('min', valid);
+         return valid ? value : undefined;
+      };
+
+      ctrl.$parsers.push(minValidator);
+      ctrl.$formatters.push(minValidator);
+   }
+
+   if(attr.max) {
+      var maxValidator = function(value) {
+         debugger;
+         var valTime = getTime(value),
+            maxTime = getTime(attr.max);
+
+         var valid = ctrl.$isEmpty(value) ||
+            valTime.time <= maxTime.time;
+
+         ctrl.$setValidity('max', valid);
+         return valid ? value : undefined;
+      };
+
+      ctrl.$parsers.push(maxValidator);
+      ctrl.$formatters.push(maxValidator);
+   }
+
+   function getFirstThursday(year) {
+      var d = 1, date;
+      while(true) {
+         date = new Date(year, 0, d++);
+         if(date.getDay() === 4) {
+            return date;
+         }
+      }
+   }
+
+   function getThisThursday(date) {
+      return new Date(date.getFullYear(), date.getMonth(), date.getDate() + (4 - date.getDay()));
+   }
+
+   var MILLISECONDS_PER_WEEK = 6.048e8;
+
+   function getWeek(date) {
+      var firstThurs = getFirstThursday(date.getFullYear()),
+        thisThurs = getThisThursday(date),
+        diff = +thisThurs - +firstThurs;
+
+      return 1 + Math.round(diff / MILLISECONDS_PER_WEEK);
+   }
+
+   function getTime(isoWeek) {
+      if(isDate(isoWeek)) {
+         return {
+            year: isoWeek.getFullYear(),
+            week: getWeek(isoWeek),
+            time: +isoWeek
+         };
+      }
+
+      if(isString(isoWeek)) {
+         WEEK_REGEXP.lastIndex = 0;
+         var parts = WEEK_REGEXP.exec(isoWeek);
+         if(parts) {
+            var year = +parts[1],
+               week = +parts[2],
+               firstThurs = getFirstThursday(year),
+               addDays = (week - 1) * 7;
+
+            return {
+               time: +new Date(year, 0, firstThurs.getDate() + addDays),
+               week: week,
+               year: year
+            };
+         }
+      }
+
+      return NaN;
+   }
+}
+
 function dateTimeLocalInputType(scope, element, attr, ctrl, $sniffer, $browser, $filter) {
    textInputType(scope, element, attr, ctrl, $sniffer, $browser);
 
diff --git a/src/ng/filter/filters.js b/src/ng/filter/filters.js
@@ -228,6 +228,35 @@ function timeZoneGetter(date) {
   return paddedZone;
 }
 
+function getFirstThursday(year) {
+   var d = 1,
+      date = new Date(year, 0, d);
+   while(date.getDay() !== 4) {
+      d++;
+      date = new Date(year, 0, d);
+   }
+   return date;
+}
+
+function getThursdayThisWeek(date) {
+   var day = date.getDay(),
+      d = date.getDate();
+
+   return new Date(date.getFullYear(), date.getMonth(), d + (4 - day));
+}
+
+function weekGetter(size) {
+   return function(date) {
+      var firstThurs = getFirstThursday(date.getFullYear()),
+         thisThurs = getThursdayThisWeek(date);
+
+      var diff = +thisThurs - +firstThurs,
+         result = 1 + Math.round(diff / 6.048e8);
+
+      return padNumber(result, size);
+   }
+}
+
 function ampmGetter(date, formats) {
   return date.getHours() < 12 ? formats.AMPMS[0] : formats.AMPMS[1];
 }
@@ -256,10 +285,12 @@ var DATE_FORMATS = {
   EEEE: dateStrGetter('Day'),
    EEE: dateStrGetter('Day', true),
      a: ampmGetter,
-     Z: timeZoneGetter
+     Z: timeZoneGetter,
+    ww: weekGetter(2),
+     w: weekGetter(1)
 };
 
-var DATE_FORMATS_SPLIT = /((?:[^yMdHhmsaZE']+)|(?:'(?:[^']|'')*')|(?:E+|y+|M+|d+|H+|h+|m+|s+|a|Z))(.*)/,
+var DATE_FORMATS_SPLIT = /((?:[^yMdHhmsaZEw']+)|(?:'(?:[^']|'')*')|(?:E+|y+|M+|d+|H+|h+|m+|s+|a|Z|w+))(.*)/,
     NUMBER_STRING = /^\-?\d+$/;
 
 /**
@@ -294,6 +325,8 @@ var DATE_FORMATS_SPLIT = /((?:[^yMdHhmsaZE']+)|(?:'(?:[^']|'')*')|(?:E+|y+|M+|d+
  *   * `'.sss' or ',sss'`: Millisecond in second, padded (000-999)
  *   * `'a'`: am/pm marker
  *   * `'Z'`: 4 digit (+sign) representation of the timezone offset (-1200-+1200)
+ *   * `'ww'`: ISO-8601 week of year (00-53)
+ *   * `'w'`: ISO-8601 week of year (0-53)
  *
  *   `format` string can also be one of the following predefined
  *   {@link guide/i18n localizable formats}:
diff --git a/test/ng/directive/inputSpec.js b/test/ng/directive/inputSpec.js
@@ -752,6 +752,94 @@ describe('input', function() {
 
   // INPUT TYPES
 
+   describe('week', function (){
+      it('should set the view if the model is valid ISO8601 week', function() {
+         compileInput('<input type="week" ng-model="secondWeek"/>');
+
+         scope.$apply(function(){
+            scope.secondWeek = '2013-W02';
+         });
+
+         expect(inputElm.val()).toBe('2013-W02');
+      });
+
+      it('should set the view if the model is a valid Date object', function (){
+         compileInput('<input type="week" ng-model="secondWeek"/>');
+
+         scope.$apply(function(){
+            scope.secondWeek = new Date(2013, 0, 11);
+         });
+
+         expect(inputElm.val()).toBe('2013-W02');
+      });
+
+      it('should set the model undefined if the input is an invalid week string', function () {
+         compileInput('<input type="week" ng-model="value"/>');
+
+         scope.$apply(function(){
+            scope.value = new Date(2013, 0, 11);
+         });
+
+
+         expect(inputElm.val()).toBe('2013-W02');
+
+         try {
+            //set to text for browsers with datetime-local validation.
+            inputElm[0].setAttribute('type', 'text');
+         } catch(e) {
+            //for IE8
+         }
+
+         changeInputValueTo('stuff');
+         expect(inputElm.val()).toBe('stuff');
+         expect(scope.value).toBeUndefined();
+         expect(inputElm).toBeInvalid();
+      });
+
+
+
+      describe('min', function (){
+         beforeEach(function (){
+            compileInput('<input type="week" ng-model="value" name="alias" min="2013-W01" />');
+            scope.$digest();
+         });
+
+         it('should invalidate', function (){
+            changeInputValueTo('2012-W12');
+            expect(inputElm).toBeInvalid();
+            expect(scope.value).toBeFalsy();
+            expect(scope.form.alias.$error.min).toBeTruthy();
+         });
+
+         it('should validate', function (){
+            changeInputValueTo('2013-W03');
+            expect(inputElm).toBeValid();
+            expect(+scope.value).toBe(+new Date(2013, 0, 17));
+            expect(scope.form.alias.$error.min).toBeFalsy();
+         });
+      });
+
+      describe('max', function(){
+         beforeEach(function (){
+            compileInput('<input type="week" ng-model="value" name="alias" max="2013-W01" />');
+            scope.$digest();
+         });
+
+         it('should validate', function (){
+            changeInputValueTo('2012-W01');
+            expect(inputElm).toBeValid();
+            expect(+scope.value).toBe(+new Date(2012, 0, 5));
+            expect(scope.form.alias.$error.max).toBeFalsy();
+         });
+
+         it('should invalidate', function (){
+            changeInputValueTo('2013-W03');
+            expect(inputElm).toBeInvalid();
+            expect(scope.value).toBeUndefined();
+            expect(scope.form.alias.$error.max).toBeTruthy();
+         });
+      });
+   });
 
    describe('datetime-local', function () {
       it('should set the view if the model is valid ISO8601 local datetime', function() {
diff --git a/test/ng/filter/filtersSpec.js b/test/ng/filter/filtersSpec.js
@@ -192,7 +192,7 @@ describe('filters', function() {
     var noon =     new angular.mock.TzDate(+5, '2010-09-03T17:05:08.012Z'); //12pm
     var midnight = new angular.mock.TzDate(+5, '2010-09-03T05:05:08.123Z'); //12am
     var earlyDate = new angular.mock.TzDate(+5, '0001-09-03T05:05:08.000Z');
-
+    var secondWeek = new angular.mock.TzDate(+5, '2013-01-11T12:00:00.000Z'); //Friday Jan 11, 2012
     var date;
 
     beforeEach(inject(function($filter) {
@@ -215,6 +215,12 @@ describe('filters', function() {
     });
 
     it('should accept various format strings', function() {
+      expect(date(secondWeek, 'yyyy-Ww')).
+                      toEqual('2013-W2');
+
+      expect(date(secondWeek, 'yyyy-Www')).
+                      toEqual('2013-W02');
+
       expect(date(morning, "yy-MM-dd HH:mm:ss")).
                       toEqual('10-09-03 07:05:08');
 
