diff --git a/app/assets/javascripts/app/views/generic/date.jst.eco b/app/assets/javascripts/app/views/generic/date.jst.eco
index b12a620ea..44332bb7e 100644
--- a/app/assets/javascripts/app/views/generic/date.jst.eco
+++ b/app/assets/javascripts/app/views/generic/date.jst.eco
@@ -1,4 +1,4 @@
 <div class="control controls--date" data-name="<%= @attribute.nameRaw %>">
   <input type="hidden" value="<%= @attribute.value %>" name="<%= @attribute.name %>">
-  <input type="text" value="" class="form-control js-datepicker <%= @attribute.class %>" data-item="date">
-</div>
\ No newline at end of file
+  <input type="text" value="" class="form-control js-datepicker <%= @attribute.class %>" data-item="date" <% if @attribute.disabled: %> disabled<% end %>>
+</div>
diff --git a/app/assets/javascripts/app/views/generic/datetime.jst.eco b/app/assets/javascripts/app/views/generic/datetime.jst.eco
index ac195d58d..59331795d 100644
--- a/app/assets/javascripts/app/views/generic/datetime.jst.eco
+++ b/app/assets/javascripts/app/views/generic/datetime.jst.eco
@@ -1,6 +1,6 @@
 <div class="controls controls--datetime" data-name="<%= @attribute.nameRaw %>">
   <input type="hidden" value="<%= @attribute.value %>" name="<%= @attribute.name %>">
-  <input type="text" value="" class="form-control flex-shrink-horizontal js-datepicker <%= @attribute.class %>" data-item="date">
+  <input type="text" value="" class="form-control flex-shrink-horizontal js-datepicker <%= @attribute.class %>" data-item="date" <% if @attribute.disabled: %> disabled<% end %>>
   <div class="controls-label"><%- @T('at') %></div>
-  <input type="text" value="" class="form-control time js-timepicker <%= @attribute.class %>" data-item="time">
-</div>
\ No newline at end of file
+  <input type="text" value="" class="form-control time js-timepicker <%= @attribute.class %>" data-item="time" <% if @attribute.disabled: %> disabled<% end %>>
+</div>
diff --git a/public/assets/tests/form_datetime.js b/public/assets/tests/form_datetime.js
index 4cdc3d62a..1ce0e7817 100644
--- a/public/assets/tests/form_datetime.js
+++ b/public/assets/tests/form_datetime.js
@@ -11,18 +11,25 @@ test("DateTime timepicker focuses hours", function(assert) {
     model:     {
       configure_attributes: [
         { name: 'datetime1', display: 'Datetime1', tag: 'datetime', null: true },
+        { name: 'datetime2', display: 'Datetime2', tag: 'datetime', null: true, disabled: true },
+        { name: 'date3',     display: 'Date3',     tag: 'date',     null: true, disabled: true },
       ]
     },
     autofocus: true
   });
 
-  let timepicker = el.find('[data-item=time]')
+  let timepicker1 = el.find('[data-name=datetime1] [data-item=time]')
+  //debugger
 
-  timepicker.focus()
+  timepicker1.focus()
 
   setTimeout(function(){ // give it time to apply focus
-    equal(timepicker[0].selectionStart, 0)
-    equal(timepicker[0].selectionEnd, 2)
+    equal(timepicker1[0].selectionStart, 0)
+    equal(timepicker1[0].selectionEnd, 2)
+
+    equal(el.find('[data-name=datetime2] [data-item=date]')[0].disabled, true)
+    equal(el.find('[data-name=datetime2] [data-item=time]')[0].disabled, true)
+    equal(el.find('[data-name=date3]     [data-item=date]')[0].disabled, true)
 
     done()
   }, 100)