Version 0.2.0

bower.json

@@ -11,7 +11,7 @@
   "license": "MIT",
   "ignore": [],
   "description": "A complete datepicker written from scratch built on top of AngularJS",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "main": [
     "./paDatepicker.min.js",
     "./paDatepicker.tpls.js"

paDatepicker.css

@@ -22,11 +22,8 @@
 }
 
 .datepicker .date-panel th {
-  padding: 5px 0;
   text-align: center;
   text-transform: capitalize;
-  background: #428bca;
-  color: #FFF;
   border: 1px solid #428bca;
 }
 
@@ -36,12 +33,29 @@
   display: block;
   position: relative;
   width: 29px;
-  height: 29px;
-  line-height: 29px;
+  height: 31px;
+  line-height: 31px;
   position: absolute;
   top: 0;
 }
 
+.datepicker .date-panel thead tr:nth-child(1) th {
+  border-bottom: 2px solid #285379;
+  padding: 6px 0;
+  background: #428bca;
+  color: #FFF;
+}
+
+.datepicker .date-panel thead tr:nth-child(2) th {
+  padding: 4px 0;
+  background: #F0F0F0;
+  border: none;
+  color: #AAA;
+  font-weight: normal;
+  font-size: 10px;
+  border-bottom: 1px solid #E9E9E9;
+}
+
 .datepicker .date-panel th.prev-month,
 .datepicker .date-panel th.next-month {
   padding: 0;

paDatepicker.js

@@ -294,7 +294,7 @@
   'use strict';
 
   angular.module('pa-datepicker').controller('DatepickerContainerCtrl',
-    ['paDatepickerConfig', function(paDatepickerConfig) {
+    ['$scope', 'paDatepickerConfig', function($scope, paDatepickerConfig) {
 
       angular.extend(this, {
 
@@ -307,6 +307,14 @@
           this.initCurrentPeriod();
           this.initModel();
           this.initPanels();
+          this.initMonitorWatcher();
+        },
+
+        initMonitorWatcher: function() {
+          $scope.$watch(
+            function() { return this.ngModel; }.bind(this),
+            this.initModel.bind(this)
+          );
         },
 
         initConfig: function() {
@@ -347,6 +355,11 @@
             this.ngModel = {};
           } else if (this.ngModel instanceof Date) {
             this.ngModel.setHours(0, 0, 0, 0);
+          } else if (typeof(this.ngModel) === 'string' || this.ngModel instanceof String) {
+            this.ngModel = new Date(this.ngModel);
+            this.ngModel.setHours(0, 0, 0, 0);
+          } else if (this.ngModel === null) {
+            this.ngModel = undefined;
           }
         },
 
@@ -359,15 +372,25 @@
         },
 
         getRangePanelStart: function() {
-          if (this.ngModel.comparison && this.ngModel.comparison.end instanceof Date) {
-            return this.ngModel.comparison.end;
-          } else if (this.ngModel.base && this.ngModel.base.end instanceof Date) {
-            return this.ngModel.base.end;
+          if (this.ngModel.base && this.ngModel.base.end instanceof Date) {
+            if (this.ngModel.comparison && this.ngModel.comparison.end instanceof Date) {
+              return this.getFurtherDate();
+            } else {
+              return this.ngModel.base.end;
+            }
           } else {
             return this.today;
           }
         },
 
+        getFurtherDate: function() {
+          if (this.compare(this.ngModel.comparison.end, this.ngModel.base.end) > 0) {
+            return this.ngModel.comparison.end;
+          } else {
+            return this.ngModel.base.end;
+          }
+        },
+
         updatePanels: function(month, $event) {
           $event.preventDefault();
           this.datePanels.forEach(function(p) { p.month += month; });
@@ -451,7 +474,7 @@
               this.isDateWithinComparisonPeriod(date);
           }
 
-          return this.ngModel && date.getTime() === this.ngModel.getTime();
+          return this.ngModel instanceof Date && date.getTime() === this.ngModel.getTime();
         },
 
         isDateWithinBasePeriod: function(date) {