Form UX: Use splitted date/time widgets

src/pretix/control/forms/__init__.py

@@ -1,7 +1,9 @@
 import os
 
 from django import forms
+from django.utils.formats import get_format
 from django.utils.html import conditional_escape
+from django.utils.timezone import now
 from django.utils.translation import ugettext_lazy as _
 
 from ...base.forms import I18nModelForm
@@ -98,3 +100,34 @@ class SlugWidget(forms.TextInput):
         ctx = super().get_context(name, value, attrs)
         ctx['pre'] = self.prefix
         return ctx
+
+
+class SplitDateTimePickerWidget(forms.SplitDateTimeWidget):
+
+    def __init__(self, attrs=None, date_format=None, time_format=None):
+        attrs = attrs or {}
+        if 'placeholder' in attrs:
+            del attrs['placeholder']
+        date_attrs = dict(attrs)
+        time_attrs = dict(attrs)
+        date_attrs.setdefault('class', 'form-control splitdatetimepart')
+        time_attrs.setdefault('class', 'form-control splitdatetimepart')
+        date_attrs['class'] += ' datepickerfield'
+        time_attrs['class'] += ' timepickerfield'
+        time_attrs['class'] += ' timepickerfield'
+
+        df = date_format or get_format('DATE_INPUT_FORMATS')[0]
+        date_attrs['placeholder'] = now().replace(
+            year=2000, month=1, day=1, hour=0, minute=0, second=0, microsecond=0
+        ).strftime(df)
+        tf = time_format or get_format('TIME_INPUT_FORMATS')[0]
+        time_attrs['placeholder'] = now().replace(
+            year=2000, month=1, day=1, hour=0, minute=0, second=0, microsecond=0
+        ).strftime(tf)
+
+        widgets = (
+            forms.DateInput(attrs=date_attrs, format=date_format),
+            forms.TimeInput(attrs=time_attrs, format=time_format),
+        )
+        # Skip one hierarchy level
+        forms.MultiWidget.__init__(self, widgets, attrs)

src/pretix/control/forms/event.py

@@ -12,7 +12,9 @@ from pretix.base.forms import I18nModelForm, PlaceholderValidator, SettingsForm
 from pretix.base.models import Event, Organizer, TaxRule
 from pretix.base.models.event import EventMetaValue
 from pretix.base.reldate import RelativeDateField, RelativeDateTimeField
-from pretix.control.forms import ExtFileField, SlugWidget
+from pretix.control.forms import (
+    ExtFileField, SlugWidget, SplitDateTimePickerWidget,
+)
 from pretix.multidomain.urlreverse import build_absolute_uri
 from pretix.presale.style import get_fonts
 
@@ -82,14 +84,18 @@ class EventWizardBasicsForm(I18nModelForm):
             'presale_end',
             'location',
         ]
+        field_classes = {
+            'date_from': forms.SplitDateTimeField,
+            'date_to': forms.SplitDateTimeField,
+            'presale_start': forms.SplitDateTimeField,
+            'presale_end': forms.SplitDateTimeField,
+        }
         widgets = {
-            'date_from': forms.DateTimeInput(attrs={'class': 'datetimepicker'}),
-            'date_to': forms.DateTimeInput(attrs={'class': 'datetimepicker',
-                                                  'data-date-after': '#id_basics-date_from'}),
-            'presale_start': forms.DateTimeInput(attrs={'class': 'datetimepicker'}),
-            'presale_end': forms.DateTimeInput(attrs={'class': 'datetimepicker',
-                                                      'data-date-after': '#id_basics-presale_start'}),
-            'slug': SlugWidget
+            'date_from': SplitDateTimePickerWidget(),
+            'date_to': SplitDateTimePickerWidget(attrs={'data-date-after': '#id_basics-date_from_0'}),
+            'presale_start': SplitDateTimePickerWidget(),
+            'presale_end': SplitDateTimePickerWidget(attrs={'data-date-after': '#id_basics-presale_start_0'}),
+            'slug': SlugWidget,
         }
 
     def __init__(self, *args, **kwargs):
@@ -206,14 +212,19 @@ class EventUpdateForm(I18nModelForm):
             'presale_end',
             'location',
         ]
+        field_classes = {
+            'date_from': forms.SplitDateTimeField,
+            'date_to': forms.SplitDateTimeField,
+            'date_admission': forms.SplitDateTimeField,
+            'presale_start': forms.SplitDateTimeField,
+            'presale_end': forms.SplitDateTimeField,
+        }
         widgets = {
-            'date_from': forms.DateTimeInput(attrs={'class': 'datetimepicker'}),
-            'date_to': forms.DateTimeInput(attrs={'class': 'datetimepicker', 'data-date-after': '#id_date_from'}),
-            'date_admission': forms.DateTimeInput(attrs={'class': 'datetimepicker',
-                                                         'data-date-default': '#id_date_from'}),
-            'presale_start': forms.DateTimeInput(attrs={'class': 'datetimepicker'}),
-            'presale_end': forms.DateTimeInput(attrs={'class': 'datetimepicker',
-                                                      'data-date-after': '#id_presale_start'}),
+            'date_from': SplitDateTimePickerWidget(),
+            'date_to': SplitDateTimePickerWidget(attrs={'data-date-after': '#id_date_from_0'}),
+            'date_admission': SplitDateTimePickerWidget(attrs={'data-date-after': '#id_date_from_0'}),
+            'presale_start': SplitDateTimePickerWidget(),
+            'presale_end': SplitDateTimePickerWidget(attrs={'data-date-after': '#id_presale_start_0'}),
         }
 
 

