feat(DateObject, html, css): Current date has light gray background in week view.

The current date has a light gray background only in the week view. If the current date is selected,

then the .active date highligh overrides the light gray background.

Closes #202, #249

Author: dalelotts

gulpfile.js

@@ -76,6 +76,7 @@ gulp.task('templatecache', function () {
     .pipe(htmlMin({removeComments: true}))
     .pipe(templateCache('datetimepicker.templates.js', {
       base: path.join(__dirname, 'src'),
+      modulesystem: 'IIFE',
       module: 'ui.bootstrap.datetimepicker'
     }))
     .pipe(gulp.dest('src/js'))
@@ -111,7 +112,6 @@ gulp.task('test', ['lint', 'css-lint'], function (done) {
 })
 
 gulp.task('default', ['complexity', 'test'])
-gulp.task('css-build', ['scss', 'css-lint'])
 
 function testConfig (options) {
   var travisDefaultOptions = {

src/css/datetimepicker.css

@@ -413,7 +413,7 @@
         return this.utcDateValue + localOffset
       }
 
-      var validProperties = ['utcDateValue', 'localDateValue', 'display', 'active', 'selectable', 'past', 'future']
+      var validProperties = ['utcDateValue', 'display', 'active', 'selectable', 'past', 'future']
 
       var constructorObject = arguments[0]
 
@@ -422,6 +422,8 @@
       }).forEach(function (key) {
         this[key] = constructorObject[key]
       }, this)
+
+      this.isToday = moment().utc().local().format('YYYY-MM-DD') === moment.utc(this.utcDateValue).format('YYYY-MM-DD')
     }
 
     return directiveDefinition

src/css/datetimepicker.css.map

@@ -25,6 +25,6 @@
 }(this, function (angular) {
   'use strict'
   angular.module('ui.bootstrap.datetimepicker').run(['$templateCache', function ($templateCache) {
-    $templateCache.put('templates/datetimepicker.html', '<div class="datetimepicker table-responsive">\n    <table class="table table-condensed {{ data.currentView }}-view">\n        <thead>\n        <tr>\n            <th class="left" data-ng-click="changeView(data.currentView, data.leftDate, $event)" data-ng-show="data.leftDate.selectable"><i class="glyphicon glyphicon-arrow-left"><span class="sr-only">{{ screenReader.previous }}</span></i>\n            </th>\n            <th class="switch" colspan="5" data-ng-show="data.previousViewDate.selectable" data-ng-click="changeView(data.previousView, data.previousViewDate, $event)">{{ data.previousViewDate.display }}</th>\n            <th class="right" data-ng-click="changeView(data.currentView, data.rightDate, $event)" data-ng-show="data.rightDate.selectable"><i class="glyphicon glyphicon-arrow-right"><span class="sr-only">{{ screenReader.next }}</span></i>\n            </th>\n        </tr>\n        <tr>\n            <th class="dow" data-ng-repeat="day in data.dayNames">{{ day }}</th>\n        </tr>\n        </thead>\n        <tbody>\n        <tr data-ng-if="data.currentView !== \'day\'">\n            <td colspan="7">\n                          <span class="{{ data.currentView }}" data-ng-repeat="dateObject in data.dates" data-ng-class="{active: dateObject.active, past: dateObject.past, future: dateObject.future, disabled: !dateObject.selectable}" data-ng-click="changeView(data.nextView, dateObject, $event)">{{ dateObject.display }}</span></td>\n        </tr>\n        <tr data-ng-if="data.currentView === \'day\'" data-ng-repeat="week in data.weeks">\n            <td data-ng-repeat="dateObject in week.dates" data-ng-click="changeView(data.nextView, dateObject, $event)" class="day" data-ng-class="{active: dateObject.active, past: dateObject.past, future: dateObject.future, disabled: !dateObject.selectable}">{{ dateObject.display }}</td>\n        </tr>\n        </tbody>\n    </table>\n</div>')
+    $templateCache.put('templates/datetimepicker.html', '<div class="datetimepicker table-responsive">\n    <table class="table table-condensed {{ data.currentView }}-view">\n        <thead>\n        <tr>\n            <th class="left" data-ng-click="changeView(data.currentView, data.leftDate, $event)" data-ng-show="data.leftDate.selectable"><i class="glyphicon glyphicon-arrow-left"><span class="sr-only">{{ screenReader.previous }}</span></i>\n            </th>\n            <th class="switch" colspan="5" data-ng-show="data.previousViewDate.selectable" data-ng-click="changeView(data.previousView, data.previousViewDate, $event)" data-ng-class="{today: data.previousViewDate.isToday}">{{ data.previousViewDate.display }}</th>\n            <th class="right" data-ng-click="changeView(data.currentView, data.rightDate, $event)" data-ng-show="data.rightDate.selectable"><i class="glyphicon glyphicon-arrow-right"><span class="sr-only">{{ screenReader.next }}</span></i>\n            </th>\n        </tr>\n        <tr>\n            <th class="dow" data-ng-repeat="day in data.dayNames">{{ day }}</th>\n        </tr>\n        </thead>\n        <tbody>\n        <tr data-ng-if="data.currentView !== \'day\'">\n            <td colspan="7">\n                          <span class="{{ data.currentView }}" data-ng-repeat="dateObject in data.dates" data-ng-class="{active: dateObject.active, past: dateObject.past, future: dateObject.future, disabled: !dateObject.selectable}" data-ng-click="changeView(data.nextView, dateObject, $event)">{{ dateObject.display }}</span></td>\n        </tr>\n        <tr data-ng-if="data.currentView === \'day\'" data-ng-repeat="week in data.weeks">\n            <td data-ng-repeat="dateObject in week.dates" data-ng-click="changeView(data.nextView, dateObject, $event)" class="day" data-ng-class="{today: dateObject.isToday, active: dateObject.active, past: dateObject.past, future: dateObject.future, disabled: !dateObject.selectable}">{{ dateObject.display }}</td>\n        </tr>\n        </tbody>\n    </table>\n</div>\n')
   }])
 }))

