feat(ui, templates): The current date/time is now highlighted for a…

…ll views. Each view will now highligh the `current` value for the view. What is `current` is determined at the time the view is rendeered. If the date or time value changes after the view is rendered, the `current` highlighted element does NOT change.
dalelotts · Sep 12, 2016 · 81a1d5f · 81a1d5f
1 parent a103064
commit 81a1d5f
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 41 deletions.
diff --git a/src/css/datetimepicker.css b/src/css/datetimepicker.css
diff --git a/src/css/datetimepicker.css.map b/src/css/datetimepicker.css.map
diff --git a/src/js/datetimepicker.js b/src/js/datetimepicker.js
@@ -129,7 +129,9 @@
         var startDecade = (parseInt(selectedDate.year() / 10, 10) * 10)
         var startDate = moment.utc(startOfDecade(milliseconds)).subtract(1, 'year').startOf('year')
 
-        var activeYear = formatValue(ngModelController.$modelValue, 'YYYY')
+        var yearFormat = 'YYYY'
+        var activeFormat = formatValue(ngModelController.$modelValue, yearFormat)
+        var currentFormat = moment().format(yearFormat)
 
         var result = {
           'currentView': 'year',
@@ -146,11 +148,12 @@
         for (var i = 0; i < 12; i += 1) {
           var yearMoment = moment.utc(startDate).add(i, 'years')
           var dateValue = {
-            'utcDateValue': yearMoment.valueOf(),
-            'display': yearMoment.format('YYYY'),
-            'past': yearMoment.year() < startDecade,
+            'active': yearMoment.format(yearFormat) === activeFormat,
+            'current': yearMoment.format(yearFormat) === currentFormat,
+            'display': yearMoment.format(yearFormat),
             'future': yearMoment.year() > startDecade + 9,
-            'active': yearMoment.format('YYYY') === activeYear
+            'past': yearMoment.year() < startDecade,
+            'utcDateValue': yearMoment.valueOf()
           }
 
           result.dates.push(new DateObject(dateValue))
@@ -162,7 +165,10 @@
       function monthModelFactory (milliseconds) {
         var startDate = moment.utc(milliseconds).startOf('year')
         var previousViewDate = startOfDecade(milliseconds)
-        var activeDate = formatValue(ngModelController.$modelValue, 'YYYY-MMM')
+
+        var monthFormat = 'YYYY-MMM'
+        var activeFormat = formatValue(ngModelController.$modelValue, monthFormat)
+        var currentFormat = moment().format(monthFormat)
 
         var result = {
           'previousView': 'year',
@@ -180,9 +186,10 @@
         for (var i = 0; i < 12; i += 1) {
           var monthMoment = moment.utc(startDate).add(i, 'months')
           var dateValue = {
-            'utcDateValue': monthMoment.valueOf(),
+            'active': monthMoment.format(monthFormat) === activeFormat,
+            'current': monthMoment.format(monthFormat) === currentFormat,
             'display': monthMoment.format('MMM'),
-            'active': monthMoment.format('YYYY-MMM') === activeDate
+            'utcDateValue': monthMoment.valueOf()
           }
 
           result.dates.push(new DateObject(dateValue))
@@ -199,7 +206,9 @@
 
         var startDate = moment.utc(startOfMonth).subtract(Math.abs(startOfMonth.weekday()), 'days')
 
-        var activeDate = formatValue(ngModelController.$modelValue, 'YYYY-MMM-DD')
+        var dayFormat = 'YYYY-MMM-DD'
+        var activeFormat = formatValue(ngModelController.$modelValue, dayFormat)
+        var currentFormat = moment().format(dayFormat)
 
         var result = {
           'previousView': 'month',
@@ -222,13 +231,14 @@
         for (var i = 0; i < 6; i += 1) {
           var week = {dates: []}
           for (var j = 0; j < 7; j += 1) {
-            var monthMoment = moment.utc(startDate).add((i * 7) + j, 'days')
+            var dayMoment = moment.utc(startDate).add((i * 7) + j, 'days')
             var dateValue = {
-              'utcDateValue': monthMoment.valueOf(),
-              'display': monthMoment.format('D'),
-              'active': monthMoment.format('YYYY-MMM-DD') === activeDate,
-              'past': monthMoment.isBefore(startOfMonth),
-              'future': monthMoment.isAfter(endOfMonth)
+              'active': dayMoment.format(dayFormat) === activeFormat,
+              'current': dayMoment.format(dayFormat) === currentFormat,
+              'display': dayMoment.format('D'),
+              'future': dayMoment.isAfter(endOfMonth),
+              'past': dayMoment.isBefore(startOfMonth),
+              'utcDateValue': dayMoment.valueOf()
             }
             week.dates.push(new DateObject(dateValue))
           }
@@ -242,7 +252,9 @@
         var selectedDate = moment.utc(milliseconds).startOf('day')
         var previousViewDate = moment.utc(selectedDate).startOf('month')
 
-        var activeFormat = formatValue(ngModelController.$modelValue, 'YYYY-MM-DD H')
+        var hourFormat = 'YYYY-MM-DD H'
+        var activeFormat = formatValue(ngModelController.$modelValue, hourFormat)
+        var currentFormat = moment().format(hourFormat)
 
         var result = {
           'previousView': 'day',
@@ -260,9 +272,10 @@
         for (var i = 0; i < 24; i += 1) {
           var hourMoment = moment.utc(selectedDate).add(i, 'hours')
           var dateValue = {
-            'utcDateValue': hourMoment.valueOf(),
+            'active': hourMoment.format(hourFormat) === activeFormat,
+            'current': hourMoment.format(hourFormat) === currentFormat,
             'display': hourMoment.format('LT'),
-            'active': hourMoment.format('YYYY-MM-DD H') === activeFormat
+            'utcDateValue': hourMoment.valueOf()
           }
 
           result.dates.push(new DateObject(dateValue))
@@ -274,7 +287,10 @@
       function minuteModelFactory (milliseconds) {
         var selectedDate = moment.utc(milliseconds).startOf('hour')
         var previousViewDate = moment.utc(selectedDate).startOf('day')
-        var activeFormat = formatValue(ngModelController.$modelValue, 'YYYY-MM-DD H:mm')
+
+        var minuteFormat = 'YYYY-MM-DD H:mm'
+        var activeFormat = formatValue(ngModelController.$modelValue, minuteFormat)
+        var currentFormat = moment().format(minuteFormat)
 
         var result = {
           'previousView': 'hour',
@@ -294,9 +310,10 @@
         for (var i = 0; i < limit; i += 1) {
           var hourMoment = moment.utc(selectedDate).add(i * configuration.minuteStep, 'minute')
           var dateValue = {
-            'utcDateValue': hourMoment.valueOf(),
+            'active': hourMoment.format(minuteFormat) === activeFormat,
+            'current': hourMoment.format(minuteFormat) === currentFormat,
             'display': hourMoment.format('LT'),
-            'active': hourMoment.format('YYYY-MM-DD H:mm') === activeFormat
+            'utcDateValue': hourMoment.valueOf()
           }
 
           result.dates.push(new DateObject(dateValue))
@@ -413,7 +430,7 @@
         return this.utcDateValue + localOffset
       }
 
-      var validProperties = ['utcDateValue', 'display', 'active', 'selectable', 'past', 'future']
+      var validProperties = ['active', 'current', 'display', 'future', 'past', 'selectable', 'utcDateValue']
 
       var constructorObject = arguments[0]
 
@@ -422,8 +439,6 @@
       }).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

diff --git a/src/js/datetimepicker.templates.js b/src/js/datetimepicker.templates.js
@@ -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-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')
+    $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="{current: dateObject.current, 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="{current: dateObject.current, active: dateObject.active, past: dateObject.past, future: dateObject.future, disabled: !dateObject.selectable}">{{ dateObject.display }}</td>\n        </tr>\n        </tbody>\n    </table>\n</div>\n')
   }])
 }))
diff --git a/src/scss/_core.scss b/src/scss/_core.scss
@@ -60,11 +60,11 @@
     text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
   }
 
-  .today,
-  .today:hover,
-  .today.disabled,
-  .today.disabled:hover {
-    background-color: $abdtp-today-border;
+  .current,
+  .current:hover,
+  .current.disabled,
+  .current.disabled:hover {
+    background-color: $abdtp-current-background-color;
   }
 
   // scss-lint:disable QualifyingElement

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
@@ -8,5 +8,5 @@ $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-current-background-color:    #e5e5e5 !default;
 $abdtp-width:                       320px   !default;