diff --git a/app/assets/javascripts/my_modules.js b/app/assets/javascripts/my_modules.js
index e9dae2f26..ba5ec80a3 100644
--- a/app/assets/javascripts/my_modules.js
+++ b/app/assets/javascripts/my_modules.js
@@ -3,18 +3,26 @@
 
 // Bind ajax for editing due dates
 function initDueDatePicker() {
-  $('#calendar-due-date').on('dp.change', function() {
+  function updateDueDate(val) {
     var updateUrl = $('.due-date-container').data('update-url');
     $.ajax({
       url: updateUrl,
       type: 'PATCH',
       dataType: 'json',
-      data: { my_module: { due_date: $('#calendar-due-date').val() } },
+      data: { my_module: { due_date: val } },
       success: function(result) {
         $('.due-date-container').html($(result.module_header_due_date_label));
         initDueDatePicker();
       }
     });
+  }
+
+  $('#calendar-due-date').on('dp.change', function() {
+    updateDueDate($('#calendar-due-date').val());
+  });
+
+  $('.flex-block.date-block .clear-date').off('click').on('click', function() {
+    updateDueDate(null);
   });
 }
 
diff --git a/app/assets/stylesheets/my_modules/protocols/index.scss b/app/assets/stylesheets/my_modules/protocols/index.scss
index a35d3642f..4d1bfb1bd 100644
--- a/app/assets/stylesheets/my_modules/protocols/index.scss
+++ b/app/assets/stylesheets/my_modules/protocols/index.scss
@@ -59,6 +59,7 @@
         border: 1px solid transparent;
         font-weight: bold;
         line-height: 34px;
+        margin-right: 25px;
         padding: 0 3px;
         position: relative;
 
@@ -73,6 +74,18 @@
         &.alert-red {
           color: $brand-danger;
         }
+
+        .clear-date {
+          color: $color-silver;
+          cursor: pointer;
+          display: none;
+          font-size: 20px;
+          left: 100%;
+          line-height: 34px;
+          margin-left: 5px;
+          position: absolute;
+          top: 0;
+        }
       }
 
       .datetime-picker-container {
@@ -86,12 +99,16 @@
           opacity: 0;
         }
       }
-    }
 
-    &:hover {
-      .date-text {
-        border-color: $color-silver;
-        border-radius: 3px;
+      &:hover {
+        .date-text[data-editable=true] {
+          border-color: $color-silver;
+          border-radius: 3px;
+
+          .clear-date {
+            display: inline;
+          }
+        }
       }
     }
   }
diff --git a/app/views/my_modules/_module_header_due_date_label.html.erb b/app/views/my_modules/_module_header_due_date_label.html.erb
index b3761fb37..528eb6836 100644
--- a/app/views/my_modules/_module_header_due_date_label.html.erb
+++ b/app/views/my_modules/_module_header_due_date_label.html.erb
@@ -9,16 +9,21 @@ elsif my_module.is_overdue?
   label = "(#{t('my_modules.states.overdue')})"
 end
 %>
-<span class="date-text <%= date_class %>">
+<span class="date-text <%= date_class if my_module.due_date %>" data-editable="<%= can_manage_module?(my_module) %>">
   <span class="view-block">
     <%= my_module.due_date ? l(my_module.due_date.utc, format: :full) : t("experiments.canvas.full_zoom.no_due_date") %>
   </span>
-  <%= render partial: "global_activities/date_picker.html.erb", locals: { 
-                id: 'due-date', 
-                use_current: 'false',
-                setDate: my_module.due_date ? l(my_module.due_date.utc, format: :full) : '',
-                placeholder: t("experiments.canvas.full_zoom.no_due_date"), 
-                label: nil 
-  } %>
+  <% if can_manage_module?(my_module) %>
+    <%= render partial: "global_activities/date_picker.html.erb", locals: { 
+                  id: 'due-date', 
+                  use_current: 'false',
+                  setDate: my_module.due_date ? l(my_module.due_date.utc, format: :full) : '',
+                  placeholder: t("experiments.canvas.full_zoom.no_due_date"), 
+                  label: nil 
+    } %>
+  <% end %>
   <%= label %>
+  <% if my_module.due_date && can_manage_module?(my_module) %>
+    <span class="fas fa-times clear-date"></span>
+  <% end %>
 </span>