From 64d44a86d7b3d6951159e576ec1537b684496d99 Mon Sep 17 00:00:00 2001
From: Farhaan Bukhsh <farhaan@opencraft.com>
Date: Tue, 26 Apr 2022 02:36:41 +0530
Subject: [PATCH] feat: Added date configuration to Schedule & Details settings
 page

This feature help to configure the date formatt in Schedule and Details
settings page.

Signed-off-by: Farhaan Bukhsh <farhaan@opencraft.com>
Co-authored-by: Joseph Curtin  <jbcurtin@opencraft.com>
---
 cms/djangoapps/contentstore/views/course.py |  8 ++++++++
 cms/envs/common.py                          |  6 ++++++
 cms/static/js/utils/date_utils.js           |  7 ++++++-
 cms/templates/settings.html                 | 13 +++++++------
 4 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/cms/djangoapps/contentstore/views/course.py b/cms/djangoapps/contentstore/views/course.py
index 7643a6a1e29b..907188c97cd8 100644
--- a/cms/djangoapps/contentstore/views/course.py
+++ b/cms/djangoapps/contentstore/views/course.py
@@ -1156,6 +1156,13 @@ def settings_handler(request, course_key_string):  # lint-amnesty, pylint: disab
             verified_mode = CourseMode.verified_mode_for_course(course_key, include_expired=True)
             upgrade_deadline = (verified_mode and verified_mode.expiration_datetime and
                                 verified_mode.expiration_datetime.isoformat())
+
+            date_placeholder_format = configuration_helpers.get_value_for_org(
+                course_module.location.org,
+                'SCHEDULE_DETAIL_FORMAT',
+                settings.SCHEDULE_DETAIL_FORMAT
+            ).upper()
+
             settings_context = {
                 'context_course': course_module,
                 'course_locator': course_key,
@@ -1180,6 +1187,7 @@ def settings_handler(request, course_key_string):  # lint-amnesty, pylint: disab
                 'enable_extended_course_details': enable_extended_course_details,
                 'upgrade_deadline': upgrade_deadline,
                 'mfe_proctored_exam_settings_url': get_proctored_exam_settings_url(course_module.id),
+                'date_placeholder_format': date_placeholder_format,
             }
             if is_prerequisite_courses_enabled():
                 courses, in_process_course_actions = get_courses_accessible_to_user(request)
diff --git a/cms/envs/common.py b/cms/envs/common.py
index d05ef07b6f9a..82ce97985a9f 100644
--- a/cms/envs/common.py
+++ b/cms/envs/common.py
@@ -182,6 +182,11 @@
 #   templates.
 STUDIO_NAME = _("Your Platform Studio")
 STUDIO_SHORT_NAME = _("Studio")
+
+# .. setting_name: SCHEDULE_DETAIL_FORMAT
+# .. setting_default: MM/DD/YYYY'
+# .. setting_description: Settings to configure the date format in Schedule & Details page
+SCHEDULE_DETAIL_FORMAT = 'MM/DD/YYYY'
 FEATURES = {
     'GITHUB_PUSH': False,
 
@@ -516,6 +521,7 @@
     #   in the LMS and CMS.
     # .. toggle_tickets: 'https://github.com/open-craft/edx-platform/pull/429'
     'DISABLE_UNENROLLMENT': False,
+
 }
 
 # .. toggle_name: ENABLE_COPPA_COMPLIANCE
