Add close button to the datetime input directive

Author: g1eb

src/datetime-input.css

@@ -369,3 +369,44 @@
 .datetime-input.datetime .clear-button:hover::before {
   background: #ddd;
 }
+
+
+/**
+ * Close button
+ */
+.datetime-input.datetime .close-button {
+  position: absolute;
+  z-index: 5;
+  left: -1px;
+  cursor: pointer;
+  outline: none;
+  border-top: 1px solid #aaa;
+  border-left: 1px solid #aaa;
+  border-bottom: 1px solid #aaa;
+  color: #777;
+  width: 25%;
+  height: auto;
+  margin-top: 10px;
+  font-size: 1.5em;
+  line-height: 2em;
+  box-sizing: border-box;
+  background-color: #efefef;
+  transition: background-color 0.25s ease-out;
+}
+.datetime-input.datetime .close-button::before {
+  content: "";
+  position: absolute;
+  right: -0.5em;
+  top: -1px;
+  width: 1em;
+  height: 2em;
+  background: #efefef;
+  border-top: 1px solid #aaa;
+  border-right: 1px solid #aaa;
+  transition: background 0.25s ease-out;
+  transform: skewX(-26deg);
+}
+.datetime-input.datetime .close-button:hover,
+.datetime-input.datetime .close-button:hover::before {
+  background: #ddd;
+}

src/datetime-input.html

@@ -64,5 +64,8 @@
     <div class="clear-button" ng-if="!!datetime">
       <div ng-click="update()" ng-bind="clearText || 'Clear'"></div>
     </div>
+    <div class="close-button">
+      <div ng-click="close()">Close</div>
+    </div>
   </div>
 </div>

src/datetime-input.js

@@ -18,6 +18,7 @@ directive('datetimeInput', ['$document', '$timeout', function ($document, $timeo
       minuteStep:'=?',
       secondStep:'=?',
       onChange: '&',
+      onClose: '&?',
       placeholder: '@',
       clearText: '@',
       cssClass:'@',
@@ -75,6 +76,10 @@ directive('datetimeInput', ['$document', '$timeout', function ($document, $timeo
           scope.close = function () {
             scope.selected = '';
             scope.calendar_active = false;
+
+            if ( !!scope.onClose ) {
+              scope.onClose();
+            }
           }
 
           // Bind click events outside directive to close edit popover