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 d2787308e8..2c13aad765 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
@@ -50,7 +50,8 @@ function dateTimePickerController($scope, angularHelper, dateHelper, validationM
         $scope.datePickerConfig = {
             enableTime: $scope.model.config.pickTime,
             dateFormat: dateFormat,
-            time_24hr: true
+            time_24hr: true,
+            clickOpens: !$scope.readonly
         };
 
         // Don't show calendar if date format has been set to only time
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 548f3aed0b..8eb71f8752 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
@@ -18,12 +18,13 @@
                            ng-blur="inputChanged()"
                            ng-required="model.validation.mandatory"
                            val-server="value"
-                           class="datepickerinput" />
-                    <button type="button" class="btn-clear" ng-click="clearDate()" ng-show="hasDatetimePickerValue === true || datePickerForm.datepicker.$error.pickerError === true">
+                           class="datepickerinput"
+                           ng-readonly="readonly" />
+                    <button ng-if="!readonly" type="button" class="btn-clear" ng-click="clearDate()" 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></span>
                     </button>
-                    <span class="add-on">
+                    <span ng-if="!readonly" class="add-on">
                         <umb-icon icon="icon-{{ datePickerConfig.noCalendar ? 'time' : 'calendar' }}"></umb-icon>
                     </span>
                 </div>