V8: UI datepicker style update

src/Umbraco.Web.UI.Client/src/less/property-editors.less

@@ -884,6 +884,23 @@
 .bootstrap-datetimepicker-widget .btn{padding: 0;}
 .bootstrap-datetimepicker-widget .picker-switch .btn{ background: none; border: none;}
 .umb-datepicker .input-append .add-on{cursor: pointer;}
+.umb-datepicker .input-append .on-top {
+    position: absolute;
+    margin-left: -31px;
+    margin-top: 1px;
+    display: inline-block;
+    height: 22px;
+    padding: 5px 6px 3px 6px;
+    font-size: @baseFontSize;
+    font-weight: normal;
+    line-height: @baseLineHeight;
+    text-align: center;
+    background-color: @white;
+    color: @ui-option-type;
+    &:hover {
+        color: @ui-option-type-hover;
+    }
+}
 .umb-datepicker p {margin-top:10px;}
 .umb-datepicker p a{color: @gray-3;}
 

src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.html

@@ -13,12 +13,15 @@
                 <div class="input-append">
                     <input
                         name="datepicker"
-                        id="{{model.alias}}" 
-                        type="text" 
+                        id="{{model.alias}}"
+                        type="text"
                         ng-model="model.datetimePickerValue"
                         ng-required="model.validation.mandatory"
-                        val-server="value" 
+                        val-server="value"
                         class="datepickerinput">
+                    <span class="on-top" ng-click="clearDate()" ng-show="hasDatetimePickerValue === true || datePickerForm.datepicker.$error.pickerError === true">
+                        <i class="icon-delete"></i>
+                    </span>
                     <span class="add-on">
                         <i class="icon-calendar"></i>
                     </span>
@@ -38,9 +41,6 @@
             <small><localize key="content_scheduledPublishServerTime">This translates to the following time on the server:</localize> {{serverTime}}</small><br />
             <small><localize key="content_scheduledPublishDocumentation">What does this mean?</localize></small>
         </p>
-        <p ng-show="hasDatetimePickerValue === true || datePickerForm.datepicker.$error.pickerError === true">
-            <a href ng-click="clearDate()"><i class="icon-delete"></i><small><localize key="content_removeDate">Clear date</localize></small></a>
-        </p>
 
     </ng-form>
 </div>