Mark current date with orange-ish background

eternicode · eternicode · commit 5e06f4d0a370 · 2012-09-27T14:37:21.000-04:00
diff --git a/build/build.less b/build/build.less
@@ -12,6 +12,7 @@
 @white:                 #fff;
 @linkColor:             #08c;
 @btnPrimaryBackground:  @linkColor;
+@orange:                #f89406;
 
 // Mixins
 
diff --git a/css/datepicker.css b/css/datepicker.css
@@ -79,6 +79,55 @@
   color: #999999;
   cursor: default;
 }
+.datepicker td.today,
+.datepicker td.today:hover,
+.datepicker td.today.disabled,
+.datepicker td.today.disabled:hover {
+  background-color: #fde19a;
+  background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a);
+  background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
+  background-image: -webkit-linear-gradient(top, #fdd49a, #fdf59a);
+  background-image: -o-linear-gradient(top, #fdd49a, #fdf59a);
+  background-image: linear-gradient(top, #fdd49a, #fdf59a);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
+  border-color: #fdf59a #fdf59a #fbed50;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
+}
+.datepicker td.today:hover,
+.datepicker td.today:hover:hover,
+.datepicker td.today.disabled:hover,
+.datepicker td.today.disabled:hover:hover,
+.datepicker td.today:active,
+.datepicker td.today:hover:active,
+.datepicker td.today.disabled:active,
+.datepicker td.today.disabled:hover:active,
+.datepicker td.today.active,
+.datepicker td.today:hover.active,
+.datepicker td.today.disabled.active,
+.datepicker td.today.disabled:hover.active,
+.datepicker td.today.disabled,
+.datepicker td.today:hover.disabled,
+.datepicker td.today.disabled.disabled,
+.datepicker td.today.disabled:hover.disabled,
+.datepicker td.today[disabled],
+.datepicker td.today:hover[disabled],
+.datepicker td.today.disabled[disabled],
+.datepicker td.today.disabled:hover[disabled] {
+  background-color: #fdf59a;
+}
+.datepicker td.today:active,
+.datepicker td.today:hover:active,
+.datepicker td.today.disabled:active,
+.datepicker td.today.disabled:hover:active,
+.datepicker td.today.active,
+.datepicker td.today:hover.active,
+.datepicker td.today.disabled.active,
+.datepicker td.today.disabled:hover.active {
+  background-color: #fbf069 \9;
+}
 .datepicker td.active,
 .datepicker td.active:hover,
 .datepicker td.active.disabled,
@@ -208,10 +257,12 @@
 .datepicker th.switch {
   width: 145px;
 }
-.datepicker thead tr:first-child th {
+.datepicker thead tr:first-child th,
+.datepicker tfoot tr:first-child th {
   cursor: pointer;
 }
-.datepicker thead tr:first-child th:hover {
+.datepicker thead tr:first-child th:hover,
+.datepicker tfoot tr:first-child th:hover {
   background: #eeeeee;
 }
 .input-append.date .add-on i,
diff --git a/js/bootstrap-datepicker.js b/js/bootstrap-datepicker.js
@@ -23,6 +23,10 @@
 	function UTCDate(){
 		return new Date(Date.UTC.apply(Date, arguments));
 	}
+	function UTCToday(){
+		var today = new Date();
+		return UTCDate(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate());
+	}
 
 	// Picker object
 
@@ -235,12 +239,13 @@
 				startMonth = this.startDate !== -Infinity ? this.startDate.getUTCMonth() : -Infinity,
 				endYear = this.endDate !== Infinity ? this.endDate.getUTCFullYear() : Infinity,
 				endMonth = this.endDate !== Infinity ? this.endDate.getUTCMonth() : Infinity,
-				currentDate = this.date.valueOf();
+				currentDate = this.date.valueOf(),
+				today = UTCToday().valueOf();
 			this.picker.find('.datepicker-days thead th:eq(1)')
 						.text(dates[this.language].months[month]+' '+year);
 			this.picker.find('tfoot th.today')
 						.text(dates[this.language].today)
-						.toggle(!!this.todayBtn);
+						.toggle(this.todayBtn);
 			this.updateNavArrows();
 			this.fillMonths();
 			var prevMonth = UTCDate(year, month-1, 28,0,0,0,0),
@@ -262,6 +267,9 @@
 				} else if (prevMonth.getUTCFullYear() > year || (prevMonth.getUTCFullYear() == year && prevMonth.getUTCMonth() > month)) {
 					clsName += ' new';
 				}
+				if (prevMonth.valueOf() == today) {
+					clsName += ' today';
+				}
 				if (prevMonth.valueOf() == currentDate) {
 					clsName += ' active';
 				}
diff --git a/less/datepicker.less b/less/datepicker.less
@@ -72,6 +72,13 @@
 			color: @grayLight;
 			cursor: default;
 		}
+		&.today,
+		&.today:hover,
+		&.today.disabled,
+		&.today.disabled:hover {
+			@todayBackground: lighten(@orange, 30%);
+			.buttonBackground(@todayBackground, spin(@todayBackground, 20));
+		}
 		&.active,
 		&.active:hover,
 		&.active.disabled,
diff --git a/tests/suites/options.js b/tests/suites/options.js
@@ -213,3 +213,27 @@ test('Today Button: "linked" selects today\'s date', function(){
         datesEqual(dp.date, today);
 });
 
+test('Today: today\'s date is highlighted when not active', patch_date(function(Date){
+    Date.now = UTCDate(2012, 2, 15);
+    var input = $('<input />')
+                .appendTo('#qunit-fixture')
+                .val('2012-03-05')
+                .datepicker({
+                    format: 'yyyy-mm-dd'
+                }),
+        dp = input.data('datepicker'),
+        picker = dp.picker,
+        target;
+
+        input.focus();
+        ok(picker.find('.datepicker-days').is(':visible'), 'Days view visible');
+        equal(picker.find('.datepicker-days thead .switch').text(), 'March 2012', 'Title is "March 2012"');
+
+        target = picker.find('.datepicker-days tbody td:contains(15)');
+        ok(target.hasClass('today'), 'Today is marked with "today" class');
+        target = picker.find('.datepicker-days tbody td:contains(14)');
+        ok(!target.hasClass('today'), 'Yesterday is not marked with "today" class');
+        target = picker.find('.datepicker-days tbody td:contains(16)');
+        ok(!target.hasClass('today'), 'Tomorrow is not marked with "today" class');
+}));
+
