Fix #732 -- Add date and time question types (#732)

* [WIP] add date/time question type

* Date/time questions python classes, types and form handling

* use own timepicker

* Fix argument naming

* Add css and js for datetimepickers

* remove not needed str call

* seperate splitdatetime widget template and fix date/time questions

* change date placeholder to dec 31

* do not show seconds in presale time pickers

* improve codestyle

* add new question types to api doc

* add test

* expand test to datetime question

* add new questiontypes to changelog

remove duplicate parens

* remove timezone from time only question answers

* improve codestyle

* Fix date and time formatting in control question overview

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

@@ -12,6 +12,88 @@ function ngettext(singular, plural, count) {
     }
     return plural;
 }
+
+var form_handlers = function (el) {
+    el.find(".datetimepicker").each(function() {
+        $(this).datetimepicker({
+            format: $("body").attr("data-datetimeformat"),
+            locale: $("body").attr("data-datetimelocale"),
+            useCurrent: false,
+            showClear: !$(this).prop("required"),
+            icons: {
+                time: 'fa fa-clock-o',
+                date: 'fa fa-calendar',
+                up: 'fa fa-chevron-up',
+                down: 'fa fa-chevron-down',
+                previous: 'fa fa-chevron-left',
+                next: 'fa fa-chevron-right',
+                today: 'fa fa-screenshot',
+                clear: 'fa fa-trash',
+                close: 'fa fa-remove'
+            }
+        });
+        if (!$(this).val()) {
+            $(this).data("DateTimePicker").viewDate(moment().hour(0).minute(0).second(0));
+        }
+    });
+
+    el.find(".datepickerfield").each(function() {
+        var opts = {
+            format: $("body").attr("data-dateformat"),
+            locale: $("body").attr("data-datetimelocale"),
+            useCurrent: false,
+            showClear: !$(this).prop("required"),
+            icons: {
+                time: 'fa fa-clock-o',
+                date: 'fa fa-calendar',
+                up: 'fa fa-chevron-up',
+                down: 'fa fa-chevron-down',
+                previous: 'fa fa-chevron-left',
+                next: 'fa fa-chevron-right',
+                today: 'fa fa-screenshot',
+                clear: 'fa fa-trash',
+                close: 'fa fa-remove'
+            },
+        };
+        $(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;
+                }
+                if ($timepicker.val() === "") {
+                    date.set({'hour': 0, 'minute': 0, 'second': 0});
+                    $timepicker.data('DateTimePicker').date(date);
+                }
+            });
+        }
+    });
+
+    el.find(".timepickerfield").each(function() {
+        var opts = {
+            format: $("body").attr("data-timeformat"),
+            locale: $("body").attr("data-datetimelocale"),
+            useCurrent: false,
+            showClear: !$(this).prop("required"),
+            icons: {
+                time: 'fa fa-clock-o',
+                date: 'fa fa-calendar',
+                up: 'fa fa-chevron-up',
+                down: 'fa fa-chevron-down',
+                previous: 'fa fa-chevron-left',
+                next: 'fa fa-chevron-right',
+                today: 'fa fa-screenshot',
+                clear: 'fa fa-trash',
+                close: 'fa fa-remove'
+            }
+        };
+        $(this).datetimepicker(opts);
+	});
+}
+
+
 $(function () {
     "use strict";
 
@@ -119,6 +201,8 @@ $(function () {
         dependency.closest('.form-group').find('input[name=' + dependency.attr("name") + ']').on("dp.change", update);
     });
 
+	form_handlers($("body"));
+
     // Lightbox
     lightbox.init();
 });

src/pretix/static/pretixpresale/scss/_forms.scss

@@ -68,3 +68,27 @@
 .panel-default>.accordion-radio+.panel-collapse>.panel-body {
   border-top: 1px solid #ddd;
 }
+
+.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;
+  }
+}

src/pretix/static/pretixpresale/scss/main.scss

@@ -1,6 +1,7 @@
 @import "_variables.scss";
 @import "../../pretixbase/scss/colors.scss";
 @import "../../bootstrap/scss/_bootstrap.scss";
+@import "../../datetimepicker/_bootstrap-datetimepicker.scss";
 @import "../../fontawesome/scss/font-awesome.scss";
 
 @import "_event.scss";