diff --git a/dist/css/datepicker.css b/dist/css/datepicker.css
index 61026a0..927e640 100644
--- a/dist/css/datepicker.css
+++ b/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; }
diff --git a/dist/js/datepicker.js b/dist/js/datepicker.js
index 6bcfa33..bfa7b35 100644
--- a/dist/js/datepicker.js
+++ b/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 '
' + date.getDate() + '
';
},
@@ -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 '' + loc.months[d.month] + '
'
},
@@ -466,6 +471,8 @@ Datepicker.Cell = function () {
_class += ' -another-decade-';
}
+ if (d.year == new Date().getFullYear()) _class += ' -current-';
+
return '' + d.year + '
'
},
diff --git a/js/datepicker/body.js b/js/datepicker/body.js
index c6fcaf3..90e934a 100644
--- a/js/datepicker/body.js
+++ b/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 '' + date.getDate() + '
';
},
@@ -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 '' + loc.months[d.month] + '
'
},
@@ -143,6 +147,8 @@
_class += ' -another-decade-';
}
+ if (d.year == new Date().getFullYear()) _class += ' -current-';
+
return '' + d.year + '
'
},
diff --git a/js/datepicker/datepicker.js b/js/datepicker/datepicker.js
index 9eda288..d22795a 100644
--- a/js/datepicker/datepicker.js
+++ b/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()
diff --git a/sass/datepicker/_cell.scss b/sass/datepicker/_cell.scss
index 8842157..e8a7a22 100644
--- a/sass/datepicker/_cell.scss
+++ b/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
diff --git a/sass/datepicker/_datepicker.scss b/sass/datepicker/_datepicker.scss
index 5a9f079..89f517a 100644
--- a/sass/datepicker/_datepicker.scss
+++ b/sass/datepicker/_datepicker.scss
@@ -16,6 +16,7 @@
.datepicker--body {
display: none;
+ margin: -1px;
&.active {
display: block;
diff --git a/sass/datepicker/datepicker-config.scss b/sass/datepicker/datepicker-config.scss
index 7509961..3c8cb72 100644
--- a/sass/datepicker/datepicker-config.scss
+++ b/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: '';
\ No newline at end of file