Form UX: Use splitted date/time widgets

src/pretix/static/pretixcontrol/js/ui/main.js

@@ -179,11 +179,22 @@ $(function () {
                 today: 'fa fa-screenshot',
                 clear: 'fa fa-trash',
                 close: 'fa fa-remove'
-            }
+            },
         };
         if ($(this).is('[data-is-payment-date]'))
             opts["daysOfWeekDisabled"] = JSON.parse($("body").attr("data-payment-weekdays-disabled"));
         $(this).datetimepicker(opts);
+        if ($(this).parent().is('.splitdatetimerow')) {
+            $(this).on("dp.change", function (ev) {
+                var $timepicker = $(this).closest(".splitdatetimerow").find(".timepickerfield");
+                var date = $(this).data('DateTimePicker').date();
+                if (date === null) {
+                    return;
+                }
+                date.set({'hour': 0, 'minute': 0, 'second': 0});
+                $timepicker.data('DateTimePicker').date(date);
+            });
+        }
     });
 
     $(".timepickerfield").each(function() {

src/pretix/static/pretixcontrol/scss/_forms.scss

@@ -190,3 +190,26 @@ pre.mail-preview {
     margin-right: 10px;
   }
 }
+.splitdatetimerow {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  .help-block {
+    width: 100%;
+  }
+}
+.splitdatetimepart {
+  width: 50%;
+  display: inline-block;
+
+  &.datepickerfield {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+  }
+  &.timepickerfield {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    border-left: 0;
+  }
+}