src/js/datetimepicker.js

@@ -60,6 +60,13 @@
     text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
   }
 
+  .today,
+  .today:hover,
+  .today.disabled,
+  .today.disabled:hover {
+    background-color: $abdtp-today-border;
+  }
+
   // scss-lint:disable QualifyingElement
   .active:hover,
   .active:hover:hover,

src/js/datetimepicker.templates.js

@@ -1,11 +1,12 @@
-$abdtp-active-color:                #fff !default;
 $abdtp-active-background-color:     #04c !default;
-$abdtp-active-border-top-color:     #04c !default;
 $abdtp-active-border-bottom-color:  #002a80 !default;
+$abdtp-active-border-top-color:     #04c !default;
+$abdtp-active-color:                #fff !default;
 $abdtp-background-color-end:        #04c !default;
 $abdtp-background-color-start:      #08c !default;
 $abdtp-background-color:            #006dcc !default;
 $abdtp-color-disabled:              #ebebeb !default;
 $abdtp-color-hover:                 #eee !default;
 $abdtp-color-past-future:           #999 !default;
+$abdtp-today-border:                #e5e5e5 !default;
 $abdtp-width:                       320px   !default;

src/scss/_core.scss

@@ -6,7 +6,8 @@
                 data-ng-click="changeView(data.currentView, data.leftDate, $event)"
                 data-ng-show="data.leftDate.selectable"><i class="glyphicon glyphicon-arrow-left"><span class="sr-only">{{ screenReader.previous }}</span></i>
             </th>
-            <th class="switch" colspan="5"
+            <th class="switch"
+                colspan="5"
                 data-ng-show="data.previousViewDate.selectable"
                 data-ng-click="changeView(data.previousView, data.previousViewDate, $event)">{{ data.previousViewDate.display }}</th>
             <th class="right" data-ng-click="changeView(data.currentView, data.rightDate, $event)"
@@ -30,7 +31,7 @@
             <td data-ng-repeat="dateObject in week.dates"
                 data-ng-click="changeView(data.nextView, dateObject, $event)"
                 class="day"
-                data-ng-class="{active: dateObject.active, past: dateObject.past, future: dateObject.future, disabled: !dateObject.selectable}">{{ dateObject.display }}</td>
+                data-ng-class="{today: dateObject.isToday, active: dateObject.active, past: dateObject.past, future: dateObject.future, disabled: !dateObject.selectable}">{{ dateObject.display }}</td>
         </tr>
         </tbody>
     </table>

src/scss/_variables.scss

@@ -1,4 +1,4 @@
-/* globals describe, beforeEach, it, expect, module, inject, moment, angular, afterEach, jQuery */
+/* globals describe, beforeEach, it, expect, module, inject, moment, angular, afterEach, jQuery, jasmine */
 
 /**
  * @license angular-bootstrap-datetimepicker
@@ -13,10 +13,19 @@ describe('css styling', function () {
   'use strict'
 
   var element = null
+  var $rootScope
 
   beforeEach(module('ui.bootstrap.datetimepicker'))
-  beforeEach(inject(function ($compile, $rootScope) {
+  beforeEach(inject(function ($compile, _$rootScope_) {
     moment.locale('en')
+    $rootScope = _$rootScope_
+    jasmine.clock().install()
+
+    var baseDate = moment('2013-01-23T00:00:00.000').toDate()
+    jasmine.clock().mockDate(baseDate)
+
+    expect(moment().toDate().getTime()).toEqual(baseDate.getTime())
+
     $rootScope.date = moment('2013-01-22T00:00:00.000').toDate()
     element = $compile('<datetimepicker data-ng-model="date"></datetimepicker>')($rootScope)
     angular.element(document).find('body').append(element)
@@ -57,7 +66,23 @@ describe('css styling', function () {
     })
   })
 
+  describe('of `.today` element', function () {
+    it('should have light grey background when not active', function () {
+      var todayElement = element.find('.today')
+      expect(todayElement.text()).toBe('23')
+      expect(todayElement.css('background-color')).toBe('rgb(229, 229, 229)')
+    })
+    it('should have `.active` background when active', function () {
+      $rootScope.date = moment('2013-01-23T00:00:00.000').toDate()
+      $rootScope.$digest()
+      var todayElement = element.find('.today')
+      expect(todayElement.text()).toBe('23')
+      expect(todayElement.css('background-color')).toBe('rgb(0, 68, 204)')
+    })
+  })
+
   afterEach(function () {
+    jasmine.clock().uninstall()
     angular.element(document).find('body').remove('.datetimepicker')
   })
 })