add current day style

dist/css/datepicker.css

@@ -8,7 +8,8 @@
   width: 224px; }
 
 .datepicker--body {
-  display: none; }
+  display: none;
+  margin: -1px; }
   .datepicker--body.active {
     display: block; }
 
@@ -61,14 +62,22 @@
 
 .datepicker--cell {
   border-radius: 2px;
+  color: #333;
   cursor: pointer;
   display: flex;
+  position: relative;
   align-items: center;
   justify-content: center;
   width: 32px;
-  height: 32px; }
+  height: 32px;
+  z-index: 1; }
   .datepicker--cell:hover {
     background: #eee; }
+  .datepicker--cell.-current- {
+    color: #60C4F5;
+    border: 1px solid #60C4F5; }
+    .datepicker--cell.-current-:hover {
+      background: rgba(96, 196, 245, 0.05); }
 
 .datepicker--cell-day.-another-month- {
   color: #ddd; }

dist/js/datepicker.js

@@ -47,6 +47,7 @@ var Datepicker;
 
         this.currentDate = this.opts.start;
         this.currentView = this.opts.defaultView;
+        this.selectedDate = '';
         this.views = {};
 
         this.init()
@@ -412,6 +413,7 @@ Datepicker.Cell = function () {
 
             if (this.d.isWeekend(date.getDay())) _class += " -weekend-";
             if (date.getMonth() != this.d.currentDate.getMonth()) _class += " -another-month-";
+            if (date.getDate() == new Date().getDate()) _class += ' -current-';
 
             return '<div class="' + _class + '" data-date="' + date.getDate() + '">' + date.getDate() + '</div>';
         },
@@ -438,8 +440,11 @@ Datepicker.Cell = function () {
         _getMonthHtml: function (date) {
             var _class = "datepicker--cell datepicker--cell-month",
                 d = Datepicker.getParsedDate(date),
+                currentDate = new Date(),
                 loc = this.d.loc;
 
+            if (d.month == currentDate.getMonth() && d.year == currentDate.getFullYear()) _class += ' -current-';
+
             return '<div class="' + _class + '" data-month="' + d.month + '">' + loc.months[d.month] + '</div>'
         },
 
@@ -466,6 +471,8 @@ Datepicker.Cell = function () {
                 _class += ' -another-decade-';
             }
 
+            if (d.year == new Date().getFullYear()) _class += ' -current-';
+
             return '<div class="' + _class + '" data-year="' + d.year + '">' + d.year + '</div>'
         },
 

js/datepicker/body.js

@@ -89,6 +89,7 @@
 
             if (this.d.isWeekend(date.getDay())) _class += " -weekend-";
             if (date.getMonth() != this.d.currentDate.getMonth()) _class += " -another-month-";
+            if (date.getDate() == new Date().getDate()) _class += ' -current-';
 
             return '<div class="' + _class + '" data-date="' + date.getDate() + '">' + date.getDate() + '</div>';
         },
@@ -115,8 +116,11 @@
         _getMonthHtml: function (date) {
             var _class = "datepicker--cell datepicker--cell-month",
                 d = Datepicker.getParsedDate(date),
+                currentDate = new Date(),
                 loc = this.d.loc;
 
+            if (d.month == currentDate.getMonth() && d.year == currentDate.getFullYear()) _class += ' -current-';
+
             return '<div class="' + _class + '" data-month="' + d.month + '">' + loc.months[d.month] + '</div>'
         },
 
@@ -143,6 +147,8 @@
                 _class += ' -another-decade-';
             }
 
+            if (d.year == new Date().getFullYear()) _class += ' -current-';
+
             return '<div class="' + _class + '" data-year="' + d.year + '">' + d.year + '</div>'
         },
 

js/datepicker/datepicker.js

@@ -47,6 +47,7 @@ var Datepicker;
 
         this.currentDate = this.opts.start;
         this.currentView = this.opts.defaultView;
+        this.selectedDate = '';
         this.views = {};
 
         this.init()

sass/datepicker/_cell.scss

@@ -11,16 +11,28 @@
 
 .datepicker--cell {
   border-radius: $datepickerBorderRadius;
+  color: $textColor;
   cursor: pointer;
   display: flex;
+  position: relative;
   align-items: center;
   justify-content: center;
   width: $dayCellSize;
   height: $dayCellSize;
+  z-index: 1;
 
   &:hover {
     background: $colorCellHover;
   }
+
+  &.-current- {
+    color: $colorCellCurrent;
+    border: 1px solid $colorCellCurrent;
+
+    &:hover {
+      background: rgba($colorCellCurrent, .05);
+    }
+  }
 }
 
 //  Day cell

sass/datepicker/_datepicker.scss

@@ -16,6 +16,7 @@
 
 .datepicker--body {
   display: none;
+  margin: -1px;
 
   &.active {
     display: block;

sass/datepicker/datepicker-config.scss

@@ -2,6 +2,7 @@ $dayCellSize: 32px;
 $datepickerWidth: 7 * $dayCellSize;
 $datepickerBorderRadius: 2px;
 $yearsPerRow: 4;
+$textColor: #333;
 
 $navigationHeight: 32px;
 
@@ -10,6 +11,6 @@ $colorGrey: #ddd;
 
 $colorAnotherMonth: #ddd;
 $colorCellHover: #eee;
-$colorCellCurrent: '';
+$colorCellCurrent: #60C4F5;
 $colorCellSelected: '';
 $colorCellWeekend: '';