Telepath: Date time inputs

client/src/entrypoints/admin/telepath/widgets.js

@@ -132,3 +132,50 @@ class DraftailRichTextArea {
     }
 }
 window.telepath.register('wagtail.widgets.DraftailRichTextArea', DraftailRichTextArea);
+
+
+class BaseDateTimeWidget extends Widget {
+    constructor(options) {
+        this.options = options;
+    }
+
+    render(placeholder, name, id) {
+        const element = document.createElement('input');
+        element.type = 'text';
+        element.name = name;
+        element.id = id;
+        placeholder.replaceWith(element);
+
+        this.initChooserFn(id, this.options);
+
+        return {
+            getValue() {
+                return element.value;
+            },
+            getState() {
+                return element.value;
+            },
+            setState(state) {
+                element.value = state;
+            },
+            focus() {
+                element.focus();
+            },
+        };
+    }
+}
+
+class AdminDateInput extends BaseDateTimeWidget {
+    initChooserFn = window.initDateChooser;
+}
+window.telepath.register('wagtail.widgets.AdminDateInput', AdminDateInput);
+
+class AdminTimeInput extends BaseDateTimeWidget {
+    initChooserFn = window.initTimeChooser;
+}
+window.telepath.register('wagtail.widgets.AdminTimeInput', AdminTimeInput);
+
+class AdminDateTimeInput extends BaseDateTimeWidget {
+    initChooserFn = window.initDateTimeChooser;
+}
+window.telepath.register('wagtail.widgets.AdminDateTimeInput', AdminDateTimeInput);

wagtail/admin/widgets/datetime.py

@@ -7,6 +7,8 @@ from django.utils.formats import get_format
 
 from wagtail.admin.datetimepicker import to_datetimepicker_format
 from wagtail.admin.staticfiles import versioned_static
+from wagtail.core.telepath import register
+from wagtail.core.widget_adapters import WidgetAdapter
 
 
 DEFAULT_DATE_FORMAT = '%Y-%m-%d'
@@ -27,14 +29,16 @@ class AdminDateInput(widgets.DateInput):
         self.js_format = to_datetimepicker_format(fmt)
         super().__init__(attrs=default_attrs, format=fmt)
 
-    def get_context(self, name, value, attrs):
-        context = super().get_context(name, value, attrs)
-
-        config = {
+    def get_config(self):
+        return {
             'dayOfWeekStart': get_format('FIRST_DAY_OF_WEEK'),
             'format': self.js_format,
         }
-        context['widget']['config_json'] = json.dumps(config)
+
+    def get_context(self, name, value, attrs):
+        context = super().get_context(name, value, attrs)
+
+        context['widget']['config_json'] = json.dumps(self.get_config())
 
         return context
 
@@ -45,6 +49,18 @@ class AdminDateInput(widgets.DateInput):
         ])
 
 
+class AdminDateInputAdapter(WidgetAdapter):
+    js_constructor = 'wagtail.widgets.AdminDateInput'
+
+    def js_args(self, widget):
+        return [
+            widget.get_config(),
+        ]
+
+
+register(AdminDateInputAdapter(), AdminDateInput)
+
+
 class AdminTimeInput(widgets.TimeInput):
     template_name = 'wagtailadmin/widgets/time_input.html'
 
@@ -58,15 +74,15 @@ class AdminTimeInput(widgets.TimeInput):
         self.js_format = to_datetimepicker_format(fmt)
         super().__init__(attrs=default_attrs, format=fmt)
 
-    def get_context(self, name, value, attrs):
-        context = super().get_context(name, value, attrs)
-
-        config = {
+    def get_config(self):
+        return {
             'format': self.js_format,
             'formatTime': self.js_format
         }
-        context['widget']['config_json'] = json.dumps(config)
 
+    def get_context(self, name, value, attrs):
+        context = super().get_context(name, value, attrs)
+        context['widget']['config_json'] = json.dumps(self.get_config())
         return context
 
     @property
@@ -76,6 +92,18 @@ class AdminTimeInput(widgets.TimeInput):
         ])
 
 
+class AdminTimeInputAdapter(WidgetAdapter):
+    js_constructor = 'wagtail.widgets.AdminTimeInput'
+
+    def js_args(self, widget):
+        return [
+            widget.get_config(),
+        ]
+
+
+register(AdminTimeInputAdapter(), AdminTimeInput)
+
+
 class AdminDateTimeInput(widgets.DateTimeInput):
     template_name = 'wagtailadmin/widgets/datetime_input.html'
 
@@ -93,15 +121,17 @@ class AdminDateTimeInput(widgets.DateTimeInput):
         self.js_time_format = to_datetimepicker_format(time_fmt)
         super().__init__(attrs=default_attrs, format=fmt)
 
-    def get_context(self, name, value, attrs):
-        context = super().get_context(name, value, attrs)
-
-        config = {
+    def get_config(self):
+        return {
             'dayOfWeekStart': get_format('FIRST_DAY_OF_WEEK'),
             'format': self.js_format,
             'formatTime': self.js_time_format
         }
-        context['widget']['config_json'] = json.dumps(config)
+
+    def get_context(self, name, value, attrs):
+        context = super().get_context(name, value, attrs)
+
+        context['widget']['config_json'] = json.dumps(self.get_config())
 
         return context
 
@@ -110,3 +140,15 @@ class AdminDateTimeInput(widgets.DateTimeInput):
         return forms.Media(js=[
             versioned_static('wagtailadmin/js/date-time-chooser.js'),
         ])
+
+
+class AdminDateTimeInputAdapter(WidgetAdapter):
+    js_constructor = 'wagtail.widgets.AdminDateTimeInput'
+
+    def js_args(self, widget):
+        return [
+            widget.get_config(),
+        ]
+
+
+register(AdminDateTimeInputAdapter(), AdminDateTimeInput)