Ensure datepicker input is cleared (#15338)

src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js

@@ -1,5 +1,10 @@
 function dateTimePickerController($scope, angularHelper, dateHelper, validationMessageService) {
 
+  const vm = this;
+
+  vm.clearDatePicker = clearDatePicker;
+  vm.inputChanged = inputChanged;
+
   let flatPickr = null;
 
   function onInit() {
@@ -71,10 +76,19 @@ function dateTimePickerController($scope, angularHelper, dateHelper, validationM
     });
   }
 
+  function clearDatePicker(event) {
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    $scope.clearDate();
+  }
+
   $scope.clearDate = function () {
     $scope.hasDatetimePickerValue = false;
     if ($scope.model) {
       $scope.model.datetimePickerValue = null;
+      $scope.model.datetimePickerInputValue = null;
       $scope.model.value = null;
     }
     if ($scope.datePickerForm && $scope.datePickerForm.datepicker) {
@@ -92,7 +106,7 @@ function dateTimePickerController($scope, angularHelper, dateHelper, validationM
     setDatePickerVal();
   };
 
-  $scope.inputChanged = function () {
+  function inputChanged() {
     if ($scope.model.datetimePickerValue === "" && $scope.hasDatetimePickerValue) {
       // $scope.hasDatetimePickerValue indicates that we had a value before the input was changed,
       // but now the input is empty.

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

@@ -1,34 +1,29 @@
-<div
-  class="umb-property-editor umb-datepicker"
-  ng-controller="Umbraco.PropertyEditors.DatepickerController"
->
+<div class="umb-property-editor umb-datepicker" ng-controller="Umbraco.PropertyEditors.DatepickerController as vm">
+
   <ng-form name="datePickerForm">
     <div id="datepicker{{model.alias}}">
       <umb-date-time-picker
         ng-model="model.datetimePickerValue"
         options="datePickerConfig"
         on-setup="datePickerSetup(fpItem)"
-        on-change="datePickerChange(dateStr)"
-      >
+        on-change="datePickerChange(dateStr)">
         <div class="input-append">
           <input
             type="text"
             name="datepicker"
             id="{{model.alias}}"
             ng-model="model.datetimePickerInputValue"
-            ng-blur="inputChanged()"
+            ng-blur="vm.inputChanged()"
             ng-required="model.validation.mandatory"
             val-server="value"
             class="datepickerinput"
-            ng-readonly="readonly"
-          />
+            ng-readonly="readonly" />
           <button
             ng-if="!readonly"
             type="button"
             class="btn-clear"
-            ng-click="clearDate()"
-            ng-show="hasDatetimePickerValue === true || datePickerForm.datepicker.$error.pickerError === true"
-          >
+            ng-click="vm.clearDatePicker($event)"
+            ng-show="hasDatetimePickerValue === true || datePickerForm.datepicker.$error.pickerError === true">
             <umb-icon icon="icon-delete"></umb-icon>
             <span class="sr-only">
               <localize key="content_removeDate">Clear date</localize>
@@ -36,8 +31,8 @@
           </button>
           <span ng-if="!readonly" class="add-on">
             <umb-icon
-              icon="icon-{{ datePickerConfig.noCalendar ? 'time' : 'calendar' }}"
-            ></umb-icon>
+              icon="icon-{{ datePickerConfig.noCalendar ? 'time' : 'calendar' }}">
+            </umb-icon>
           </span>
         </div>
       </umb-date-time-picker>
@@ -45,8 +40,7 @@
 
     <div
       ng-messages="datePickerForm.datepicker.$error"
-      show-validation-on-submit
-    >
+      show-validation-on-submit>
       <p class="help-inline" ng-message="required">{{mandatoryMessage}}</p>
       <p class="help-inline" ng-message="valServer">
         {{datePickerForm.datepicker.errorMsg}}
@@ -58,18 +52,14 @@
 
     <p
       ng-if="model.config.offsetTime === '1' && serverTimeNeedsOffsetting && model.value"
-      class="muted"
-    >
+      class="muted">
       <small>
         <localize key="content_scheduledPublishServerTime"
           >This translates to the following time on the server:
         </localize>
-        {{serverTime}} </small
-      ><br />
+        {{serverTime}} </small><br />
       <small>
-        <localize key="content_scheduledPublishDocumentation"
-          >What does this mean?</localize
-        >
+        <localize key="content_scheduledPublishDocumentation">What does this mean?</localize>
       </small>
     </p>
   </ng-form>