Added warning class to indicate invalid dates.

Author: g1eb

src/date-input.css

@@ -54,6 +54,13 @@
 .datetime-input.date .display:hover {
   background-color: #ddd;
 }
+.datetime-input.date .display.warning {
+  background-color: rgba(255, 54, 46, 0.75);
+}
+.datetime-input.date .display.warning.active,
+.datetime-input.date .display.warning:hover {
+  background-color: rgba(255, 54, 46, 0.75);
+}
 
 
 /**

src/date-input.html

@@ -1,6 +1,6 @@
 <div class="datetime-input date">
   <div ng-click="toggleEditPopover()"
-    ng-class="{'active': !!selected, 'display': !cssClass, '{{cssClass}}': !!cssClass}">
+    ng-class="{'active': !!selected, 'warning': !!warning, 'display': !cssClass, '{{cssClass}}': !!cssClass}">
     <div class="date" ng-bind="date.format('DD MMMM YYYY')"></div>
     <div ng-if="!date" class="placeholder" ng-bind="placeholder"></div>
   </div>

src/datetime-input.css

@@ -61,6 +61,13 @@
 .datetime-input.datetime .display:hover {
   background-color: #ddd;
 }
+.datetime-input.datetime .display.warning {
+  background-color: rgba(255, 54, 46, 0.75);
+}
+.datetime-input.datetime .display.warning.active,
+.datetime-input.datetime .display.warning:hover {
+  background-color: rgba(255, 54, 46, 0.75);
+}
 
 
 /**

src/datetime-input.html

@@ -1,6 +1,6 @@
 <div class="datetime-input datetime">
   <div ng-click="toggleEditPopover()"
-    ng-class="{'active': !!selected, 'display': !cssClass, '{{cssClass}}': !!cssClass}">
+    ng-class="{'active': !!selected, 'warning': !!warning, 'display': !cssClass, '{{cssClass}}': !!cssClass}">
     <div class="date" ng-bind="datetime.format('DD MMMM YYYY')"></div>
     <div class="time" ng-bind="datetime.format('HH : mm : ss')"></div>
     <div ng-if="!datetime" class="placeholder" ng-bind="placeholder"></div>

src/time-input.css

@@ -62,6 +62,13 @@
 .datetime-input.time .display:hover {
   background-color: #ddd;
 }
+.datetime-input.time .display.warning {
+  background-color: rgba(255, 54, 46, 0.75);
+}
+.datetime-input.time .display.warning.active,
+.datetime-input.time .display.warning:hover {
+  background-color: rgba(255, 54, 46, 0.75);
+}
 
 
 /**

src/time-input.html

@@ -1,6 +1,6 @@
 <div class="datetime-input time">
   <div ng-click="toggleEditPopover()"
-    ng-class="{'active': !!selected, 'display': !cssClass, '{{cssClass}}': !!cssClass}">
+    ng-class="{'active': !!selected, 'warning': !!warning, 'display': !cssClass, '{{cssClass}}': !!cssClass}">
     <div class="time" ng-bind="time.format('HH : mm : ss')"></div>
     <div ng-if="!time" class="placeholder" ng-bind="placeholder"></div>
   </div>