Skip to content

Commit 81a1d5f

Browse files
dalelottsdalelotts
committed
feat(ui, templates): The current date/time is now highlighted for all 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.
1 parent a103064 commit 81a1d5f

File tree

8 files changed

+56
-41
lines changed

8 files changed

+56
-41
lines changed

‎src/css/datetimepicker.css

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/css/datetimepicker.css.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/js/datetimepicker.js

Lines changed: 39 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,9 @@
129129
var startDecade = (parseInt(selectedDate.year() / 10, 10) * 10)
130130
var startDate = moment.utc(startOfDecade(milliseconds)).subtract(1, 'year').startOf('year')
131131

132-
var activeYear = formatValue(ngModelController.$modelValue, 'YYYY')
132+
var yearFormat = 'YYYY'
133+
var activeFormat = formatValue(ngModelController.$modelValue, yearFormat)
134+
var currentFormat = moment().format(yearFormat)
133135

134136
var result = {
135137
'currentView': 'year',
@@ -146,11 +148,12 @@
146148
for (var i = 0; i < 12; i += 1) {
147149
var yearMoment = moment.utc(startDate).add(i, 'years')
148150
var dateValue = {
149-
'utcDateValue': yearMoment.valueOf(),
150-
'display': yearMoment.format('YYYY'),
151-
'past': yearMoment.year() < startDecade,
151+
'active': yearMoment.format(yearFormat) === activeFormat,
152+
'current': yearMoment.format(yearFormat) === currentFormat,
153+
'display': yearMoment.format(yearFormat),
152154
'future': yearMoment.year() > startDecade + 9,
153-
'active': yearMoment.format('YYYY') === activeYear
155+
'past': yearMoment.year() < startDecade,
156+
'utcDateValue': yearMoment.valueOf()
154157
}
155158

156159
result.dates.push(new DateObject(dateValue))
@@ -162,7 +165,10 @@
162165
function monthModelFactory (milliseconds) {
163166
var startDate = moment.utc(milliseconds).startOf('year')
164167
var previousViewDate = startOfDecade(milliseconds)
165-
var activeDate = formatValue(ngModelController.$modelValue, 'YYYY-MMM')
168+
169+
var monthFormat = 'YYYY-MMM'
170+
var activeFormat = formatValue(ngModelController.$modelValue, monthFormat)
171+
var currentFormat = moment().format(monthFormat)
166172

167173
var result = {
168174
'previousView': 'year',
@@ -180,9 +186,10 @@
180186
for (var i = 0; i < 12; i += 1) {
181187
var monthMoment = moment.utc(startDate).add(i, 'months')
182188
var dateValue = {
183-
'utcDateValue': monthMoment.valueOf(),
189+
'active': monthMoment.format(monthFormat) === activeFormat,
190+
'current': monthMoment.format(monthFormat) === currentFormat,
184191
'display': monthMoment.format('MMM'),
185-
'active': monthMoment.format('YYYY-MMM') === activeDate
192+
'utcDateValue': monthMoment.valueOf()
186193
}
187194

188195
result.dates.push(new DateObject(dateValue))
@@ -199,7 +206,9 @@
199206

200207
var startDate = moment.utc(startOfMonth).subtract(Math.abs(startOfMonth.weekday()), 'days')
201208

202-
var activeDate = formatValue(ngModelController.$modelValue, 'YYYY-MMM-DD')
209+
var dayFormat = 'YYYY-MMM-DD'
210+
var activeFormat = formatValue(ngModelController.$modelValue, dayFormat)
211+
var currentFormat = moment().format(dayFormat)
203212

204213
var result = {
205214
'previousView': 'month',
@@ -222,13 +231,14 @@
222231
for (var i = 0; i < 6; i += 1) {
223232
var week = {dates: []}
224233
for (var j = 0; j < 7; j += 1) {
225-
var monthMoment = moment.utc(startDate).add((i * 7) + j, 'days')
234+
var dayMoment = moment.utc(startDate).add((i * 7) + j, 'days')
226235
var dateValue = {
227-
'utcDateValue': monthMoment.valueOf(),
228-
'display': monthMoment.format('D'),
229-
'active': monthMoment.format('YYYY-MMM-DD') === activeDate,
230-
'past': monthMoment.isBefore(startOfMonth),
231-
'future': monthMoment.isAfter(endOfMonth)
236+
'active': dayMoment.format(dayFormat) === activeFormat,
237+
'current': dayMoment.format(dayFormat) === currentFormat,
238+
'display': dayMoment.format('D'),
239+
'future': dayMoment.isAfter(endOfMonth),
240+
'past': dayMoment.isBefore(startOfMonth),
241+
'utcDateValue': dayMoment.valueOf()
232242
}
233243
week.dates.push(new DateObject(dateValue))
234244
}
@@ -242,7 +252,9 @@
242252
var selectedDate = moment.utc(milliseconds).startOf('day')
243253
var previousViewDate = moment.utc(selectedDate).startOf('month')
244254

245-
var activeFormat = formatValue(ngModelController.$modelValue, 'YYYY-MM-DD H')
255+
var hourFormat = 'YYYY-MM-DD H'
256+
var activeFormat = formatValue(ngModelController.$modelValue, hourFormat)
257+
var currentFormat = moment().format(hourFormat)
246258

247259
var result = {
248260
'previousView': 'day',
@@ -260,9 +272,10 @@
260272
for (var i = 0; i < 24; i += 1) {
261273
var hourMoment = moment.utc(selectedDate).add(i, 'hours')
262274
var dateValue = {
263-
'utcDateValue': hourMoment.valueOf(),
275+
'active': hourMoment.format(hourFormat) === activeFormat,
276+
'current': hourMoment.format(hourFormat) === currentFormat,
264277
'display': hourMoment.format('LT'),
265-
'active': hourMoment.format('YYYY-MM-DD H') === activeFormat
278+
'utcDateValue': hourMoment.valueOf()
266279
}
267280

268281
result.dates.push(new DateObject(dateValue))
@@ -274,7 +287,10 @@
274287
function minuteModelFactory (milliseconds) {
275288
var selectedDate = moment.utc(milliseconds).startOf('hour')
276289
var previousViewDate = moment.utc(selectedDate).startOf('day')
277-
var activeFormat = formatValue(ngModelController.$modelValue, 'YYYY-MM-DD H:mm')
290+
291+
var minuteFormat = 'YYYY-MM-DD H:mm'
292+
var activeFormat = formatValue(ngModelController.$modelValue, minuteFormat)
293+
var currentFormat = moment().format(minuteFormat)
278294

279295
var result = {
280296
'previousView': 'hour',
@@ -294,9 +310,10 @@
294310
for (var i = 0; i < limit; i += 1) {
295311
var hourMoment = moment.utc(selectedDate).add(i * configuration.minuteStep, 'minute')
296312
var dateValue = {
297-
'utcDateValue': hourMoment.valueOf(),
313+
'active': hourMoment.format(minuteFormat) === activeFormat,
314+
'current': hourMoment.format(minuteFormat) === currentFormat,
298315
'display': hourMoment.format('LT'),
299-
'active': hourMoment.format('YYYY-MM-DD H:mm') === activeFormat
316+
'utcDateValue': hourMoment.valueOf()
300317
}
301318

302319
result.dates.push(new DateObject(dateValue))
@@ -413,7 +430,7 @@
413430
return this.utcDateValue + localOffset
414431
}
415432

416-
var validProperties = ['utcDateValue', 'display', 'active', 'selectable', 'past', 'future']
433+
var validProperties = ['active', 'current', 'display', 'future', 'past', 'selectable', 'utcDateValue']
417434

418435
var constructorObject = arguments[0]
419436

@@ -422,8 +439,6 @@
422439
}).forEach(function (key) {
423440
this[key] = constructorObject[key]
424441
}, this)
425-
426-
this.isToday = moment().utc().local().format('YYYY-MM-DD') === moment.utc(this.utcDateValue).format('YYYY-MM-DD')
427442
}
428443

429444
return directiveDefinition

‎src/js/datetimepicker.templates.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,6 @@
2525
}(this, function (angular) {
2626
'use strict'
2727
angular.module('ui.bootstrap.datetimepicker').run(['$templateCache', function ($templateCache) {
28-
$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')
28+
$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')
2929
}])
3030
}))

‎src/scss/_core.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -60,11 +60,11 @@
6060
text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
6161
}
6262

63-
.today,
64-
.today:hover,
65-
.today.disabled,
66-
.today.disabled:hover {
67-
background-color: $abdtp-today-border;
63+
.current,
64+
.current:hover,
65+
.current.disabled,
66+
.current.disabled:hover {
67+
background-color: $abdtp-current-background-color;
6868
}
6969

7070
// scss-lint:disable QualifyingElement

‎src/scss/_variables.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,5 @@ $abdtp-background-color: #006dcc !default;
88
$abdtp-color-disabled: #ebebeb !default;
99
$abdtp-color-hover: #eee !default;
1010
$abdtp-color-past-future: #999 !default;
11-
$abdtp-today-border: #e5e5e5 !default;
11+
$abdtp-current-background-color: #e5e5e5 !default;
1212
$abdtp-width: 320px !default;

0 commit comments

Comments
 (0)