feat(calendar): Add date completion detection

Provide (very) basic detection to see if a string contains enough
information to be considered a date. Used to set the ngModel value when
the input is being updated.

Author: Michael Chen

src/components/datepicker/calendar.js

@@ -13,9 +13,6 @@
   ]).directive('mdCalendar', calendarDirective);
 
 
-  // PRE RELEASE
-  // TODO(mchen): Date "isComplete" logic
-
   // POST RELEASE
   // TODO(jelbourn): Mac Cmd + left / right == Home / End
   // TODO(jelbourn): Clicking on the month label opens the month-picker.

src/components/datepicker/dateLocale.spec.js

@@ -44,6 +44,30 @@ describe('$mdDateLocale', function() {
       var dateStr = '2014-03-25';
       expect(dateLocale.parseDate(dateStr)).toEqual(jasmine.any(Date));
     });
+
+    it('should have default date completion detection', function() {
+      // Valid dates.
+      expect(dateLocale.isDateComplete('04/05/15')).toBe(true);
+      expect(dateLocale.isDateComplete('04/05/2015')).toBe(true);
+      expect(dateLocale.isDateComplete('4/5/2015')).toBe(true);
+      expect(dateLocale.isDateComplete('2015 04 05')).toBe(true);
+      expect(dateLocale.isDateComplete('2015-04-05')).toBe(true);
+      expect(dateLocale.isDateComplete('2015,04,05')).toBe(true);
+      expect(dateLocale.isDateComplete('2015.04.05')).toBe(true);
+      expect(dateLocale.isDateComplete('April 5, 2015')).toBe(true);
+      expect(dateLocale.isDateComplete('April 5 2015')).toBe(true);
+      expect(dateLocale.isDateComplete('Apr 5, 2015')).toBe(true);
+      expect(dateLocale.isDateComplete('Apr 5 2015')).toBe(true);
+      expect(dateLocale.isDateComplete('2015 Apr 5')).toBe(true);
+
+      // Invalid dates.
+      expect(dateLocale.isDateComplete('5')).toBe(false);
+      expect(dateLocale.isDateComplete('4/5')).toBe(false);
+      expect(dateLocale.isDateComplete('04/05')).toBe(false);
+      expect(dateLocale.isDateComplete('Apr 5')).toBe(false);
+      expect(dateLocale.isDateComplete('April 5')).toBe(false);
+      expect(dateLocale.isDateComplete('April 5 200000')).toBe(false);
+    });
   });
 
   describe('with custom values', function() {
@@ -62,11 +86,14 @@ describe('$mdDateLocale', function() {
       $mdDateLocaleProvider.shortDays = fakeShortDays;
       $mdDateLocaleProvider.dates = fakeDates;
       $mdDateLocaleProvider.formatDate = function() {
-        return 'Your birthday!'
+        return 'Your birthday!';
       };
       $mdDateLocaleProvider.parseDate = function() {
         return new Date(1969, 6, 16);
       };
+      $mdDateLocaleProvider.isDateComplete = function(dateString) {
+        return dateString === 'The One True Date';
+      };
     }));
 
 
@@ -83,6 +110,9 @@ describe('$mdDateLocale', function() {
       expect(dateLocale.dates).toEqual(fakeDates);
       expect(dateLocale.formatDate(new Date())).toEqual('Your birthday!');
       expect(dateLocale.parseDate('2020-01-20')).toEqual(new Date(1969, 6, 16));
+      expect(dateLocale.parseDate('2020-01-20')).toEqual(new Date(1969, 6, 16));
+      expect(dateLocale.isDateComplete('The One True Date')).toBe(true);
+      expect(dateLocale.isDateComplete('Anything Else')).toBe(false);
     });
   });
 });

src/components/datepicker/dateLocaleProvider.js

@@ -141,6 +141,24 @@
         return new Date(dateString);
       }
 
+      /**
+       * Default function to determine whether a string makes sense to be
+       * parsed to a Date object.
+       *
+       * This is very permissive and is just a basic sanity check to ensure that
+       * things like single integers aren't able to be parsed into dates.
+       * @param {string} dateString
+       * @returns {boolean}
+       */
+      function defaultIsDateComplete(dateString) {
+        dateString = dateString.trim();
+
+        // Looks for three chunks of content (either numbers or text) separated
+        // by delimiters.
+        var re = /^(([a-zA-Z]{3,}|[0-9]{1,4})([ \.,]+|[\/\-])){2}([a-zA-Z]{3,}|[0-9]{1,4})$/;
+        return re.test(dateString);
+      }
+
       /**
        * Default date-to-string formatter to get a month header.
        * @param {!Date} date
@@ -198,6 +216,7 @@
         dates: this.dates || defaultDates,
         formatDate: this.formatDate || defaultFormatDate,
         parseDate: this.parseDate || defaultParseDate,
+        isDateComplete: this.isDateComplete || defaultIsDateComplete,
         monthHeaderFormatter: this.monthHeaderFormatter || defaultMonthHeaderFormatter,
         weekNumberFormatter: this.weekNumberFormatter || defaultWeekNumberFormatter,
         longDateFormatter: this.longDateFormatter || defaultLongDateFormatter,

src/components/datepicker/datePicker.js

@@ -212,9 +212,7 @@
 
       self.inputElement.size = inputString.length + EXTRA_INPUT_SIZE;
 
-      if (self.dateUtil.isValidDate(parsedDate)) {
-        // TODO(jelbourn): if we can detect here that `inputString` is a "complete" date,
-        // set the ng-model value.
+      if (self.dateUtil.isValidDate(parsedDate) && self.dateLocale.isDateComplete(inputString)) {
         self.date = parsedDate;
         self.$scope.$apply();
       }