Improvement: Added Invalid Date handling

app/scripts/datePicker.js

@@ -102,6 +102,15 @@ Module.directive('datePicker', ['datePickerConfig', 'datePickerUtils', function
         }
       };
 
+      // for some reason having a similar check to this in the template doesn't work properly
+      scope.getUnformattedDateHeader = function() {
+          var dateToFormat = scope.now;
+          if ( scope.date && angular.isDate(scope.date) ) {
+              dateToFormat = scope.date;
+          }
+          return dateToFormat;
+      };
+
       scope.selectDate = function (date) {
         if (attrs.disabled) {
           return false;
@@ -154,24 +163,28 @@ Module.directive('datePicker', ['datePickerConfig', 'datePickerUtils', function
           arrowClick = false;
         }
 
-        var date = scope.date;
+        var refDate = scope.date;
+        // Default the picker menu to the current date when passed an invalid date (e.g. 'year' view of 2010-2020 is more user friendly than 1899-1899).
+        if ( !datePickerUtils.isValidDate(refDate)) {
+          refDate = new Date();
+        }
 
         switch (view) {
           case 'year':
-            scope.years = datePickerUtils.getVisibleYears(date);
+            scope.years = datePickerUtils.getVisibleYears(refDate);
             break;
           case 'month':
-            scope.months = datePickerUtils.getVisibleMonths(date);
+            scope.months = datePickerUtils.getVisibleMonths(refDate);
             break;
           case 'date':
             scope.weekdays = scope.weekdays || datePickerUtils.getDaysOfWeek();
-            scope.weeks = datePickerUtils.getVisibleWeeks(date);
+            scope.weeks = datePickerUtils.getVisibleWeeks(refDate);
             break;
           case 'hours':
-            scope.hours = datePickerUtils.getVisibleHours(date);
+            scope.hours = datePickerUtils.getVisibleHours(refDate);
             break;
           case 'minutes':
-            scope.minutes = datePickerUtils.getVisibleMinutes(date, step);
+            scope.minutes = datePickerUtils.getVisibleMinutes(refDate, step);
             break;
         }
 

app/scripts/input.js

@@ -82,8 +82,8 @@ Module.directive('dateTime', ['$compile', '$document', '$filter', 'dateTimeConfi
       }
 
       function parser(viewValue) {
-        if (!viewValue) {
-          return '';
+        if (viewValue.length === 0) {
+          return null;
         }
         var parsed = moment(viewValue, format);
         if (parsed.isValid()) {

app/templates/datepicker.html

@@ -4,7 +4,7 @@
       <thead>
       <tr>
         <th ng-click="prev()">&lsaquo;</th>
-        <th colspan="5" class="switch" ng-click="setView('month')" ng-bind="date|mFormat:'YYYY MMMM':tz"></th>
+        <th colspan="5" class="switch" ng-click="setView('month')" ng-bind="getUnformattedDateHeader()|mFormat:'DD MMMM YYYY':tz"></th>
         <th ng-click="next()">&rsaquo;</i></th>
       </tr>
       <tr>
@@ -47,7 +47,7 @@
       <thead>
       <tr>
         <th ng-click="prev()">&lsaquo;</th>
-        <th colspan="5" class="switch" ng-click="setView('year')" ng-bind="date|mFormat:'YYYY':tz"></th>
+        <th colspan="5" class="switch" ng-click="setView('year')" ng-bind="getUnformattedDateHeader()|mFormat:'DD MMMM YYYY':tz"></th>
         <th ng-click="next()">&rsaquo;</i></th>
       </tr>
       </thead>
@@ -68,7 +68,7 @@
       <thead>
       <tr>
         <th ng-click="prev(24)">&lsaquo;</th>
-        <th colspan="5" class="switch" ng-click="setView('date')" ng-bind="date|mFormat:'DD MMMM YYYY':tz"></th>
+        <th colspan="5" class="switch" ng-click="setView('date')" ng-bind="getUnformattedDateHeader()|mFormat:'DD MMMM YYYY':tz'"></th>
         <th ng-click="next(24)">&rsaquo;</i></th>
       </tr>
       </thead>
@@ -88,7 +88,7 @@
       <thead>
       <tr>
         <th ng-click="prev()">&lsaquo;</th>
-        <th colspan="5" class="switch" ng-click="setView('hours')" ng-bind="date|mFormat:'DD MMMM YYYY':tz"></th>
+        <th colspan="5" class="switch" ng-click="setView('hours')" ng-bind="getUnformattedDateHeader()|mFormat:'DD MMMM YYYY':tz"></th>
         <th ng-click="next()">&rsaquo;</i></th>
       </tr>
       </thead>

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "angular-datepicker",
   "license": "MIT",
-  "version": "2.1.3",
+  "version": "1.0.36",
   "main": [
     "./dist/angular-datepicker.js",
     "./dist/angular-datepicker.css"
@@ -23,12 +23,18 @@
   "dependencies": {
     "angular": ">=1.2.14",
     "moment": "~2.10.6",
-    "moment-timezone": "~0.4.1"
+    "moment-timezone": "~0.4.1",
+    "lodash": "~3.10.1"
   },
   "devDependencies": {
     "angular": "1.2.14",
     "angular-mocks": "1.2.14",
     "angular-scenario": "1.2.14",
-    "angular-bootstrap": "~0.3.0"
+    "angular-bootstrap": "~0.3.0",
+    "lodash": "~3.10.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/JGSimko/angular-datepicker"
   }
 }