Fix #55 -- Datetime picker for input fields

.gitattributes

@@ -2,3 +2,4 @@ src/static/fontawesome/* linguist-vendored
 src/static/lightbox/* linguist-vendored
 src/static/typeahead/* linguist-vendored
 src/static/moment/* linguist-vendored
+src/static/datetimepicker/* linguist-vendored

src/pretix/control/context.py

@@ -2,6 +2,7 @@ from django.conf import settings
 from django.core.urlresolvers import Resolver404, get_script_prefix, resolve
 
 from .signals import html_head, nav_event
+from .utils.i18n import get_javascript_format, get_moment_locale
 
 
 def contextprocessor(request):
@@ -30,4 +31,8 @@ def contextprocessor(request):
         for receiver, response in nav_event.send(request.event, request=request):
             _nav_event += response
     ctx['nav_event'] = _nav_event
+
+    ctx['js_datetime_format'] = get_javascript_format('DATETIME_INPUT_FORMATS')
+    ctx['js_locale'] = get_moment_locale()
+
     return ctx

src/pretix/control/forms/event.py

@@ -86,6 +86,12 @@ class EventUpdateForm(I18nModelForm):
             'presale_start',
             'presale_end',
         ]
+        widgets = {
+            'date_from': forms.DateTimeInput(attrs={'class': 'datetimepicker'}),
+            'date_to': forms.DateTimeInput(attrs={'class': 'datetimepicker'}),
+            'presale_start': forms.DateTimeInput(attrs={'class': 'datetimepicker'}),
+            'presale_end': forms.DateTimeInput(attrs={'class': 'datetimepicker'}),
+        }
 
 
 class EventSettingsForm(SettingsForm):
@@ -113,7 +119,8 @@ class EventSettingsForm(SettingsForm):
         label=_('Last date of modifications'),
         help_text=_("The last date users can modify details of their orders, such as attendee names or "
                     "answers to questions."),
-        required=False
+        required=False,
+        widget=forms.DateTimeInput(attrs={'class': 'datetimepicker'}),
     )
     timezone = forms.ChoiceField(
         choices=((a, a) for a in common_timezones),
@@ -188,7 +195,8 @@ class PaymentSettingsForm(SettingsForm):
         label=_('Last date of payments'),
         help_text=_("The last date any payments are accepted. This has precedence over the number of "
                     "days configured above."),
-        required=False
+        required=False,
+        widget=forms.DateTimeInput(attrs={'class': 'datetimepicker'})
     )
     payment_term_expire_automatically = forms.BooleanField(
         label=_('Automatically expire unpaid orders'),
@@ -439,7 +447,8 @@ class TicketSettingsForm(SettingsForm):
     ticket_download_date = forms.DateTimeField(
         label=_("Download date"),
         help_text=_("Ticket download will be offered after this date."),
-        required=True
+        required=True,
+        widget=forms.DateTimeInput(attrs={'class': 'datetimepicker'})
     )
 
     def prepare_fields(self):

src/pretix/control/forms/item.py

@@ -147,6 +147,10 @@ class ItemUpdateForm(I18nModelForm):
             'hide_without_voucher',
             'allow_cancel'
         ]
+        widgets = {
+            'available_from': forms.DateTimeInput(attrs={'class': 'datetimepicker'}),
+            'available_until': forms.DateTimeInput(attrs={'class': 'datetimepicker'}),
+        }
 
 
 class ItemVariationForm(I18nModelForm):

src/pretix/control/forms/orders.py

@@ -11,6 +11,9 @@ class ExtendForm(I18nModelForm):
     class Meta:
         model = Order
         fields = ['expires']
+        widgets = {
+            'expires': forms.DateTimeInput(attrs={'class': 'datetimepicker'}),
+        }
 
 
 class ExporterForm(forms.Form):

src/pretix/control/forms/vouchers.py

@@ -25,6 +25,9 @@ class VoucherForm(I18nModelForm):
             'code', 'valid_until', 'block_quota', 'allow_ignore_quota', 'price', 'tag',
             'comment'
         ]
+        widgets = {
+            'valid_until': forms.DateTimeInput(attrs={'class': 'datetimepicker'}),
+        }
 
     def __init__(self, *args, **kwargs):
         instance = kwargs.get('instance')
@@ -177,6 +180,9 @@ class VoucherBulkForm(VoucherForm):
         fields = [
             'valid_until', 'block_quota', 'allow_ignore_quota', 'price', 'tag', 'comment'
         ]
+        widgets = {
+            'valid_until': forms.DateTimeInput(attrs={'class': 'datetimepicker'}),
+        }
 
     def clean(self):
         data = super().clean()

src/pretix/control/templates/pretixcontrol/base.html

@@ -15,6 +15,8 @@
             <script type="text/javascript" src="{% static "js/jquery.formset.js" %}"></script>
             <script type="text/javascript" src="{% static "typeahead/typeahead.bundle.js" %}"></script>
             <script type="text/javascript" src="{% static "bootstrap/js/bootstrap.js" %}"></script>
+            <script type="text/javascript" src="{% static "moment/moment-with-locales.js" %}"></script>
+            <script type="text/javascript" src="{% static "datetimepicker/bootstrap-datetimepicker.js" %}"></script>
             <script type="text/javascript" src="{% static "pretixcontrol/js/metisMenu.min.js" %}"></script>
             <script type="text/javascript" src="{% static "pretixcontrol/js/sb-admin-2.js" %}"></script>
 		    <script type="text/javascript" src="{% static "pretixcontrol/js/ui/main.js" %}"></script>
@@ -23,7 +25,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="icon" href="{% static "pretixbase/img/favicon.ico" %}">
 	</head>
-	<body>
+	<body data-datetimeformat="{{ js_datetime_format }}" data-datetimelocale={{ js_locale }}>
         <div id="#wrapper">
             <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
                 <div class="navbar-header">

src/pretix/control/utils/i18n.py

@@ -0,0 +1,65 @@
+# Inspired by https://github.com/asaglimbeni/django-datetime-widget/blob/master/datetimewidget/widgets.py
+# Copyright (c) 2013, Alfredo Saglimbeni (BSD license)
+import re
+
+from django.utils import translation
+from django.utils.formats import get_format
+
+from pretix import settings
+
+date_conversion_to_moment = {
+    '%a': 'ddd',
+    '%A': 'dddd',
+    '%w': 'd',
+    '%d': 'DD',
+    '%b': 'MMM',
+    '%B': 'MMMM',
+    '%m': 'MM',
+    '%y': 'YY',
+    '%Y': 'YYYY',
+    '%H': 'HH',
+    '%I': 'hh',
+    '%p': 'a',
+    '%M': 'mm',
+    '%S': 'ss',
+    '%f': 'SSSSSS',
+    '%z': 'ZZ',
+    '%Z': 'zz',
+    '%j': 'DDDD',
+    '%U': 'ww',  # fuzzy translation
+    '%W': 'WW',
+    '%c': '',
+    '%x': '',
+    '%X': ''
+}
+
+moment_locales = {
+    'af', 'az', 'bs', 'de-at', 'en-gb', 'et', 'fr-ch', 'hi', 'it', 'ko', 'me', 'ms-my', 'pa-in', 'se', 'sr', 'th',
+    'tzm-latn', 'zh-hk', 'ar', 'be', 'ca', 'de', 'en-ie', 'eu', 'fr', 'hr', 'ja', 'ky', 'mi', 'my', 'pl', 'si', 'ss',
+    'tlh', 'uk', 'zh-tw', 'ar-ly', 'bg', 'cs', 'dv', 'en-nz', 'fa', 'fy', 'hu', 'jv', 'lb', 'mk', 'nb', 'pt-br', 'sk',
+    'sv', 'tl-ph', 'uz', 'ar-ma', 'bn', 'cv', 'el', 'eo', 'fi', 'gd', 'hy-am', 'ka', 'lo', 'ml', 'ne', 'pt', 'sl', 'sw',
+    'tr', 'vi', 'ar-sa', 'bo', 'cy', 'en-au', 'es-do', 'fo', 'gl', 'id', 'kk', 'lt', 'mr', 'nl', 'ro', 'sq', 'ta',
+    'tzl', 'x-pseudo', 'ar-tn', 'br', 'da', 'en-ca', 'es', 'fr-ca', 'he', 'is', 'km', 'lv', 'ms', 'nn', 'ru', 'sr-cyrl',
+    'te', 'tzm', 'zh-cn',
+}
+
+toJavascript_re = re.compile(r'(?<!\w)(' + '|'.join(date_conversion_to_moment.keys()) + r')\b')
+
+
+def get_javascript_format(format_name):
+    f = get_format(format_name)[0]
+    return toJavascript_re.sub(
+        lambda x: date_conversion_to_moment[x.group()],
+        f
+    )
+
+
+def get_moment_locale(locale=None):
+    cur_lang = locale or translation.get_language()
+    if cur_lang in moment_locales:
+        return cur_lang
+    if '-' in cur_lang or '_' in cur_lang:
+        main = cur_lang.replace("_", "-").split("-")[0]
+        if main in moment_locales:
+            return main
+    return settings.LANGUAGE_CODE

src/static/datetimepicker/_bootstrap-datetimepicker.scss

@@ -0,0 +1,344 @@
+/*!
+ * Datetimepicker for Bootstrap 3
+ * ! version : 4.7.14
+ * https://github.com/Eonasdan/bootstrap-datetimepicker/
+ */
+$bs-datetimepicker-timepicker-font-size: 1.2em !default;
+$bs-datetimepicker-active-bg: $btn-primary-bg !default;
+$bs-datetimepicker-active-color: $btn-primary-color !default;
+$bs-datetimepicker-border-radius: $border-radius-base !default;
+$bs-datetimepicker-btn-hover-bg: $gray-lighter !default;
+$bs-datetimepicker-disabled-color: $gray-light !default;
+$bs-datetimepicker-alternate-color: $gray-light !default;
+$bs-datetimepicker-secondary-border-color: #ccc !default;
+$bs-datetimepicker-secondary-border-color-rgba: rgba(0, 0, 0, 0.2) !default;
+$bs-datetimepicker-primary-border-color: white !default;
+$bs-datetimepicker-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !default;
+
+.bootstrap-datetimepicker-widget {
+    list-style: none;
+
+    &.dropdown-menu {
+        margin: 2px 0;
+        padding: 4px;
+        width: 19em;
+
+        &.timepicker-sbs {
+            @media (min-width: $screen-sm-min) {
+                width: 38em;
+            }
+
+            @media (min-width: $screen-md-min) {
+                width: 38em;
+            }
+
+            @media (min-width: $screen-lg-min) {
+                width: 38em;
+            }
+        }
+
+        &:before, &:after {
+            content: '';
+            display: inline-block;
+            position: absolute;
+        }
+
+        &.bottom {
+            &:before {
+                border-left: 7px solid transparent;
+                border-right: 7px solid transparent;
+                border-bottom: 7px solid $bs-datetimepicker-secondary-border-color;
+                border-bottom-color: $bs-datetimepicker-secondary-border-color-rgba;
+                top: -7px;
+                left: 7px;
+            }
+
+            &:after {
+                border-left: 6px solid transparent;
+                border-right: 6px solid transparent;
+                border-bottom: 6px solid $bs-datetimepicker-primary-border-color;
+                top: -6px;
+                left: 8px;
+            }
+        }
+
+        &.top {
+            &:before {
+                border-left: 7px solid transparent;
+                border-right: 7px solid transparent;
+                border-top: 7px solid $bs-datetimepicker-secondary-border-color;
+                border-top-color: $bs-datetimepicker-secondary-border-color-rgba;
+                bottom: -7px;
+                left: 6px;
+            }
+
+            &:after {
+                border-left: 6px solid transparent;
+                border-right: 6px solid transparent;
+                border-top: 6px solid $bs-datetimepicker-primary-border-color;
+                bottom: -6px;
+                left: 7px;
+            }
+        }
+
+        &.pull-right {
+            &:before {
+                left: auto;
+                right: 6px;
+            }
+
+            &:after {
+                left: auto;
+                right: 7px;
+            }
+        }
+    }
+
+    .list-unstyled {
+        margin: 0;
+    }
+
+    a[data-action] {
+        padding: 6px 0;
+    }
+
+    a[data-action]:active {
+        box-shadow: none;
+    }
+
+    .timepicker-hour, .timepicker-minute, .timepicker-second {
+        width: 54px;
+        font-weight: bold;
+        font-size: $bs-datetimepicker-timepicker-font-size;
+        margin: 0;
+    }
+
+    button[data-action] {
+        padding: 6px;
+    }
+
+    .btn[data-action="incrementHours"]::after {
+        @extend .sr-only;
+        content: "Increment Hours";
+    }
+
+    .btn[data-action="incrementMinutes"]::after {
+        @extend .sr-only;
+        content: "Increment Minutes";
+    }
+
+    .btn[data-action="decrementHours"]::after {
+        @extend .sr-only;
+        content: "Decrement Hours";
+    }
+
+    .btn[data-action="decrementMinutes"]::after {
+        @extend .sr-only;
+        content: "Decrement Minutes";
+    }
+
+    .btn[data-action="showHours"]::after {
+        @extend .sr-only;
+        content: "Show Hours";
+    }
+
+    .btn[data-action="showMinutes"]::after {
+        @extend .sr-only;
+        content: "Show Minutes";
+    }
+
+    .btn[data-action="togglePeriod"]::after {
+        @extend .sr-only;
+        content: "Toggle AM/PM";
+    }
+
+    .btn[data-action="clear"]::after {
+        @extend .sr-only;
+        content: "Clear the picker";
+    }
+
+    .btn[data-action="today"]::after {
+        @extend .sr-only;
+        content: "Set the date to today";
+    }
+
+    .picker-switch {
+        text-align: center;
+
+        &::after {
+            @extend .sr-only;
+            content: "Toggle Date and Time Screens";
+        }
+
+        td {
+            padding: 0;
+            margin: 0;
+            height: auto;
+            width: auto;
+            line-height: inherit;
+
+            span {
+                line-height: 2.5;
+                height: 2.5em;
+                width: 100%;
+            }
+        }
+    }
+
+    table {
+        width: 100%;
+        margin: 0;
+
+
+        & td,
+        & th {
+            text-align: center;
+            border-radius: $bs-datetimepicker-border-radius;
+        }
+
+        & th {
+            height: 20px;
+            line-height: 20px;
+            width: 20px;
+
+            &.picker-switch {
+                width: 145px;
+            }
+
+            &.disabled,
+            &.disabled:hover {
+                background: none;
+                color: $bs-datetimepicker-disabled-color;
+                cursor: not-allowed;
+            }
+
+            &.prev::after {
+                @extend .sr-only;
+                content: "Previous Month";
+            }
+
+            &.next::after {
+                @extend .sr-only;
+                content: "Next Month";
+            }
+        }
+
+        & thead tr:first-child th {
+            cursor: pointer;
+
+            &:hover {
+                background: $bs-datetimepicker-btn-hover-bg;
+            }
+        }
+
+        & td {
+            height: 54px;
+            line-height: 54px;
+            width: 54px;
+
+            &.cw {
+                font-size: .8em;
+                height: 20px;
+                line-height: 20px;
+                color: $bs-datetimepicker-alternate-color;
+            }
+
+            &.day {
+                height: 20px;
+                line-height: 20px;
+                width: 20px;
+            }
+
+            &.day:hover,
+            &.hour:hover,
+            &.minute:hover,
+            &.second:hover {
+                background: $bs-datetimepicker-btn-hover-bg;
+                cursor: pointer;
+            }
+
+            &.old,
+            &.new {
+                color: $bs-datetimepicker-alternate-color;
+            }
+
+            &.today {
+                position: relative;
+
+                &:before {
+                    content: '';
+                    display: inline-block;
+                    border: solid transparent;
+                    border-width: 0 0 7px 7px;
+                    border-bottom-color: $bs-datetimepicker-active-bg;
+                    border-top-color: $bs-datetimepicker-secondary-border-color-rgba;
+                    position: absolute;
+                    bottom: 4px;
+                    right: 4px;
+                }
+            }
+
+            &.active,
+            &.active:hover {
+                background-color: $bs-datetimepicker-active-bg;
+                color: $bs-datetimepicker-active-color;
+                text-shadow: $bs-datetimepicker-text-shadow;
+            }
+
+            &.active.today:before {
+                border-bottom-color: #fff;
+            }
+
+            &.disabled,
+            &.disabled:hover {
+                background: none;
+                color: $bs-datetimepicker-disabled-color;
+                cursor: not-allowed;
+            }
+
+            span {
+                display: inline-block;
+                width: 54px;
+                height: 54px;
+                line-height: 54px;
+                margin: 2px 1.5px;
+                cursor: pointer;
+                border-radius: $bs-datetimepicker-border-radius;
+
+                &:hover {
+                    background: $bs-datetimepicker-btn-hover-bg;
+                }
+
+                &.active {
+                    background-color: $bs-datetimepicker-active-bg;
+                    color: $bs-datetimepicker-active-color;
+                    text-shadow: $bs-datetimepicker-text-shadow;
+                }
+
+                &.old {
+                    color: $bs-datetimepicker-alternate-color;
+                }
+
+                &.disabled,
+                &.disabled:hover {
+                    background: none;
+                    color: $bs-datetimepicker-disabled-color;
+                    cursor: not-allowed;
+                }
+            }
+        }
+    }
+
+    &.usetwentyfour {
+        td.hour {
+            height: 27px;
+            line-height: 27px;
+        }
+    }
+}
+
+.input-group.date {
+    & .input-group-addon {
+        cursor: pointer;
+    }
+}

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

@@ -103,4 +103,24 @@ $(function () {
     });
 
     $("#ajaxerr").on("click", ".ajaxerr-close", ajaxErrDialog.hide);
+    
+    $(".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'
+            }
+        });
+    });
 });

src/static/pretixcontrol/scss/main.scss

@@ -4,6 +4,7 @@ $fa-font-path: static("fontawesome/fonts");
 @import "../../fontawesome/scss/font-awesome.scss";
 @import "../../typeahead/typeahead.css";
 @import "../css/metisMenu.min.css";
+@import "../../datetimepicker/_bootstrap-datetimepicker.scss";
 @import "_sb-admin-2.scss";
 @import "_forms.scss";
 @import "_flags.scss";