Also add change event to timepicker and datepicker

CHANGELOG.txt

@@ -35,6 +35,7 @@ Changelog
  * Added screen-reader labels for dashboard summary cards (Helen Chapman, Katie Locke)
  * Added screen-reader labels for privacy toggle of collections (Helen Chapman, Katie Locke)
  * Added `construct_settings_menu` hook (Jordan Bauer, Quadric)
+ * Fixed compatibility of date / time choosers with wagtail-react-streamfield (Mike Hearn)
  * 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

@@ -74,6 +74,7 @@ Other features
  * Added ``process_child_object`` and ``exclude_fields`` arguments to ``Page.copy()`` to make it easier for third-party apps to customise copy behavior (Karl Hobley)
  * Added ``Page.with_content_json()``, allowing revision content loading behaviour to be customised on a per-model basis (Karl Hobley)
  * Added ``construct_settings_menu`` hook (Jordan Bauer, Quadric)
+ * Fixed compatibility of date / time choosers with wagtail-react-streamfield (Mike Hearn)
 
 Bug fixes
 ~~~~~~~~~

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

@@ -30,14 +30,20 @@ function initDateChooser(id, opts) {
             timepicker: false,
             scrollInput: false,
             format: 'Y-m-d',
-            onGenerate: hideCurrent
+            onGenerate: hideCurrent,
+            onChangeDateTime: function(_, $el) {
+              $el.get(0).dispatchEvent(new Event('change'))
+            }
         }, opts || {}));
     } else {
         $('#' + id).datetimepicker($.extend({
             timepicker: false,
             scrollInput: false,
             format: 'Y-m-d',
-            onGenerate: hideCurrent
+            onGenerate: hideCurrent,
+            onChangeDateTime: function(_, $el) {
+              $el.get(0).dispatchEvent(new Event('change'))
+            }
         }, opts || {}));
     }
 }
@@ -49,11 +55,17 @@ function initTimeChooser(id) {
             datepicker: false,
             scrollInput: false,
             format: 'H:i',
+            onChangeDateTime: function(_, $el) {
+              $el.get(0).dispatchEvent(new Event('change'))
+            }
         });
     } else {
         $('#' + id).datetimepicker({
             datepicker: false,
-            format: 'H:i'
+            format: 'H:i',
+            onChangeDateTime: function(_, $el) {
+              $el.get(0).dispatchEvent(new Event('change'))
+            }
         });
     }
 }