Fixed #28: Highlight today

fengyuanchen · Oct 15, 2016 · 903feb1 · 903feb1
1 parent 3e4394f
commit 903feb1
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 14 deletions.
diff --git a/src/datepicker.js b/src/datepicker.js
@@ -452,16 +452,31 @@
             view: '',
             muted: false,
             picked: false,
-            disabled: false
+            disabled: false,
+            highlighted: false,
           };
+      var classes = [];
 
       $.extend(defaults, data);
 
+      if (defaults.muted) {
+        classes.push(options.mutedClass);
+      }
+
+      if (defaults.highlighted) {
+        classes.push(options.highlightedClass);
+      }
+
+      if (defaults.picked) {
+        classes.push(options.pickedClass);
+      }
+
+      if (defaults.disabled) {
+        classes.push(options.disabledClass);
+      }
+
       return (
-        '<' + itemTag + ' ' +
-        (defaults.disabled ? 'class="' + options.disabledClass + '"' :
-        defaults.picked ? 'class="' + options.pickedClass + '"' :
-        defaults.muted ? 'class="' + options.mutedClass + '"' : '') +
+        '<' + itemTag + ' class="' + classes.join(' ') + '"' +
         (defaults.view ? ' data-view="' + defaults.view + '"' : '') +
         '>' +
         defaults.text +
@@ -630,6 +645,10 @@
       var prevViewYear = viewYear;
       var prevViewMonth = viewMonth;
       var nextViewYear = viewYear;
+      var now = new Date();
+      var thisYear = now.getFullYear();
+      var thisMonth = now.getMonth();
+      var today = now.getDate();
       var nextViewMonth = viewMonth;
       var date = this.date;
       var year = date.getFullYear();
@@ -692,7 +711,8 @@
           text: i,
           view: 'day prev',
           muted: true,
-          disabled: isDisabled
+          disabled: isDisabled,
+          highlighted: prevViewYear === thisYear && prevViewMonth === thisMonth && date.getDate() === today,
         }));
       }
 
@@ -735,7 +755,8 @@
           text: i,
           view: 'day next',
           muted: true,
-          disabled: isDisabled
+          disabled: isDisabled,
+          highlighted: nextViewYear === thisYear && nextViewMonth === thisMonth && date.getDate() === today,
         }));
       }
 
@@ -763,7 +784,8 @@
           text: i,
           view: isDisabled ? 'day disabled' : isPicked ? 'day picked' : 'day',
           picked: isPicked,
-          disabled: isDisabled
+          disabled: isDisabled,
+          highlighted: viewYear === thisYear && viewMonth === thisMonth && date.getDate() === today,
         }));
       }
 
@@ -1382,6 +1404,9 @@
     // A class (CSS) for disabled date item
     disabledClass: 'disabled',
 
+    // A class (CSS) for highlight date item
+    highlightedClass: 'highlighted',
+
     // The template of the datepicker
     template: (
       '<div class="datepicker-container">' +

diff --git a/src/datepicker.scss b/src/datepicker.scss
@@ -9,6 +9,12 @@
  */
 
 
+// Variables
+// -----------------------------------------------------------------------------
+
+$brand-color: #39f;
+
+
 // Container
 // -----------------------------------------------------------------------------
 
@@ -65,7 +71,7 @@
 
 .datepicker-top-left,
 .datepicker-top-right {
-  border-top-color: #39f;
+  border-top-color: $brand-color;
 
   &:before,
   &:after {
@@ -76,7 +82,7 @@
   }
 
   &:before {
-    border-bottom-color: #39f;
+    border-bottom-color: $brand-color;
   }
 
   &:after {
@@ -88,7 +94,7 @@
 
 .datepicker-bottom-left,
 .datepicker-bottom-right {
-  border-bottom-color: #39f;
+  border-bottom-color: $brand-color;
 
   &:before,
   &:after {
@@ -99,7 +105,7 @@
   }
 
   &:before {
-    border-top-color: #39f;
+    border-top-color: $brand-color;
   }
 
   &:after {
@@ -155,17 +161,25 @@
       background-color: #fff;
 
       &:hover {
-        background-color: #eee;
+        background-color: lighten($brand-color, 35%);
       }
 
       &.muted,
       &.muted:hover {
         color: #999;
       }
 
+      &.highlighted {
+        background-color: lighten($brand-color, 35%);
+      }
+
+      &.highlighted:hover {
+        background-color: lighten($brand-color, 30%);
+      }
+
       &.picked,
       &.picked:hover {
-        color: #39f;
+        color: $brand-color;
       }
 
       &.disabled,
@@ -174,6 +188,10 @@
 
         color: #ccc;
         background-color: #fff;
+
+        &.highlighted {
+          background-color: lighten($brand-color, 35%);
+        }
       }
 
       &[data-view='years prev'],