diff --git a/cms/static/js/utils/date_utils.js b/cms/static/js/utils/date_utils.js
index 0c91e6347e72..2111982f9215 100644
--- a/cms/static/js/utils/date_utils.js
+++ b/cms/static/js/utils/date_utils.js
@@ -97,7 +97,12 @@ function($, date, TriggerChangeEventOnEnter) {
 
         // instrument as date and time pickers
         timefield.timepicker({timeFormat: 'H:i'});
-        datefield.datepicker();
+        var placeholder = datefield.attr('placeholder');
+        if (placeholder == 'DD/MM/YYYY') {
+            datefield.datepicker({dateFormat: 'dd/mm/yy'});
+        } else {
+            datefield.datepicker();
+        }
 
         // Using the change event causes setfield to be triggered twice, but it is necessary
         // to pick up when the date is typed directly in the field.
diff --git a/cms/templates/settings.html b/cms/templates/settings.html
index c3ed1afb9957..1b5d75d9901b 100644
--- a/cms/templates/settings.html
+++ b/cms/templates/settings.html
@@ -223,7 +223,7 @@ <h2 class="title-2">${_('Course Schedule')}</h2>
             <li class="field-group field-group-course-start" id="course-start">
               <div class="field date" id="field-course-start-date">
                 <label for="course-start-date">${_("Course Start Date")}</label>
-                <input type="text" class="start-date date start datepicker" id="course-start-date" placeholder="MM/DD/YYYY" autocomplete="off" />
+                <input type="text" class="start-date date start datepicker" id="course-start-date" placeholder="${date_placeholder_format}" autocomplete="off" />
                 <span class="icon icon-inline fa fa-calendar-check-o datepicker-icon" aria-hidden="true"></span>
                 <span class="tip tip-stacked">${_("First day the course begins")}</span>
               </div>
@@ -238,7 +238,7 @@ <h2 class="title-2">${_('Course Schedule')}</h2>
             <li class="field-group field-group-course-end" id="course-end">
               <div class="field date" id="field-course-end-date">
                 <label for="course-end-date">${_("Course End Date")}</label>
-                <input type="text" class="end-date date end" id="course-end-date" placeholder="MM/DD/YYYY" autocomplete="off" />
+                <input type="text" class="end-date date end" id="course-end-date" placeholder="${date_placeholder_format}" autocomplete="off" />
                 <span class="icon icon-inline fa fa-calendar-check-o datepicker-icon" aria-hidden="true"></span>
                 <span class="tip tip-stacked">${_("Last day your course is active")}</span>
               </div>
@@ -304,8 +304,9 @@ <h2 class="title-2">${_('Course Schedule')}</h2>
                 <div class="field date" id="field-certificate-available-date" >
               % endif
                 <label for="certificate-available-date">${_("Certificates Available Date")}</label>
-                <input type="text" class="certificate-available-date date start datepicker" id="certificate-available-date" placeholder="MM/DD/YYYY" autocomplete="off" />
+                <input type="text" class="certificate-available-date date start datepicker" id="certificate-available-date" placeholder="${date_placeholder_format}" autocomplete="off" />
                 <span class="icon icon-inline fa fa-calendar-check-o datepicker-icon" aria-hidden="true"></span>
+                <span class="tip tip-stacked">${_("By default, 48 hours after course end date")}</span>
               </div>
             </li>
           </ol>
@@ -315,7 +316,7 @@ <h2 class="title-2">${_('Course Schedule')}</h2>
             <li class="field-group field-group-enrollment-start" id="enrollment-start">
               <div class="field date" id="field-enrollment-start-date">
                 <label for="course-enrollment-start-date">${_("Enrollment Start Date")}</label>
-                <input type="text" class="start-date date start" id="course-enrollment-start-date" placeholder="MM/DD/YYYY" autocomplete="off" />
+                <input type="text" class="start-date date start" id="course-enrollment-start-date" placeholder="${date_placeholder_format}" autocomplete="off" />
                 <span class="icon icon-inline fa fa-calendar-check-o datepicker-icon" aria-hidden="true"></span>
                 <span class="tip tip-stacked">${_("First day students can enroll")}</span>
               </div>
@@ -333,7 +334,7 @@ <h2 class="title-2">${_('Course Schedule')}</h2>
             <li class="field-group field-group-enrollment-end" id="enrollment-end">
               <div class="field date ${enrollment_end_editable_class}" id="field-enrollment-end-date">
                 <label for="course-enrollment-end-date">${_("Enrollment End Date")}</label>
-                <input type="text" class="end-date date end" id="course-enrollment-end-date" placeholder="MM/DD/YYYY" autocomplete="off" ${enrollment_end_readonly} />
+                <input type="text" class="end-date date end" id="course-enrollment-end-date" placeholder="${date_placeholder_format}" autocomplete="off" ${enrollment_end_readonly} />
                 <span class="icon icon-inline fa fa-calendar-check-o datepicker-icon" aria-hidden="true"></span>
                 <span class="tip tip-stacked">
                   ${_("Last day students can enroll.")}
@@ -356,7 +357,7 @@ <h2 class="title-2">${_('Course Schedule')}</h2>
             <li class="field-group field-group-upgrade-deadline" id="upgrade-deadline">
               <div class="field date is-not-editable" id="field-upgrade-deadline-date">
                 <label for="course-upgrade-deadline-date">${_("Upgrade Deadline Date")}</label>
-                <input type="text" class="date upgrade-deadline" id="course-upgrade-deadline-date" placeholder="MM/DD/YYYY" autocomplete="off" readonly aria-readonly="true" />
+                <input type="text" class="date upgrade-deadline" id="course-upgrade-deadline-date" placeholder="${date_placeholder_format}" autocomplete="off" readonly aria-readonly="true" />
                 <span class="tip tip-stacked">
                   ${_("Last day students can upgrade to a verified enrollment.")}
                   ${_("Contact your {platform_name} partner manager to update these settings.").format(platform_name=settings.PLATFORM_NAME)}