Move date / time widget initialiser JS into the widget's form media

This allows them to work on pages that do not include _editor_js.html (or page-editor.js). However, wagtailadmin/shared/datetimepicker_translations.html will still be required in order to localise the date picker UI.

Move datepicker translations to admin_base.html

CHANGELOG.txt

@@ -13,6 +13,7 @@ Changelog
  * Added ButtonHelper examples in the modelAdmin primer page within documentation (Kalob Taulien)
  * Multiple clarifications, grammar and typo fixes throughout documentation (Dan Swain)
  * Use correct URL in API example in documentation (Michael Bunsen)
+ * Move datetime widget initialiser JS into the widget's form media instead of page editor media (Matt Westcott)
  * Fix: ModelAdmin no longer fails when filtering over a foreign key relation (Jason Dilworth, Matt Westcott)
  * Fix: The Wagtail version number is now visible within the Settings menu (Kevin Howbrook)
  * Fix: Scaling images now rounds values to an integer so that images render without errors (Adrian Brunyate)

docs/releases/2.6.rst

@@ -22,6 +22,7 @@ Other features
  * Added ButtonHelper examples in the modelAdmin primer page within documentation (Kalob Taulien)
  * Multiple clarifications, grammar and typo fixes throughout documentation (Dan Swain)
  * Use correct URL in API example in documentation (Michael Bunsen)
+ * Move datetime widget initialiser JS into the widget's form media instead of page editor media (Matt Westcott)
 
 Bug fixes
 ~~~~~~~~~

wagtail/admin/static_src/wagtailadmin/js/date-time-chooser.js

@@ -0,0 +1,75 @@
+$.fn.datetimepicker.defaults.i18n.wagtail_custom_locale = {
+    months: wagtailConfig.STRINGS.MONTHS,
+    dayOfWeek: wagtailConfig.STRINGS.WEEKDAYS,
+    dayOfWeekShort: wagtailConfig.STRINGS.WEEKDAYS_SHORT,
+};
+$.datetimepicker.setLocale('wagtail_custom_locale');
+
+// Compare two date objects. Ignore minutes and seconds.
+function dateEqual(x, y) {
+    return x.getDate() === y.getDate() &&
+           x.getMonth() === y.getMonth() &&
+           x.getYear() === y.getYear()
+}
+
+/*
+Remove the xdsoft_current css class from markup unless the selected date is currently in view.
+Keep the normal behaviour if the home button is clicked.
+ */
+function hideCurrent(current, input) {
+    var selected = new Date(input[0].value);
+    if (!dateEqual(selected, current)) {
+        $(this).find('.xdsoft_datepicker .xdsoft_current:not(.xdsoft_today)').removeClass('xdsoft_current');
+    }
+}
+
+function initDateChooser(id, opts) {
+    if (window.dateTimePickerTranslations) {
+        $('#' + id).datetimepicker($.extend({
+            closeOnDateSelect: true,
+            timepicker: false,
+            scrollInput: false,
+            format: 'Y-m-d',
+            onGenerate: hideCurrent
+        }, opts || {}));
+    } else {
+        $('#' + id).datetimepicker($.extend({
+            timepicker: false,
+            scrollInput: false,
+            format: 'Y-m-d',
+            onGenerate: hideCurrent
+        }, opts || {}));
+    }
+}
+
+function initTimeChooser(id) {
+    if (window.dateTimePickerTranslations) {
+        $('#' + id).datetimepicker({
+            closeOnDateSelect: true,
+            datepicker: false,
+            scrollInput: false,
+            format: 'H:i',
+        });
+    } else {
+        $('#' + id).datetimepicker({
+            datepicker: false,
+            format: 'H:i'
+        });
+    }
+}
+
+function initDateTimeChooser(id, opts) {
+    if (window.dateTimePickerTranslations) {
+        $('#' + id).datetimepicker($.extend({
+            closeOnDateSelect: true,
+            format: 'Y-m-d H:i',
+            scrollInput: false,
+            onGenerate: hideCurrent
+        }, opts || {}));
+    } else {
+        $('#' + id).datetimepicker($.extend({
+            format: 'Y-m-d H:i',
+            onGenerate: hideCurrent
+        }, opts || {}));
+    }
+}

