add clock icon, add visual separation between dates and time

dist/css/datepicker.css

@@ -392,19 +392,21 @@
     Timepicker
    ------------------------------------------------- */
 .datepicker--time {
+  border-top: 1px solid #efefef;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  padding: 0 4px 4px;
+  padding: 4px;
   position: relative; }
 
 .datepicker--time-sliders {
   -webkit-flex: 0 1 138px;
       -ms-flex: 0 1 138px;
           flex: 0 1 138px;
+  margin-right: 10px;
   -webkit-order: 2;
       -ms-flex-order: 2;
           order: 2; }
@@ -420,14 +422,12 @@
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  -webkit-justify-content: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  font-size: 16px;
   -webkit-flex: 1;
       -ms-flex: 1;
           flex: 1;
-  text-align: center; }
+  font-size: 16px;
+  text-align: center;
+  margin: 0 0 0 10px; }
   .datepicker--time-current input[type='text'] {
     box-sizing: content-box;
     border: none;
@@ -438,10 +438,9 @@
     font-size: 16px;
     width: 18px;
     height: 23px; }
-  .datepicker--time-current > {
+  .datepicker--time-current span {
-    -webkit-flex: 1;
+    line-height: 1;
-        -ms-flex: 1;
+    margin: 0 -2px; }
-            flex: 1; }
 
 .datepicker--time-row {
   display: -webkit-flex;
@@ -505,16 +504,20 @@
       cursor: pointer;
       transition: background .2s; }
     .datepicker--time-row input[type='range']::-webkit-slider-runnable-track {
+      border: none;
       height: 1px;
       cursor: pointer;
+      color: transparent;
       background: transparent; }
     .datepicker--time-row input[type='range']::-moz-range-track {
+      border: none;
       height: 1px;
       cursor: pointer;
+      color: transparent;
       background: transparent; }
     .datepicker--time-row input[type='range']::-ms-track {
       border: none;
-      height: 12px;
+      height: 1px;
       cursor: pointer;
       color: transparent;
       background: transparent; }
@@ -525,6 +528,32 @@
   .datepicker--time-row span {
     padding: 0 12px; }
 
