jingrow/air-datepicker
1
0
Fork 0
mirror of https://github.com/frappe/air-datepicker.git synced 2026-01-14 11:01:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

add current day style

Browse Source
This commit is contained in:
t1m0n 2015-10-19 12:03:28 +03:00
parent ca94663d4a
commit f8b762c481
7 changed files with 40 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
dist/css/datepicker.css vendored
View File

@ -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; }

7
dist/js/datepicker.js vendored
View File

@ -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>'
},

6
js/datepicker/body.js
View File

@ -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>'
},

1
js/datepicker/datepicker.js
View File

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

12
sass/datepicker/_cell.scss
View File

@ -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

1
sass/datepicker/_datepicker.scss
View File

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

3
sass/datepicker/datepicker-config.scss
View File

@ -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: '';