Merge pull request #2 from verybestjp/fix/date_picker_today_style

[modify]datepicker で「本日」にスタイルを当てる #64
verybestjp · Mar 4, 2019 · fc3f52a · fc3f52a
2 parents d76e8de + aea2ac2
commit fc3f52a
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 10 deletions.
diff --git a/dist/angular-datepicker.css b/dist/angular-datepicker.css
@@ -112,9 +112,16 @@ datepicker, .datepicker, [datepicker],
   -moz-border-radius: 1px;
   border-radius: 1px;
 }
-._720kb-datepicker-calendar-day:hover,
+._720kb-datepicker-calendar-day:hover {
+  background: #d0e9ff;
+}
+._720kb-datepicker-calendar-day._720kb-datepicker-today {
+  background: #777;
+  color: #fff;
+}
 ._720kb-datepicker-calendar-day._720kb-datepicker-active {
-  background: rgba(0, 0, 0, 0.03);
+  background: #138efa;
+  color: #fff;
 }
 ._720kb-datepicker-calendar-header a, ._720kb-datepicker-calendar-header a:hover {
   text-decoration:none;

diff --git a/dist/angular-datepicker.js b/dist/angular-datepicker.js
@@ -117,7 +117,7 @@
           '<a href="javascript:void(0)" ng-repeat="px in prevMonthDays" class="_720kb-datepicker-calendar-day _720kb-datepicker-disabled">',
             '{{px}}',
           '</a>',
-          '<a href="javascript:void(0)" ng-repeat="item in days" ng-click="setDatepickerDay(item);$event.stopPropagation()" ng-class="{\'_720kb-datepicker-active\': selectedDay === item && selectedMonth === monthNumber && selectedYear === year, \'_720kb-datepicker-disabled\': !isSelectableMinDate(year + \'/\' + monthNumber + \'/\' + item ) || !isSelectableMaxDate(year + \'/\' + monthNumber + \'/\' + item) || !isSelectableDate(monthNumber, year, item) || !isSelectableDay(monthNumber, year, item),\'_720kb-datepicker-today\': item === today.getDate() && monthNumber === (today.getMonth() + 1) && year === today.getFullYear() && !selectedDay}" class="_720kb-datepicker-calendar-day">',
+          '<a href="javascript:void(0)" ng-repeat="item in days" ng-click="setDatepickerDay(item);$event.stopPropagation()" ng-class="{\'_720kb-datepicker-active\': selectedDay === item && selectedMonth === monthNumber && selectedYear === year, \'_720kb-datepicker-disabled\': !isSelectableMinDate(year + \'/\' + monthNumber + \'/\' + item ) || !isSelectableMaxDate(year + \'/\' + monthNumber + \'/\' + item) || !isSelectableDate(monthNumber, year, item) || !isSelectableDay(monthNumber, year, item),\'_720kb-datepicker-today\': item === today.getDate() && monthNumber === (today.getMonth() + 1) && year === today.getFullYear()}" class="_720kb-datepicker-calendar-day">',
             '{{item}}',
           '</a>',
           '<a href="javascript:void(0)" ng-repeat="nx in nextMonthDays" class="_720kb-datepicker-calendar-day _720kb-datepicker-disabled">',

diff --git a/dist/angular-datepicker.min.css b/dist/angular-datepicker.min.css
diff --git a/dist/angular-datepicker.min.js b/dist/angular-datepicker.min.js
diff --git a/dist/angular-datepicker.sourcemap.map b/dist/angular-datepicker.sourcemap.map
diff --git a/src/css/angular-datepicker.css b/src/css/angular-datepicker.css
@@ -112,9 +112,16 @@ datepicker, .datepicker, [datepicker],
   -moz-border-radius: 1px;
   border-radius: 1px;
 }
-._720kb-datepicker-calendar-day:hover,
+._720kb-datepicker-calendar-day:hover {
+  background: #d0e9ff;
+}
+._720kb-datepicker-calendar-day._720kb-datepicker-today {
+  background: #777;
+  color: #fff;
+}
 ._720kb-datepicker-calendar-day._720kb-datepicker-active {
-  background: rgba(0, 0, 0, 0.03);
+  background: #138efa;
+  color: #fff;
 }
 ._720kb-datepicker-calendar-header a, ._720kb-datepicker-calendar-header a:hover {
   text-decoration:none;

diff --git a/src/js/angular-datepicker.js b/src/js/angular-datepicker.js
@@ -117,7 +117,7 @@
           '<a href="javascript:void(0)" ng-repeat="px in prevMonthDays" class="_720kb-datepicker-calendar-day _720kb-datepicker-disabled">',
             '{{px}}',
           '</a>',
-          '<a href="javascript:void(0)" ng-repeat="item in days" ng-click="setDatepickerDay(item);$event.stopPropagation()" ng-class="{\'_720kb-datepicker-active\': selectedDay === item && selectedMonth === monthNumber && selectedYear === year, \'_720kb-datepicker-disabled\': !isSelectableMinDate(year + \'/\' + monthNumber + \'/\' + item ) || !isSelectableMaxDate(year + \'/\' + monthNumber + \'/\' + item) || !isSelectableDate(monthNumber, year, item) || !isSelectableDay(monthNumber, year, item),\'_720kb-datepicker-today\': item === today.getDate() && monthNumber === (today.getMonth() + 1) && year === today.getFullYear() && !selectedDay}" class="_720kb-datepicker-calendar-day">',
+          '<a href="javascript:void(0)" ng-repeat="item in days" ng-click="setDatepickerDay(item);$event.stopPropagation()" ng-class="{\'_720kb-datepicker-active\': selectedDay === item && selectedMonth === monthNumber && selectedYear === year, \'_720kb-datepicker-disabled\': !isSelectableMinDate(year + \'/\' + monthNumber + \'/\' + item ) || !isSelectableMaxDate(year + \'/\' + monthNumber + \'/\' + item) || !isSelectableDate(monthNumber, year, item) || !isSelectableDay(monthNumber, year, item),\'_720kb-datepicker-today\': item === today.getDate() && monthNumber === (today.getMonth() + 1) && year === today.getFullYear()}" class="_720kb-datepicker-calendar-day">',
             '{{item}}',
           '</a>',
           '<a href="javascript:void(0)" ng-repeat="nx in nextMonthDays" class="_720kb-datepicker-calendar-day _720kb-datepicker-disabled">',