+.datepicker--time-icon {
+  color: #777;
+  border: 1px solid;
+  border-radius: 50%;
+  font-size: 16px;
+  position: relative;
+  margin: 0 5px -1px 0;
+  width: 1em;
+  height: 1em; }
+  .datepicker--time-icon:after, .datepicker--time-icon:before {
+    content: '';
+    background: currentColor;
+    position: absolute; }
+  .datepicker--time-icon:after {
+    height: .4em;
+    width: 1px;
+    left: calc(50% - 1px);
+    top: calc(50% + 1px);
+    -webkit-transform: translateY(-100%);
+            transform: translateY(-100%); }
+  .datepicker--time-icon:before {
+    width: .4em;
+    height: 1px;
+    top: calc(50% + 1px);
+    left: calc(50% - 1px); }
+
 .datepicker--cell-day.-other-month-, .datepicker--cell-year.-other-decade- {
   color: #dedede; }
   .datepicker--cell-day.-other-month-:hover, .datepicker--cell-year.-other-decade-:hover {

dist/js/datepicker.js

@@ -1742,9 +1742,11 @@ var Datepicker;
         '   </div>' +
         '</div>' +
         '<div class="datepicker--time-current">' +
+        '   <i class="datepicker--time-icon"></i>' +
         '   <input type="text" value="#{hourValue}" placeholder="#{hourValue}" data-field="hours" name="hours-current" maxlength="2" data-max="#{hourMax}" data-action="next"/>' +
         '   <span>:</span>' +
-        '   <input type="text" value="#{minValue}" placeholder="#{minValue}" data-field="minutes" name="minutes-current" maxlength="2" data-max="59" data-action="prev"/></div>' +
+        '   <input type="text" value="#{minValue}" placeholder="#{minValue}" data-field="minutes" name="minutes-current" maxlength="2" data-max="59" data-action="prev"/>' +
+        '</div>' +
         '</div>',
         inputTimeout = 10;
 

src/js/timepicker.js

@@ -11,9 +11,11 @@
         '   </div>' +
         '</div>' +
         '<div class="datepicker--time-current">' +
+        '   <i class="datepicker--time-icon"></i>' +
         '   <input type="text" value="#{hourValue}" placeholder="#{hourValue}" data-field="hours" name="hours-current" maxlength="2" data-max="#{hourMax}" data-action="next"/>' +
         '   <span>:</span>' +
-        '   <input type="text" value="#{minValue}" placeholder="#{minValue}" data-field="minutes" name="minutes-current" maxlength="2" data-max="59" data-action="prev"/></div>' +
+        '   <input type="text" value="#{minValue}" placeholder="#{minValue}" data-field="minutes" name="minutes-current" maxlength="2" data-max="59" data-action="prev"/>' +
+        '</div>' +
         '</div>',
         inputTimeout = 10;
 

src/sass/timepicker.scss

@@ -22,16 +22,26 @@ $rangeThumbBg: #dedede;
   transition: background .2s;
 }
 
+@mixin track {
+  border: none;
+  height: $rangeTrackHeight;
+  cursor: pointer;
+  color: transparent;
+  background: transparent;
+}
+
 .datepicker--time {
+  border-top: 1px solid map_get($borderColor, nav);
   display: flex;
   align-items: center;
 
-  padding: 0 $datepickerPadding $datepickerPadding;
+  padding: $datepickerPadding;
   position: relative;
 }
 
 .datepicker--time-sliders {
   flex: 0 1 138px;
+  margin-right: 10px;
   order: 2;
 }
 
@@ -43,10 +53,10 @@ $rangeThumbBg: #dedede;
 .datepicker--time-current {
   display: flex;
   align-items: center;
-  justify-content: center;
-  font-size: 16px;
   flex: 1;
+  font-size: 16px;
   text-align: center;
+  margin: 0 0 0 10px;
 
   input[type='text'] {
     box-sizing: content-box;
@@ -60,8 +70,9 @@ $rangeThumbBg: #dedede;
     height: 23px;
   }
 
-  > {
+  span {
-    flex: 1;
+    line-height: 1;
+    margin: 0 -2px;
   }
 }
 
@@ -122,23 +133,15 @@ $rangeThumbBg: #dedede;
     //  Track
     // -------------------------------------------------
     &::-webkit-slider-runnable-track {
-      height: $rangeTrackHeight;
+      @include track;
-      cursor: pointer;
-      background: transparent;
     }
 
     &::-moz-range-track {
-      height: $rangeTrackHeight;
+      @include track;
-      cursor: pointer;
-      background: transparent;
     }
 
     &::-ms-track {
-      border: none;
+      @include track;
-      height: $rangeThumbSize;
-      cursor: pointer;
-      color: transparent;
-      background: transparent;
     }
 
     &::-ms-fill-lower {
@@ -158,3 +161,35 @@ $rangeThumbBg: #dedede;
     padding: 0 12px;
   }
 }
+
+.datepicker--time-icon {
+  color: #777;
+  border: 1px solid;
+  border-radius: 50%;
+  font-size: 16px;
+  position: relative;
+  margin: 0 5px -1px 0;
+  width: 1em;
+  height: 1em;
+
+  &:after, &:before {
+    content: '';
+    background: currentColor;
+    position: absolute;
+  }
+
+  &:after {
+    height: .4em;
+    width: 1px;
+    left: calc(50% - 1px);
+    top: calc(50% + 1px);
+    transform: translateY(-100%);
+  }
+
+  &:before {
+    width: .4em;
+    height: 1px;
+    top: calc(50% + 1px);
+    left: calc(50% - 1px);
+  }
+}