[Frontend] Time Controller Markup and Styling

open #1515
open #117
Significant new vals added to constants files
for datetime picker/calendar;
Styling for calendar, hover and selected states;
Modded DateTimePickerController.js and markup
to allow selection of out-of-month cells;

platform/commonUI/general/res/sass/_global.scss

@@ -40,11 +40,11 @@
 
 /************************** HTML ENTITIES */
 a {
-	color: #ccc;
+	color: $colorA;
 	cursor: pointer;
 	text-decoration: none;
 	&:hover {
-		color: #fff;
+		color: $colorAHov;
 	}
 }
 

platform/commonUI/general/res/sass/controls/_controls.scss

@@ -352,7 +352,10 @@ label.checkbox.custom {
 /******************************************************** DATETIME PICKER */
 .l-datetime-picker {
 	$r1H: 15px;
+	@include user-select(none);
+	font-size: 0.8rem;
 	padding: $interiorMarginLg !important;
+	width: 230px;
 	.l-month-year-pager {
 		$pagerW: 20px;
 		//@include test();
@@ -390,6 +393,57 @@ label.checkbox.custom {
 	}
 }
 
+/******************************************************** CALENDAR */
+.l-calendar {
+	$colorMuted: pushBack($colorMenuFg, 30%);
+	ul.l-cal-row {
+		@include display-flex;
+		@include flex-flow(row nowrap);
+		margin-top: 1px;
+		&:first-child {
+			margin-top: 0;
+		}
+		li {
+			@include flex(1 0);
+			//@include test();
+			margin-left: 1px;
+			padding: $interiorMargin;
+			text-align: center;
+			&:first-child {
+				margin-left: 0;
+			}
+		}
+		&.l-header li {
+			color: $colorMuted;
+		}
+		&.l-body li {
+			@include trans-prop-nice(background-color, .25s);
+			cursor: pointer;
+			&.in-month {
+				background-color: $colorCalCellInMonthBg;
+			}
+			.sub {
+				color: $colorMuted;
+				font-size: 0.8em;
+			}
+			&.selected {
+				background: $colorCalCellSelectedBg;
+				color: $colorCalCellSelectedFg;
+				.sub {
+					color: inherit;
+				}
+			}
+			&:hover {
+				background-color: $colorCalCellHovBg;
+				color: $colorCalCellHovFg;
+				.sub {
+					color: inherit;
+				}
+			}
+		}
+	}
+}
+
 /******************************************************** BROWSER ELEMENTS */
 
 @include desktop {

platform/commonUI/general/res/templates/controls/datetime-picker.html

@@ -28,7 +28,20 @@
 			<a class="pager next" ng-click="changeMonth(1)"></a>
 		</div>
 		<div class="l-calendar">
-			<table>
+			<ul class="l-cal-row l-header">
+				<li ng-repeat="day in ['Su','Mo','Tu','We','Th','Fr','Sa']">{{day}}</li>
+			</ul>
+			<ul class="l-cal-row l-body" ng-repeat="row in table">
+				<li ng-repeat="cell in row"
+					ng-click="select(cell)"
+					ng-class='{ "in-month": isInCurrentMonth(cell), selected: isSelected(cell) }'>
+					<div class="prime">{{cell.day}}</div>
+					<div class="sub">{{cell.dayOfYear}}</div>
+				</li>
+			</ul>
+
+
+			<!--<table>
 				<tr>
 					<th ng-repeat="day in ['Su','Mo','Tu','We','Th','Fr','Sa']">
 						{{day}}
@@ -38,15 +51,12 @@
 					<td style="text-align: center;"
 					    ng-repeat="cell in row"
 					    ng-click="select(cell)"
-					    ng-class='{
-	                                  disabled: !isSelectable(cell),
-	                                  test: isSelected(cell)
-	                                  }'>
+					    ng-class='{ disabled: !isSelectable(cell), selected: isSelected(cell) }'>
 						<div>{{cell.day}}</div>
 						<div style="font-size: 80%">{{cell.dayOfYear}}</div>
 					</td>
 				</tr>
-			</table>
+			</table>-->
 		</div>
 	</div>
 	<div class="l-time-selects"

platform/commonUI/general/src/controllers/DateTimePickerController.js

@@ -138,9 +138,9 @@ define(
                 $scope.ngModel[$scope.field] = m.valueOf();
             }
 
-            $scope.isSelectable = function (cell) {
-                return cell.month === month;
-            };
+            $scope.isInCurrentMonth = function (cell) {
+			  	return cell.month === month;
+			}
 
             $scope.isSelected = function (cell) {
                 var date = $scope.date || {};