e-valuation · HannesClausnitzer · Jan 12, 2026 · Jan 12, 2026 · Jan 12, 2026 · Jan 12, 2026
diff --git a/LICENSE.md b/LICENSE.md
@@ -2,7 +2,7 @@
 
 The software is licensed under the MIT license. The source code includes other
 components in whole or in part, used under these licenses:
-* [Apache-2.0](https://www.apache.org/licenses/LICENSE-2.0): Bootstrap Datetimepicker, Tom Select
+* [Apache-2.0](https://www.apache.org/licenses/LICENSE-2.0): Tom Select
 * [CC-BY-4.0](https://creativecommons.org/licenses/by/4.0/legalcode): Font Awesome Icons
 * [OFL-1.1](https://scripts.sil.org/OFL): Font Awesome Fonts
 * [MIT](https://opensource.org/licenses/MIT): Bootstrap, Font Awesome Code, jQuery, Moment, Sisyphus, Sortable

diff --git a/evap/contributor/forms.py b/evap/contributor/forms.py
@@ -42,6 +42,11 @@ class Meta:
             "participants": UserModelMultipleChoiceField,
         }
 
+        widgets = {
+            "vote_start_datetime": forms.DateTimeInput(),
+            "vote_end_date": forms.DateInput(attrs={"type": "date", "class": "form-control"}),
+        }
+
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
 

diff --git a/evap/evaluation/templates/base.html b/evap/evaluation/templates/base.html
@@ -14,8 +14,12 @@
             <title>{% block title %}EvaP{% endblock %}</title>
 
             <link rel="stylesheet" href="{% static 'css/tom-select.bootstrap5.min.css' %}" />
-            <link rel="stylesheet" href="{% static 'css/bootstrap-datetimepicker.min.css' %}" />
             <link rel="stylesheet" href="{% static 'css/evap.css' %}" />
+            <link rel="stylesheet" href="{% static 'tempus-dominus/tempus-dominus.min.css' %}" />
+            <script src="{%static 'js/popper.min.js' %}"></script>
+            <script src="{% static 'tempus-dominus/tempus-dominus.min.js' %}"></script>
+            <script src="{% static 'tempus-dominus/tempus-dominus-date-init.js' %}"></script>
+            <script src="{% static 'tempus-dominus/tempus-dominus-datetime-init.js' %}"></script>
             {% if debug %}
                 <link rel="icon" type="image/png" sizes="64x64" href="{% static 'images/favicon_gray.png' %}" />
             {% else %}

diff --git a/evap/evaluation/templates/bootstrap_datetimepicker.html b/evap/evaluation/templates/bootstrap_datetimepicker.html
diff --git a/evap/evaluation/templates/django/forms/widgets/date.html b/evap/evaluation/templates/django/forms/widgets/date.html
@@ -0,0 +1,26 @@
+<head>
+    {% load static %}
+    <link rel="stylesheet" href="{% static 'tempus-dominus/tempus-dominus.min.css' %}" />
+    <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script> -->
+    <script src="{%static 'js/popper.min.js' %}"></script>
+    <script src="{% static 'tempus-dominus/tempus-dominus.min.js' %}"></script>
+    <!-- <script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/js/tempus-dominus.min.js" /> -->
+    <script src="{% static 'tempus-dominus/tempus-dominus-date-init.js' %}"></script>
+</head>
+
+<body>
+    <div class="input-group" id="datepicker1" data-td-target-input="nearest" data-td-target-toggle="nearest">
+        <input id="datetimepicker1Input" 
+            type="text" 
+            class="form-control" 
+            data-td-target="#datetimepicker1"
+            name="{{ widget.name }}"
+            {% if widget.value and widget.value != 'None' %} 
+                value="{{ widget.value }}"{% endif %}
+            {% include 'django/forms/widgets/attrs.html' %}
+        />
+        <span class="input-group-text" data-td-target="#datetimepicker1" data-td-toggle="datetimepicker">
+            <i class="fas fa-calendar"></i>
+        </span>
+    </div>
+</body>
diff --git a/evap/evaluation/templates/django/forms/widgets/datetime.html b/evap/evaluation/templates/django/forms/widgets/datetime.html
@@ -0,0 +1,26 @@
+<head>
+    {% load static %}
+    <link rel="stylesheet" href="{% static 'tempus-dominus/tempus-dominus.min.css' %}" />
+    <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script> -->
+    <script src="{%static 'js/popper.min.js' %}"></script>
+    <script src="{% static 'tempus-dominus/tempus-dominus.min.js' %}"></script>
+    <!-- <script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/js/tempus-dominus.min.js" /> -->
+    <script src="{% static 'tempus-dominus/tempus-dominus-datetime-init.js' %}"></script>
+</head>
+
+<body>
+    <div class="input-group" id="datetimepicker1" data-td-target-input="nearest" data-td-target-toggle="nearest">
+        <input id="datetimepicker1Input" 
+            type="text" 
+            class="form-control" 
+            data-td-target="#datetimepicker1"
+            name="{{ widget.name }}"
+            {% if widget.value and widget.value != 'None' %} 
+                value="{{ widget.value }}"{% endif %}
+            {% include 'django/forms/widgets/attrs.html' %}
+        />
+        <span class="input-group-text" data-td-target="#datetimepicker1" data-td-toggle="datetimepicker">
+            <i class="fas fa-calendar"></i>
+        </span>
+    </div>
+</body>
diff --git a/evap/evaluation/templates/evap_evaluation_edit_js.html b/evap/evaluation/templates/evap_evaluation_edit_js.html
@@ -72,7 +72,3 @@
         }
     }
 </script>
-
-{% block additional_javascript %}
-{% include 'bootstrap_datetimepicker.html' %}
-{% endblock %}
diff --git a/evap/rewards/forms.py b/evap/rewards/forms.py
@@ -15,6 +15,10 @@ class RewardPointRedemptionEventForm(forms.ModelForm):
     class Meta:
         model = RewardPointRedemptionEvent
         fields = ("name_en", "name_de", "date", "redeem_end_date", "step")
+        widgets = {
+            "date": forms.DateInput(attrs={"type": "date", "class": "form-control"}),
+            "redeem_end_date": forms.DateInput(attrs={"type": "date", "class": "form-control"}),
+        }
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)

diff --git a/evap/rewards/templates/rewards_reward_point_redemption_event_form.html b/evap/rewards/templates/rewards_reward_point_redemption_event_form.html
@@ -22,7 +22,3 @@
         </div>
     </form>
 {% endblock %}
-
- {% block additional_javascript %}
- {% include 'bootstrap_datetimepicker.html' %}
- {% endblock %}
diff --git a/evap/staff/forms.py b/evap/staff/forms.py
@@ -99,8 +99,19 @@ def clean(self):
 class ImportForm(forms.Form):
     use_required_attribute = False
 
-    vote_start_datetime = forms.DateTimeField(label=_("Start of evaluation"), localize=True, required=False)
-    vote_end_date = forms.DateField(label=_("End of evaluation"), localize=True, required=False)
+    vote_start_datetime = forms.DateTimeField(
+        label=_("Start of evaluation"),
+        widget=forms.DateTimeInput(),
+        localize=True,
+        required=False,
+    )
+
+    vote_end_date = forms.DateField(
+        label=_("End of evaluation"),
+        widget=forms.DateInput(attrs={"type": "date", "class": "form-control"}),
+        localize=True,
+        required=False,
+    )
 
     excel_file = forms.FileField(
         label=_("Excel file"),
@@ -283,8 +294,18 @@ def __init__(self, *args, **kwargs):
 
 class CourseCopyForm(CourseFormMixin, forms.ModelForm):  # type: ignore[misc]
     semester = forms.ModelChoiceField(Semester.objects.all())
-    vote_start_datetime = forms.DateTimeField(label=_("Start of evaluations"), localize=True)
-    vote_end_date = forms.DateField(label=_("Last day of evaluations"), localize=True)
+
+    vote_start_datetime = forms.DateTimeField(
+        label=_("Start of evaluations"),
+        localize=True,
+        widget=forms.DateTimeInput(),
+    )
+
+    vote_end_date = forms.DateField(
+        label=_("Last day of evaluations"),
+        localize=True,
+        widget=forms.DateInput(attrs={"type": "date", "class": "form-control"}),
+    )
 
     field_order = ["semester"]
 
@@ -401,6 +422,10 @@ class Meta:
         field_classes = {
             "participants": UserModelMultipleChoiceField,
         }
+        widgets = {
+            "vote_start_datetime": forms.DateTimeInput(),
+            "vote_end_date": forms.DateInput(attrs={"type": "date", "class": "form-control"}),
+        }
 
     def __init__(self, *args, requires_decided_main_language=False, **kwargs):
         semester = kwargs.pop("semester", None)

diff --git a/evap/staff/templates/staff_course_copyform.html b/evap/staff/templates/staff_course_copyform.html
@@ -38,7 +38,3 @@ <h5 class="card-title">{% translate 'Evaluations that will be copied' %}</h5>
         </div>
     </form>
 {% endblock %}
-
-{% block additional_javascript %}
-    {% include 'bootstrap_datetimepicker.html' %}
-{% endblock %}
diff --git a/evap/staff/templates/staff_semester_import.html b/evap/staff/templates/staff_semester_import.html
@@ -47,7 +47,6 @@ <h3>{% translate 'Import semester data' %}</h3>
 {% endblock %}
 
 {% block additional_javascript %}
-    {% include 'bootstrap_datetimepicker.html' %}
     <script type="module">
         import { copyHeaders } from "{% static 'js/copy-to-clipboard.js' %}";
 

diff --git a/evap/static/css/bootstrap-datetimepicker.min.css b/evap/static/css/bootstrap-datetimepicker.min.css
diff --git a/evap/static/js/bootstrap-datetimepicker.min.js b/evap/static/js/bootstrap-datetimepicker.min.js
diff --git a/evap/static/js/popper.min.js b/evap/static/js/popper.min.js
diff --git a/evap/static/scss/_adjustments.scss b/evap/static/scss/_adjustments.scss
@@ -110,20 +110,6 @@ $alert-colors: (
     padding-top: 0.25rem;
 }
 
-// datetimepicker adjustments
-.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
-    width: 33em;
-
-    .datepicker {
-        flex: 0 0 60%;
-        max-width: 60%;
-    }
-
-    .timepicker {
-        flex: 0 0 40%;
-    }
-}
-
 // tomselect adjustments
 .ts-wrapper.multi .ts-control > div.active {
    background-color: $component-active-bg;

diff --git a/evap/static/scss/_components.scss b/evap/static/scss/_components.scss
@@ -23,3 +23,4 @@
 @import "components/staff-index";
 @import "components/notebook";
 @import "components/range-slider";
+@import "components/datetime-picker";
diff --git a/evap/static/scss/components/_datetime-picker.scss b/evap/static/scss/components/_datetime-picker.scss
@@ -0,0 +1,6 @@
+// fix datetimepicker time selector width
+.time-container-clock,
+.time-container-hour,
+.time-container-minute {
+    width: 100%;
+}
diff --git a/evap/static/tempus-dominus/tempus-dominus-date-init.js b/evap/static/tempus-dominus/tempus-dominus-date-init.js
@@ -0,0 +1,29 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const picker = new tempusDominus.TempusDominus(document.getElementById('datepicker1'), {
+        display: {
+            theme: 'light',
+            icons: {
+                time: 'fa fa-clock',
+                date: 'fa fa-calendar',
+                up: 'fa fa-arrow-up',
+                down: 'fa fa-arrow-down',
+                previous: 'fa fa-chevron-left',
+                next: 'fa fa-chevron-right',
+                today: 'fa fa-calendar-check',
+                clear: 'fa fa-trash',
+                close: 'fa fa-times'
+            },
+            components: {
+                clock: false,   // Hides the clock toggle button
+                hours: false,   // Hides the hour picker
+                minutes: false, // Hides the minute picker
+                seconds: false  // (Already false by default, but good to ensure)
+            },
+        },
+        localization: {
+            format: 'yyyy-MM-dd',
+            startOfTheWeek: 1,
+            hourCycle: 'h23'
+        }
+    });
+});