Assignment's Due Date translation - Only part of the string is being translated

Conditions

The conditions required to trigger the bug are:

• Have a course with a unit that has an assignment in it.
• Have this waffle flag enabled for the course completion.enable_completion_tracking.
• Configure a Due Date for that assignment as shown in the following image:
  • 
• Have a user enrolled in that course.
• When entering the assignment logged in as the user enrolled, you should be able to see the Due Date on top of the assignment content as shown in the screenshot:
  • 

When changing the Site Language through the user preferences page

The Due Date should be translated accordingly but only the word Due is translated. The subsection_format and date remain in the same language.

Expected Results

Trace

Django Template line of code that renders the Due Date
Due Date rendered in template

Dates for the unit are handled by custom JS: https://github.com/openedx/edx-platform/blob/master/lms/static/js/dateutil_factory.js . We currently localize the date format but not the actual date (i.e. based on the locale, we might get any of the following formats):

2018, 01 Jan 15:30 UTC
Jan 01, 2018 15:30 UTC
01 Jan, 2018 15:30 UTC
2018, Jan 01 15:30 UTC

But this part of the string along with the subsection_format are never sent through translation.

Suggestion

Changing the order of translation (format string, THEN translate instead of translate THEN format) would fix the issue.

Start with the Due Date rendering in lms/templates/vert_module.html and follow the date handling in lms/static/js/dateutil_factory.js. Check how the format string, subsection_format, and date are passed through translation. Done means the complete Due Date, including its format and date, changes appropriately when the site language changes.