CGM_Public/pretix_original
2
0
Fork 1
mirror of https://github.com/pretix/pretix.git synced 2026-05-04 15:04:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix #55 -- Datetime picker for input fields

Browse Source
This commit is contained in:
Raphael Michel
2016-09-17 22:33:39 +02:00
parent ecef64c035
commit f79e1adf25
13 changed files with 3087 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/pretix/control/context.py
View File

@@ -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

15
src/pretix/control/forms/event.py
View File

@@ -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):

4
src/pretix/control/forms/item.py
View File

@@ -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):

3
src/pretix/control/forms/orders.py
View File

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

6
src/pretix/control/forms/vouchers.py
View File

@@ -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()

4
src/pretix/control/templates/pretixcontrol/base.html
View File

@@ -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">

0
src/pretix/control/utils/__init__.py Normal file
View File

65
src/pretix/control/utils/i18n.py Normal file
View File

@@ -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

344
src/static/datetimepicker/_bootstrap-datetimepicker.scss vendored Normal file
View File

@@ -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;
}
}

2623
src/static/datetimepicker/bootstrap-datetimepicker.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

20
src/static/pretixcontrol/js/ui/main.js
View File

@@ -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'
}
});
});
});

1
src/static/pretixcontrol/scss/main.scss
View File

@@ -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";