diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js
index 24affc6ac1..30b6fc4c8f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js
@@ -55,7 +55,9 @@ function dateTimePickerController($scope, angularHelper, dateHelper, validationM
         };
 
         // Don't show calendar if date format has been set to only time
-        if ($scope.model.config.format === "HH:mm:ss" || $scope.model.config.format === "HH:mm" || $scope.model.config.format === "HH") {
+        const timeFormat = $scope.model.config.format.toLowerCase();
+        const timeFormatPattern = /^h{1,2}:m{1,2}:s{1,2}\s?a?$/gmi;
+        if (timeFormat.match(timeFormatPattern)) {            
             $scope.datePickerConfig.enableTime = true;
             $scope.datePickerConfig.noCalendar = true;
         }
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.html
index b35663c3df..4a98ba575a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.html
@@ -25,7 +25,7 @@
                         <span class="sr-only"><localize key="content_removeDate">Clear date</localize></span>
                     </button>
                     <span class="add-on" aria-hidden="true">
-                        <i class="icon-calendar"></i>
+                        <i class="icon-{{ datePickerConfig.noCalendar ? 'time' : 'calendar' }}"></i>
                     </span>
                 </div>