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