src/pretix/control/forms/item.py

@@ -12,6 +12,7 @@ from pretix.base.models import (
     Item, ItemCategory, ItemVariation, Question, QuestionOption, Quota,
 )
 from pretix.base.models.items import ItemAddOn
+from pretix.control.forms import SplitDateTimePickerWidget
 
 
 class CategoryForm(I18nModelForm):
@@ -286,9 +287,13 @@ class ItemUpdateForm(I18nModelForm):
             'min_per_order',
             'checkin_attention'
         ]
+        field_classes = {
+            'available_from': forms.SplitDateTimeField,
+            'available_until': forms.SplitDateTimeField,
+        }
         widgets = {
-            'available_from': forms.DateTimeInput(attrs={'class': 'datetimepicker'}),
-            'available_until': forms.DateTimeInput(attrs={'class': 'datetimepicker'}),
+            'available_from': SplitDateTimePickerWidget(),
+            'available_until': SplitDateTimePickerWidget(attrs={'data-date-after': '#id_available_from_0'}),
         }
 
 

src/pretix/control/forms/subevents.py

@@ -5,6 +5,7 @@ from i18nfield.forms import I18nInlineFormSet
 from pretix.base.forms import I18nModelForm
 from pretix.base.models.event import SubEvent, SubEventMetaValue
 from pretix.base.models.items import SubEventItem
+from pretix.control.forms import SplitDateTimePickerWidget
 
 
 class SubEventForm(I18nModelForm):
@@ -27,13 +28,19 @@ class SubEventForm(I18nModelForm):
             'location',
             'frontpage_text'
         ]
+        field_classes = {
+            'date_from': forms.SplitDateTimeField,
+            'date_to': forms.SplitDateTimeField,
+            'date_admission': forms.SplitDateTimeField,
+            'presale_start': forms.SplitDateTimeField,
+            'presale_end': forms.SplitDateTimeField,
+        }
         widgets = {
-            'date_from': forms.DateTimeInput(attrs={'class': 'datetimepicker'}),
-            'date_to': forms.DateTimeInput(attrs={'class': 'datetimepicker', 'data-date-after': '#id_date_from'}),
-            'date_admission': forms.DateTimeInput(attrs={'class': 'datetimepicker'}),
-            'presale_start': forms.DateTimeInput(attrs={'class': 'datetimepicker'}),
-            'presale_end': forms.DateTimeInput(attrs={'class': 'datetimepicker',
-                                                      'data-date-after': '#id_presale_start'}),
+            'date_from': SplitDateTimePickerWidget(),
+            'date_to': SplitDateTimePickerWidget(attrs={'data-date-after': '#id_date_from_0'}),
+            'date_admission': SplitDateTimePickerWidget(attrs={'data-date-after': '#id_date_from_0'}),
+            'presale_start': SplitDateTimePickerWidget(),
+            'presale_end': SplitDateTimePickerWidget(attrs={'data-date-after': '#id_presale_start_0'}),
         }
 
 

src/pretix/control/forms/vouchers.py

@@ -8,6 +8,7 @@ from django.utils.translation import pgettext_lazy, ugettext_lazy as _
 
 from pretix.base.forms import I18nModelForm
 from pretix.base.models import Item, ItemVariation, Quota, Voucher
+from pretix.control.forms import SplitDateTimePickerWidget
 from pretix.control.signals import voucher_form_validation
 
 
@@ -27,8 +28,11 @@ class VoucherForm(I18nModelForm):
             'code', 'valid_until', 'block_quota', 'allow_ignore_quota', 'value', 'tag',
             'comment', 'max_usages', 'price_mode', 'subevent'
         ]
+        field_classes = {
+            'valid_until': forms.SplitDateTimeField,
+        }
         widgets = {
-            'valid_until': forms.DateTimeInput(attrs={'class': 'datetimepicker'}),
+            'valid_until': SplitDateTimePickerWidget(),
         }
 
     def __init__(self, *args, **kwargs):
@@ -218,8 +222,11 @@ class VoucherBulkForm(VoucherForm):
             'valid_until', 'block_quota', 'allow_ignore_quota', 'value', 'tag', 'comment',
             'max_usages', 'price_mode', 'subevent'
         ]
+        field_classes = {
+            'valid_until': forms.SplitDateTimeField,
+        }
         widgets = {
-            'valid_until': forms.DateTimeInput(attrs={'class': 'datetimepicker'}),
+            'valid_until': SplitDateTimePickerWidget(),
         }
         labels = {
             'max_usages': _('Maximum usages per voucher')