wagtail/admin/static_src/wagtailadmin/js/page-editor.js

@@ -7,75 +7,6 @@ function registerHalloPlugin(name, opts) {
     compatibility, without throwing an error on later versions. */
 }
 
-// Compare two date objects. Ignore minutes and seconds.
-function dateEqual(x, y) {
-    return x.getDate() === y.getDate() &&
-           x.getMonth() === y.getMonth() &&
-           x.getYear() === y.getYear()
-}
-
-/*
-Remove the xdsoft_current css class from markup unless the selected date is currently in view.
-Keep the normal behaviour if the home button is clicked.
- */
-function hideCurrent(current, input) {
-    var selected = new Date(input[0].value);
-    if (!dateEqual(selected, current)) {
-        $(this).find('.xdsoft_datepicker .xdsoft_current:not(.xdsoft_today)').removeClass('xdsoft_current');
-    }
-}
-
-function initDateChooser(id, opts) {
-    if (window.dateTimePickerTranslations) {
-        $('#' + id).datetimepicker($.extend({
-            closeOnDateSelect: true,
-            timepicker: false,
-            scrollInput: false,
-            format: 'Y-m-d',
-            onGenerate: hideCurrent
-        }, opts || {}));
-    } else {
-        $('#' + id).datetimepicker($.extend({
-            timepicker: false,
-            scrollInput: false,
-            format: 'Y-m-d',
-            onGenerate: hideCurrent
-        }, opts || {}));
-    }
-}
-
-function initTimeChooser(id) {
-    if (window.dateTimePickerTranslations) {
-        $('#' + id).datetimepicker({
-            closeOnDateSelect: true,
-            datepicker: false,
-            scrollInput: false,
-            format: 'H:i',
-        });
-    } else {
-        $('#' + id).datetimepicker({
-            datepicker: false,
-            format: 'H:i'
-        });
-    }
-}
-
-function initDateTimeChooser(id, opts) {
-    if (window.dateTimePickerTranslations) {
-        $('#' + id).datetimepicker($.extend({
-            closeOnDateSelect: true,
-            format: 'Y-m-d H:i',
-            scrollInput: false,
-            onGenerate: hideCurrent
-        }, opts || {}));
-    } else {
-        $('#' + id).datetimepicker($.extend({
-            format: 'Y-m-d H:i',
-            onGenerate: hideCurrent
-        }, opts || {}));
-    }
-}
-
 function InlinePanel(opts) {
     var self = {};
 

wagtail/admin/templates/wagtailadmin/admin_base.html

@@ -50,7 +50,40 @@
                 SHOW_ERROR: "{% trans 'Show error' %}",
                 EDITOR_CRASH: "{% trans 'The editor just crashed. Content has been reset to the last saved version.' %}",
                 BROKEN_LINK: "{% trans 'Broken link' %}",
-                MISSING_DOCUMENT: "{% trans 'Missing document' %}"
+                MISSING_DOCUMENT: "{% trans 'Missing document' %}",
+
+                MONTHS: [
+                    "{% trans 'January' %}",
+                    "{% trans 'February' %}",
+                    "{% trans 'March' %}",
+                    "{% trans 'April' %}",
+                    "{% trans 'May' %}",
+                    "{% trans 'June' %}",
+                    "{% trans 'July' %}",
+                    "{% trans 'August' %}",
+                    "{% trans 'September' %}",
+                    "{% trans 'October' %}",
+                    "{% trans 'November' %}",
+                    "{% trans 'December' %}"
+                ],
+                WEEKDAYS: [
+                    "{% trans 'Sunday' %}",
+                    "{% trans 'Monday' %}",
+                    "{% trans 'Tuesday' %}",
+                    "{% trans 'Wednesday' %}",
+                    "{% trans 'Thursday' %}",
+                    "{% trans 'Friday' %}",
+                    "{% trans 'Saturday' %}"
+                ],
+                WEEKDAYS_SHORT: [
+                    "{% trans 'Sun' %}",
+                    "{% trans 'Mon' %}",
+                    "{% trans 'Tue' %}",
+                    "{% trans 'Wed' %}",
+                    "{% trans 'Thu' %}",
+                    "{% trans 'Fri' %}",
+                    "{% trans 'Sat' %}"
+                ]
             };
 
             wagtailConfig.ADMIN_URLS = {

wagtail/admin/templates/wagtailadmin/pages/_editor_js.html

@@ -25,5 +25,3 @@
 <script src="{% static 'wagtailadmin/js/vendor/bootstrap-tooltip.js' %}"></script>
 
 {% hook_output 'insert_editor_js' %}
-
-{% include "wagtailadmin/shared/datetimepicker_translations.html" %}

wagtail/admin/templates/wagtailadmin/shared/datetimepicker_translations.html

@@ -1,39 +0,0 @@
-{% load i18n %}
-
-<script>
-    $.fn.datetimepicker.defaults.i18n.wagtail_custom_locale = {
-        months: [
-            '{% trans "January" %}',
-            '{% trans "February" %}',
-            '{% trans "March" %}',
-            '{% trans "April" %}',
-            '{% trans "May" %}',
-            '{% trans "June" %}',
-            '{% trans "July" %}',
-            '{% trans "August" %}',
-            '{% trans "September" %}',
-            '{% trans "October" %}',
-            '{% trans "November" %}',
-            '{% trans "December" %}'
-        ],
-        dayOfWeek: [
-            '{% trans "Sunday" %}',
-            '{% trans "Monday" %}',
-            '{% trans "Tuesday" %}',
-            '{% trans "Wednesday" %}',
-            '{% trans "Thursday" %}',
-            '{% trans "Friday" %}',
-            '{% trans "Saturday" %}'
-        ],
-        dayOfWeekShort: [
-            '{% trans "Sun" %}',
-            '{% trans "Mon" %}',
-            '{% trans "Tue" %}',
-            '{% trans "Wed" %}',
-            '{% trans "Thu" %}',
-            '{% trans "Fri" %}',
-            '{% trans "Sat" %}'
-        ],
-    }
-    $.datetimepicker.setLocale('wagtail_custom_locale');
-</script>

wagtail/admin/widgets.py

@@ -58,6 +58,9 @@ class AdminDateInput(widgets.DateInput):
 
         return context
 
+    class Media:
+        js = ['wagtailadmin/js/date-time-chooser.js']
+
 
 class AdminTimeInput(widgets.TimeInput):
     template_name = 'wagtailadmin/widgets/time_input.html'
@@ -68,6 +71,9 @@ class AdminTimeInput(widgets.TimeInput):
             default_attrs.update(attrs)
         super().__init__(attrs=default_attrs, format=format)
 
+    class Media:
+        js = ['wagtailadmin/js/date-time-chooser.js']
+
 
 class AdminDateTimeInput(widgets.DateTimeInput):
     template_name = 'wagtailadmin/widgets/datetime_input.html'
@@ -93,6 +99,9 @@ class AdminDateTimeInput(widgets.DateTimeInput):
 
         return context
 
+    class Media:
+        js = ['wagtailadmin/js/date-time-chooser.js']
+
 
 class AdminTagWidget(TagWidget):
     template_name = 'wagtailadmin/widgets/tag_widget.html'

wagtail/contrib/forms/templates/wagtailforms/index_submissions.html

@@ -3,9 +3,15 @@
 {% block titletag %}{% blocktrans with form_title=form_page.title|capfirst %}Submissions of {{ form_title }}{% endblocktrans %}{% endblock %}
 {% block extra_js %}
     {{ block.super }}
-    {% include "wagtailadmin/shared/datetimepicker_translations.html" %}
 
     <script>
+        $.fn.datetimepicker.defaults.i18n.wagtail_custom_locale = {
+            months: wagtailConfig.STRINGS.MONTHS,
+            dayOfWeek: wagtailConfig.STRINGS.WEEKDAYS,
+            dayOfWeekShort: wagtailConfig.STRINGS.WEEKDAYS_SHORT,
+        }
+        $.datetimepicker.setLocale('wagtail_custom_locale');
+
         $(function() {
             $('#id_date_from').datetimepicker({
                 timepicker: false,