diff --git a/lms/static/js/dateutil_factory.js b/lms/static/js/dateutil_factory.js
index 4e75636c5a..fea79f1d9e 100644
--- a/lms/static/js/dateutil_factory.js
+++ b/lms/static/js/dateutil_factory.js
@@ -28,16 +28,29 @@
         var displayDatetime;
         var isValid;
         var transform;
+        var dueDateFormat;
+        var dateFormat;
+
+        dueDateFormat = Object.freeze({
+            '%Y-%d-%m': 'YYYY, D MMM HH[:]mm z', // example: 2018, 01 Jan 15:30 UTC
+            '%m-%d-%Y': 'MMM D, YYYY HH[:]mm z', // example: Jan 01, 2018 15:30 UTC
+            '%d-%m-%Y': 'D MMM YYYY HH[:]mm z', // example: 01 Jan, 2018 15:30 UTC
+            '%Y-%m-%d': 'YYYY, MMM D HH[:]mm z' // example: 2018, Jan 01 15:30 UTC
+        });
 
         transform = function(iterationKey) {
             var context;
             $(iterationKey).each(function() {
                 if (isValid($(this).data('datetime'))) {
+                    dateFormat = DateUtils.dateFormatEnum[$(this).data('format')];
+                    if (typeof dateFormat === 'undefined') {
+                        dateFormat = dueDateFormat[$(this).data('format')];
+                    }
                     context = {
                         datetime: $(this).data('datetime'),
                         timezone: $(this).data('timezone'),
                         language: $(this).data('language'),
-                        format: DateUtils.dateFormatEnum[$(this).data('format')]
+                        format: dateFormat
                     };
                     displayDatetime = stringHandler(
                         localizedTime(context),
diff --git a/openedx/features/course_experience/templates/course_experience/course-outline-fragment-new.html b/openedx/features/course_experience/templates/course_experience/course-outline-fragment-new.html
index 5fa0a0d8b2..d20f17deae 100644
--- a/openedx/features/course_experience/templates/course_experience/course-outline-fragment-new.html
+++ b/openedx/features/course_experience/templates/course_experience/course-outline-fragment-new.html
@@ -112,6 +112,7 @@ from openedx.core.djangolib.markup import HTML, Text
                                                         class="localized-datetime subtitle-name"
                                                         data-datetime="${subsection.get('due')}"
                                                         data-string="${data_string}"
+                                                        data-format= "${due_date_display_format}"
                                                         data-timezone="${user_timezone}"
                                                         data-language="${user_language}"
                                                     ></span>
@@ -122,6 +123,7 @@ from openedx.core.djangolib.markup import HTML, Text
                                                 <span
                                                     class="localized-datetime subtitle-name"
                                                     data-datetime="${subsection.get('due')}"
+                                                    data-format= "${due_date_display_format}"
                                                     data-string="${data_string}"
                                                     data-timezone="${user_timezone}"
                                                     data-language="${user_language}"
diff --git a/openedx/features/course_experience/templates/course_experience/course-outline-fragment-old.html b/openedx/features/course_experience/templates/course_experience/course-outline-fragment-old.html
index 6c258ca5ba..476fb3ec9a 100644
--- a/openedx/features/course_experience/templates/course_experience/course-outline-fragment-old.html
+++ b/openedx/features/course_experience/templates/course_experience/course-outline-fragment-old.html
@@ -95,6 +95,7 @@ from openedx.core.djangolib.markup import HTML, Text
                                                         <span
                                                             class="localized-datetime subtitle-name"
                                                             data-datetime="${subsection.get('due')}"
+                                                            data-format= "${due_date_display_format}"
                                                             data-string="${data_string}"
                                                             data-timezone="${user_timezone}"
                                                             data-language="${user_language}"
@@ -106,6 +107,7 @@ from openedx.core.djangolib.markup import HTML, Text
                                                     <span
                                                         class="localized-datetime subtitle-name"
                                                         data-datetime="${subsection.get('due')}"
+                                                        data-format= "${due_date_display_format}"
                                                         data-string="${data_string}"
                                                         data-timezone="${user_timezone}"
                                                         data-language="${user_language}"
diff --git a/openedx/features/course_experience/views/course_outline.py b/openedx/features/course_experience/views/course_outline.py
index 03d704d2ae..cd12fd97f0 100644
--- a/openedx/features/course_experience/views/course_outline.py
+++ b/openedx/features/course_experience/views/course_outline.py
@@ -19,6 +19,7 @@ from openedx.features.course_experience import waffle as course_experience_waffl
 from student.models import CourseEnrollment
 
 from util.milestones_helpers import get_course_content_milestones
+from xmodule.modulestore.django import modulestore
 from ..utils import get_course_outline_block_tree, get_resume_block
 
 
@@ -36,6 +37,7 @@ class CourseOutlineFragmentView(EdxFragmentView):
         """
         course_key = CourseKey.from_string(course_id)
         course_overview = get_course_overview_with_access(request.user, 'load', course_key, check_if_enrolled=True)
+        course = modulestore().get_course(course_key)
 
         course_block_tree = get_course_outline_block_tree(request, course_id)
         if not course_block_tree:
@@ -51,7 +53,8 @@ class CourseOutlineFragmentView(EdxFragmentView):
             'csrf': csrf(request)['csrf_token'],
             'course': course_overview,
             'blocks': course_block_tree,
-            'show_visual_progress': show_visual_progress
+            'show_visual_progress': show_visual_progress,
+            'due_date_display_format': course.due_date_display_format,
         }
 
         # TODO: EDUCATOR-2283 Remove this check when the waffle flag is turned on in production