From 478218e26c9c43178674ee183988a7284908fed8 Mon Sep 17 00:00:00 2001
From: Splines <dominic-plein@gmx.de>
Date: Tue, 4 Jul 2023 21:08:18 +0200
Subject: [PATCH 01/25] Uninstall old Datetimepicker

---
 package.json |  1 -
 yarn.lock    | 24 ------------------------
 2 files changed, 25 deletions(-)

diff --git a/package.json b/package.json
index 9641db02d..6f080f1ab 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,6 @@
     "css-loader": "^5.2.7",
     "friendly-challenge": "^0.9.12",
     "imports-loader": "^1.2.0",
-    "jquery-datetimepicker": "^2.5.21",
     "moment": "^2.29.4",
     "regenerator-runtime": "^0.13.11",
     "sass": "^1.63.4",
diff --git a/yarn.lock b/yarn.lock
index 90dd51384..5bfce2f6f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4232,25 +4232,6 @@ jest-worker@^26.5.0:
     merge-stream "^2.0.0"
     supports-color "^7.0.0"
 
-jquery-datetimepicker@^2.5.21:
-  version "2.5.21"
-  resolved "https://registry.yarnpkg.com/jquery-datetimepicker/-/jquery-datetimepicker-2.5.21.tgz#00c388a78df2732fedfdb5c6529b6e84d53e0235"
-  integrity sha512-wDTpZ4f1PWd1XGaIIE0n6jLynlm+akBJ7/NjaB1bk2UJSS593CHJPZ3+FNEXoyvNVUeBlBC0oX6WTfCyfUhX/w==
-  dependencies:
-    jquery ">= 1.7.2"
-    jquery-mousewheel ">= 3.1.13"
-    php-date-formatter "^1.3.4"
-
-"jquery-mousewheel@>= 3.1.13":
-  version "3.1.13"
-  resolved "https://registry.yarnpkg.com/jquery-mousewheel/-/jquery-mousewheel-3.1.13.tgz#06f0335f16e353a695e7206bf50503cb523a6ee5"
-  integrity sha512-GXhSjfOPyDemM005YCEHvzrEALhKDIswtxSHSR2e4K/suHVJKJxxRCGz3skPjNxjJjQa9AVSGGlYjv1M3VLIPg==
-
-"jquery@>= 1.7.2":
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.7.0.tgz#fe2c01a05da500709006d8790fe21c8a39d75612"
-  integrity sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ==
-
 js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -5170,11 +5151,6 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-php-date-formatter@^1.3.4:
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/php-date-formatter/-/php-date-formatter-1.3.6.tgz#6d67359da890c742005fa89d20be3ded31cc1d2a"
-  integrity sha512-/CKsZYmAwXeNh8KpD/CF9hcJDZNhdb2ICN8+qgqOt5sUu9liZIxZ1R284TNj5MtPt8RjG5X0xn6WSqL0kcKMBg==
-
 picocolors@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"

From 6b93a134c61c4ad0c9aabc1dffbb9983df161afd Mon Sep 17 00:00:00 2001
From: Splines <dominic-plein@gmx.de>
Date: Tue, 4 Jul 2023 21:08:54 +0200
Subject: [PATCH 02/25] Remove old import hack for Datetimepicker

---
 app/javascript/packs/application.js | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 82d42fcd6..5c9da133f 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -15,23 +15,10 @@
 // const images = require.context('../images', true)
 // const imagePath = (name) => images(name, true)
 
-// JQuery Datetimepicker fix
-// import '...' does not work, random names for the import don't work either
-// we use "css" and "myLib" imports although these strings do not show up anywhere
-// in our codebase. This is just a hack to make the imports-loader work. Maybe it has
-// to do with how webpacker resolves the imports or how jquery-datetimepicker exports
-// its module.
-import css from 'jquery-datetimepicker/build/jquery.datetimepicker.min.css'
-import myLib from 'imports-loader?imports=default%20jquery%20$!./../../../node_modules/jquery-datetimepicker/build/jquery.datetimepicker.full.min.js'
-
-import moment from "moment"; // require
-window.moment = moment;
 import {
     WidgetInstance
 } from "friendly-challenge";
 var friendlyChallengeWidgetInstance = WidgetInstance
-$.datetimepicker.setLocale('de');
-
 
 document.addEventListener("turbolinks:load", function () {
     var doneCallback, element, options, widget;

From 2e8bdcb52c9e46ab359c1e55d42d93cb261ef351 Mon Sep 17 00:00:00 2001
From: Splines <dominic-plein@gmx.de>
Date: Tue, 4 Jul 2023 21:09:45 +0200
Subject: [PATCH 03/25] Try out Tempus Dominus datetimepicker on assignments

---
 app/assets/javascripts/datetimepicker.js | 12 ++++++++++
 app/views/assignments/_form.html.erb     | 28 ++++++++++++++++++++----
 app/views/layouts/_head.html.erb         | 27 +++++++++++++++++++++++
 3 files changed, 63 insertions(+), 4 deletions(-)
 create mode 100644 app/assets/javascripts/datetimepicker.js

diff --git a/app/assets/javascripts/datetimepicker.js b/app/assets/javascripts/datetimepicker.js
new file mode 100644
index 000000000..4ff5cc6a9
--- /dev/null
+++ b/app/assets/javascripts/datetimepicker.js
@@ -0,0 +1,12 @@
+// see https://getdatepicker.com
+console.log('trying to import datetimepicker');
+$('#assignment-picker').tempusDominus({
+    display: {
+        sideBySide: true
+    },
+    localization: {
+        startOfTheWeek: 1,
+        format: 'yyyy-MM-dd HH:mm',
+        hourCycle: 'h23'
+    }
+});
diff --git a/app/views/assignments/_form.html.erb b/app/views/assignments/_form.html.erb
index 8377dc5f0..f8ded9f8f 100644
--- a/app/views/assignments/_form.html.erb
+++ b/app/views/assignments/_form.html.erb
@@ -1,3 +1,5 @@
+<%= javascript_include_tag 'datetimepicker' %>
+
 <div class="list-group-item assignmentRow"
        data-id="<%= assignment.id.to_i %>">
   <%= form_with model: assignment do |f| %>
@@ -10,15 +12,33 @@
              id="assignment-title-error">
         </div>
       </div>
+
       <div class="form-group col-2">
-        <%= f.text_field :deadline,
-                         class: 'form-control',
-                         autocomplete: 'off',
-                         id: "assignment_deadline_#{assignment.id}" %>
+        <div class="col-sm-12" id="htmlTarget">
+          <div
+            class="input-group log-event td-picker"
+            id="assignment-picker"
+            data-td-target-input="nearest"
+            data-td-target-toggle="nearest">
+            <%= f.text_field :deadline,
+                id: 'assignment-picker-input',
+                class: 'form-control',
+                'data-td-target': '#assignment-picker' %>
+            <span
+              class="input-group-text"
+              data-td-target="#assignment-picker"
+              data-td-toggle="datetimepicker">
+              <i class="fas fa-calendar"></i>
+            </span>
+          </div>
+        </div>
+
         <div class="invalid-feedback"
              id="assignment-deadline-error">
         </div>
       </div>
+
+
       <div class="form-group col-2">
         <%= f.select :medium_id,
                      options_for_select(Medium.where(teachable: assignment.lecture,
diff --git a/app/views/layouts/_head.html.erb b/app/views/layouts/_head.html.erb
index 64336b5d0..d1147a46d 100644
--- a/app/views/layouts/_head.html.erb
+++ b/app/views/layouts/_head.html.erb
@@ -34,6 +34,31 @@
         integrity="sha256-rADF2WO6GbkNb5O9gqHdjQ/XhrfnXDtPdHdRe5KQmek="
         crossorigin="anonymous">
 </script>
+
+<!-- Font awesome is not required provided you change the icon options -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/solid.min.js"></script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/fontawesome.min.js"></script>
+<!-- end FA -->
+
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" crossorigin="anonymous">
+</script>
+<script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.7.10/dist/js/tempus-dominus.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.7.10/dist/js/jQuery-provider.js"></script>
+
+<link rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.7.10/dist/css/tempus-dominus.css"
+/>
+
+
+<%# Datetimepicker (Tempus Dominus) %>
+<!-- Popperjs (needed for Tempus Dominus) -->
+<%# <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" crossorigin="anonymous"></script>
+<!-- Tempus Dominus JavaScript -->
+<script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.7.10/dist/js/tempus-dominus.min.js" crossorigin="anonymous"></script>
+<!-- Tempus Dominus Styles -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.7.10/dist/css/tempus-dominus.min.css" crossorigin="anonymous"> %>
+
 <script src="https://cdn.jsdelivr.net/npm/sanitize-html@1.27.0/dist/sanitize-html.min.js" integrity="sha256-+Tha6wUu+wzAOUzilJ7AmF4OXc3CsY1aMsWopnCVwb4=" crossorigin="anonymous"></script>
 <script defer
         src="https://cdn.jsdelivr.net/npm/katex@0.13.9/dist/katex.min.js"
@@ -59,6 +84,8 @@
   </script>
 <![endif]-->
 
+
+
 <meta name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no">
 

From 22abf4ffe87e7bffe679036abbc6466296bafc89 Mon Sep 17 00:00:00 2001
From: Splines <dominic-plein@gmx.de>
Date: Tue, 11 Jul 2023 19:20:13 +0200
Subject: [PATCH 04/25] Show datetimepicker when clicking in text field

Note that the datetimepicker is not really accessible right now.
Hopefully, there will be some improvement related to this soon.
See here: https://github.com/Eonasdan/tempus-dominus/issues/2390
---
 app/assets/javascripts/datetimepicker.js | 5 ++++-
 app/views/assignments/_form.html.erb     | 4 +++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/datetimepicker.js b/app/assets/javascripts/datetimepicker.js
index 4ff5cc6a9..8726e2842 100644
--- a/app/assets/javascripts/datetimepicker.js
+++ b/app/assets/javascripts/datetimepicker.js
@@ -1,5 +1,4 @@
 // see https://getdatepicker.com
-console.log('trying to import datetimepicker');
 $('#assignment-picker').tempusDominus({
     display: {
         sideBySide: true
@@ -10,3 +9,7 @@ $('#assignment-picker').tempusDominus({
         hourCycle: 'h23'
     }
 });
+
+$('#assignment-picker-input').on('click', () => {
+    $('#assignment-picker-button').click();
+});
diff --git a/app/views/assignments/_form.html.erb b/app/views/assignments/_form.html.erb
index f8ded9f8f..51c2b216a 100644
--- a/app/views/assignments/_form.html.erb
+++ b/app/views/assignments/_form.html.erb
@@ -26,9 +26,11 @@
                 'data-td-target': '#assignment-picker' %>
             <span
               class="input-group-text"
+              role="button"
+              id="assignment-picker-button"
               data-td-target="#assignment-picker"
               data-td-toggle="datetimepicker">
-              <i class="fas fa-calendar"></i>
+              <i class="bi bi-calendar-fill"></i>
             </span>
           </div>
         </div>

From 9a9d3b29d1c2c4a9f2934a3f5fc89a0ec217ac51 Mon Sep 17 00:00:00 2001
From: Splines <dominic-plein@gmx.de>
Date: Tue, 11 Jul 2023 19:21:21 +0200
Subject: [PATCH 05/25] Shrink "action" and enlargen "Deadline" column

---
 app/views/assignments/_form.html.erb          | 4 ++--
 app/views/assignments/_row.html.erb           | 4 ++--
 app/views/lectures/edit/_assignments.html.erb | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/views/assignments/_form.html.erb b/app/views/assignments/_form.html.erb
index 51c2b216a..98595fb07 100644
--- a/app/views/assignments/_form.html.erb
+++ b/app/views/assignments/_form.html.erb
@@ -13,7 +13,7 @@
         </div>
       </div>
 
-      <div class="form-group col-2">
+      <div class="form-group col-3">
         <div class="col-sm-12" id="htmlTarget">
           <div
             class="input-group log-event td-picker"
@@ -70,7 +70,7 @@
              id="assignment-deletion-date-error">
         </div>
       </div>
-      <div class="form-group col-2">
+      <div class="form-group col-1">
         <%= f.submit t('buttons.save'),
                      class: 'btn btn-sm btn-primary ms-2' %>
         <%= link_to t('buttons.cancel'),
diff --git a/app/views/assignments/_row.html.erb b/app/views/assignments/_row.html.erb
index e38e1dc53..d1fbf07d2 100644
--- a/app/views/assignments/_row.html.erb
+++ b/app/views/assignments/_row.html.erb
@@ -5,7 +5,7 @@
     <div class="col-2">
       <%= assignment.title %>
     </div>
-    <div class="col-2">
+    <div class="col-3">
       <% if assignment.deadline %>
         <%= I18n.l(assignment.deadline, format: :long) %>
       <% end %>
@@ -26,7 +26,7 @@
         <%= I18n.l(assignment.deletion_date, format: :long) %>
       <% end %>
     </div>
-    <div class="col-2">
+    <div class="col-1">
       <% if assignment.persisted? %>
         <%= link_to edit_assignment_path(assignment),
                     class: 'text-dark',
diff --git a/app/views/lectures/edit/_assignments.html.erb b/app/views/lectures/edit/_assignments.html.erb
index 398f81d95..2bdea32f3 100644
--- a/app/views/lectures/edit/_assignments.html.erb
+++ b/app/views/lectures/edit/_assignments.html.erb
@@ -41,7 +41,7 @@
                 <%= t('basics.title') %>
               </h6>
             </div>
-            <div class="col-2">
+            <div class="col-3">
               <h6>
                 <%= t('basics.deadline') %>
               </h6>
@@ -61,7 +61,7 @@
                 <%= t('assignment.deletion_date') %>
               </h6>
             </div>
-            <div class="col-2">
+            <div class="col-1">
               <h6>
                 <%= t('basics.action') %>
                 <%= helpdesk(t('assignment.destruction_info'), true) %>

From 75ca523874da6c66ee809a02bb9a8c498be87ddd Mon Sep 17 00:00:00 2001
From: Splines <dominic-plein@gmx.de>
Date: Wed, 12 Jul 2023 00:31:35 +0200
Subject: [PATCH 06/25] Do not use not working jQuery version of datetimepicker

---
 app/assets/javascripts/datetimepicker.js | 20 ++++++++++++--------
 app/views/layouts/_head.html.erb         | 23 +++++------------------
 2 files changed, 17 insertions(+), 26 deletions(-)

diff --git a/app/assets/javascripts/datetimepicker.js b/app/assets/javascripts/datetimepicker.js
index 8726e2842..54edd9466 100644
--- a/app/assets/javascripts/datetimepicker.js
+++ b/app/assets/javascripts/datetimepicker.js
@@ -1,13 +1,17 @@
 // see https://getdatepicker.com
-$('#assignment-picker').tempusDominus({
-    display: {
-        sideBySide: true
-    },
-    localization: {
-        startOfTheWeek: 1,
-        format: 'yyyy-MM-dd HH:mm',
-        hourCycle: 'h23'
+var datetimePicker = new tempusDominus.TempusDominus(
+    document.getElementById('assignment-picker'),
+    {
+        display: {
+            sideBySide: true,
+        },
+        localization: {
+            startOfTheWeek: 1,
+            format: 'yyyy-MM-dd HH:mm',
+            hourCycle: 'h23',
+        }
     }
+);
 });
 
 $('#assignment-picker-input').on('click', () => {
diff --git a/app/views/layouts/_head.html.erb b/app/views/layouts/_head.html.erb
index d1147a46d..884f3f77c 100644
--- a/app/views/layouts/_head.html.erb
+++ b/app/views/layouts/_head.html.erb
@@ -35,29 +35,16 @@
         crossorigin="anonymous">
 </script>
 
-<!-- Font awesome is not required provided you change the icon options -->
+<!-- Tempus Dominus Datetimepicker -->
+<!-- Font awesome required for icons in Datetimepicker -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/solid.min.js"></script>
-
 <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/fontawesome.min.js"></script>
-<!-- end FA -->
-
 <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" crossorigin="anonymous">
 </script>
-<script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.7.10/dist/js/tempus-dominus.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.7.10/dist/js/jQuery-provider.js"></script>
-
+<script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.7.10/dist/js/tempus-dominus.js">
+</script>
 <link rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.7.10/dist/css/tempus-dominus.css"
-/>
-
-
-<%# Datetimepicker (Tempus Dominus) %>
-<!-- Popperjs (needed for Tempus Dominus) -->
-<%# <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" crossorigin="anonymous"></script>
-<!-- Tempus Dominus JavaScript -->
-<script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.7.10/dist/js/tempus-dominus.min.js" crossorigin="anonymous"></script>
-<!-- Tempus Dominus Styles -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.7.10/dist/css/tempus-dominus.min.css" crossorigin="anonymous"> %>
+  href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.7.10/dist/css/tempus-dominus.css">
 
 <script src="https://cdn.jsdelivr.net/npm/sanitize-html@1.27.0/dist/sanitize-html.min.js" integrity="sha256-+Tha6wUu+wzAOUzilJ7AmF4OXc3CsY1aMsWopnCVwb4=" crossorigin="anonymous"></script>
 <script defer

From 3e682bb204cd77cf96f13844c1f191be6e9adff9 Mon Sep 17 00:00:00 2001
From: Splines <dominic-plein@gmx.de>
Date: Wed, 12 Jul 2023 00:31:50 +0200
Subject: [PATCH 07/25] Remove autocomplete from input field

---
 app/views/assignments/_form.html.erb | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/views/assignments/_form.html.erb b/app/views/assignments/_form.html.erb
index 98595fb07..6d1ac790f 100644
--- a/app/views/assignments/_form.html.erb
+++ b/app/views/assignments/_form.html.erb
@@ -23,6 +23,7 @@
             <%= f.text_field :deadline,
                 id: 'assignment-picker-input',
                 class: 'form-control',
+                autocomplete: 'off',
                 'data-td-target': '#assignment-picker' %>
             <span
               class="input-group-text"
@@ -76,6 +77,7 @@
         <%= link_to t('buttons.cancel'),
                     cancel_editing_assignment_path(assignment),
                     class: 'btn btn-sm btn-secondary',
+                    role: 'button',
                     remote: true %>
       </div>
     </div>

From 8d07ed011250604ec32f2ef7646002f6fb07ffb4 Mon Sep 17 00:00:00 2001
From: Splines <dominic-plein@gmx.de>
Date: Wed, 12 Jul 2023 00:32:11 +0200
Subject: [PATCH 08/25] Improve accessibility of Datetimepicker

(keyboard events & focus)
---
 app/assets/javascripts/datetimepicker.js | 38 ++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/datetimepicker.js b/app/assets/javascripts/datetimepicker.js
index 54edd9466..24e483200 100644
--- a/app/assets/javascripts/datetimepicker.js
+++ b/app/assets/javascripts/datetimepicker.js
@@ -12,8 +12,42 @@ var datetimePicker = new tempusDominus.TempusDominus(
         }
     }
 );
+
+// Catch Tempus Dominus error when user types in invalid date
+// see this discussion: https://github.com/Eonasdan/tempus-dominus/discussions/2656
+datetimePicker.dates.oldParseInput = datetimePicker.dates.parseInput;
+datetimePicker.dates.parseInput = (input) => {
+    try {
+        return datetimePicker.dates.oldParseInput(input);
+    } catch (err) {
+        datetimePicker.dates.clear();
+    }
+};
+
+var isButtonInvokingFocus = false;
+
+// Show datetimepicker when user clicks in text field next to button
+// or when input field receives focus
+$('#assignment-picker-input').on('click focusin', (e) => {
+    try {
+        if (!isButtonInvokingFocus) {
+            datetimePicker.show();
+        }
+    }
+    finally {
+        isButtonInvokingFocus = false;
+    }
 });
 
-$('#assignment-picker-input').on('click', () => {
-    $('#assignment-picker-button').click();
+$('#assignment-picker-button').on('click', () => {
+    isButtonInvokingFocus = true;
+    $('#assignment-picker-input').focus();
+});
+
+// Hide datetimepicker when input field loses focus
+$('#assignment-picker-input').blur((e) => {
+    if (!e.relatedTarget) {
+        return;
+    }
+    datetimePicker.hide();
 });

From 011c5707ea511f9eb3058d734f365c980093adae Mon Sep 17 00:00:00 2001
From: Splines <dominic-plein@gmx.de>
Date: Wed, 12 Jul 2023 15:53:39 +0200
Subject: [PATCH 09/25] Add error message for invalid format & decouple from
 assignment view

---
 app/assets/javascripts/datetimepicker.js | 26 ++++++++++++++++++------
 app/views/assignments/_form.html.erb     | 11 +++++-----
 config/locales/de.yml                    |  2 ++
 config/locales/en.yml                    |  2 ++
 4 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/datetimepicker.js b/app/assets/javascripts/datetimepicker.js
index 24e483200..22851dd57 100644
--- a/app/assets/javascripts/datetimepicker.js
+++ b/app/assets/javascripts/datetimepicker.js
@@ -1,12 +1,14 @@
 // see https://getdatepicker.com
 var datetimePicker = new tempusDominus.TempusDominus(
-    document.getElementById('assignment-picker'),
+    // currently, we only support one datetimepicker on a page
+    document.getElementsByClassName('td-picker')[0],
     {
         display: {
             sideBySide: true,
         },
         localization: {
             startOfTheWeek: 1,
+            // choose format to be compliant with backend time format
             format: 'yyyy-MM-dd HH:mm',
             hourCycle: 'h23',
         }
@@ -20,15 +22,27 @@ datetimePicker.dates.parseInput = (input) => {
     try {
         return datetimePicker.dates.oldParseInput(input);
     } catch (err) {
+        console.log($('.td-error'));
+        const errorMsg = $('.td-error').data('td-invalid-date');
+        $('.td-error').text(errorMsg).show();
         datetimePicker.dates.clear();
     }
 };
 
-var isButtonInvokingFocus = false;
+datetimePicker.subscribe(tempusDominus.Namespace.events.change, (e) => {
+    // see https://getdatepicker.com/6/namespace/events.html#change
+    if (e.isValid && !e.isClear) {
+        $('.td-error').empty();
+    }
+});
+
+
 
 // Show datetimepicker when user clicks in text field next to button
 // or when input field receives focus
-$('#assignment-picker-input').on('click focusin', (e) => {
+var isButtonInvokingFocus = false;
+
+$('.td-input').on('click focusin', (e) => {
     try {
         if (!isButtonInvokingFocus) {
             datetimePicker.show();
@@ -39,13 +53,13 @@ $('#assignment-picker-input').on('click focusin', (e) => {
     }
 });
 
-$('#assignment-picker-button').on('click', () => {
+$('.td-picker-button').on('click', () => {
     isButtonInvokingFocus = true;
-    $('#assignment-picker-input').focus();
+    $('.td-input').focus();
 });
 
 // Hide datetimepicker when input field loses focus
-$('#assignment-picker-input').blur((e) => {
+$('.td-input').blur((e) => {
     if (!e.relatedTarget) {
         return;
     }
diff --git a/app/views/assignments/_form.html.erb b/app/views/assignments/_form.html.erb
index 6d1ac790f..266321663 100644
--- a/app/views/assignments/_form.html.erb
+++ b/app/views/assignments/_form.html.erb
@@ -21,14 +21,12 @@
             data-td-target-input="nearest"
             data-td-target-toggle="nearest">
             <%= f.text_field :deadline,
-                id: 'assignment-picker-input',
-                class: 'form-control',
+                class: 'form-control td-input',
                 autocomplete: 'off',
                 'data-td-target': '#assignment-picker' %>
             <span
-              class="input-group-text"
+              class="input-group-text td-picker-button"
               role="button"
-              id="assignment-picker-button"
               data-td-target="#assignment-picker"
               data-td-toggle="datetimepicker">
               <i class="bi bi-calendar-fill"></i>
@@ -36,8 +34,9 @@
           </div>
         </div>
 
-        <div class="invalid-feedback"
-             id="assignment-deadline-error">
+        <div class="invalid-feedback td-error"
+             id="assignment-deadline-error"
+             data-td-invalid-date="<%= t('datetimepicker.invalid_date') %>">
         </div>
       </div>
 
diff --git a/config/locales/de.yml b/config/locales/de.yml
index 35bec56b1..2bd03b084 100644
--- a/config/locales/de.yml
+++ b/config/locales/de.yml
@@ -2441,6 +2441,8 @@ de:
   date:
     formats:
       concise: '%d.%m.%Y'
+  datetimepicker:
+    invalid_date: 'Ungültiges Datumsformat'
   time:
     formats:
       concise: '%d.%m.%Y'
diff --git a/config/locales/en.yml b/config/locales/en.yml
index fd3cb8a3f..d65765801 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2300,6 +2300,8 @@ en:
   date:
     formats:
       concise: '%Y-%m-%d'
+  datetimepicker:
+    invalid_date: 'Invalid date format'
   time:
     formats:
       concise: '%Y-%m-%d'

From a5fc69c1e3de1ba288fea7772dc42be3cfd974ff Mon Sep 17 00:00:00 2001
From: Splines <dominic-plein@gmx.de>
Date: Wed, 12 Jul 2023 15:58:12 +0200
Subject: [PATCH 10/25] Clean up datetimepicker.js

---
 app/assets/javascripts/datetimepicker.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/datetimepicker.js b/app/assets/javascripts/datetimepicker.js
index 22851dd57..354e8bccb 100644
--- a/app/assets/javascripts/datetimepicker.js
+++ b/app/assets/javascripts/datetimepicker.js
@@ -16,13 +16,13 @@ var datetimePicker = new tempusDominus.TempusDominus(
 );
 
 // Catch Tempus Dominus error when user types in invalid date
-// see this discussion: https://github.com/Eonasdan/tempus-dominus/discussions/2656
+// this is rather hacky at the moment, see this discussion:
+// https://github.com/Eonasdan/tempus-dominus/discussions/2656
 datetimePicker.dates.oldParseInput = datetimePicker.dates.parseInput;
 datetimePicker.dates.parseInput = (input) => {
     try {
         return datetimePicker.dates.oldParseInput(input);
     } catch (err) {
-        console.log($('.td-error'));
         const errorMsg = $('.td-error').data('td-invalid-date');
         $('.td-error').text(errorMsg).show();
         datetimePicker.dates.clear();
@@ -36,8 +36,6 @@ datetimePicker.subscribe(tempusDominus.Namespace.events.change, (e) => {
     }
 });
 
-
-
 // Show datetimepicker when user clicks in text field next to button
 // or when input field receives focus
 var isButtonInvokingFocus = false;

From bb92f787c4c500e4ae29de2269b746dd2a55340b Mon Sep 17 00:00:00 2001
From: Splines <dominic-plein@gmx.de>
Date: Wed, 12 Jul 2023 15:59:51 +0200
Subject: [PATCH 11/25] Change invalid date format string

---
 config/locales/de.yml | 2 +-
 config/locales/en.yml | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/config/locales/de.yml b/config/locales/de.yml
index 2bd03b084..3b5fd6038 100644
--- a/config/locales/de.yml
+++ b/config/locales/de.yml
@@ -2442,7 +2442,7 @@ de:
     formats:
       concise: '%d.%m.%Y'
   datetimepicker:
-    invalid_date: 'Ungültiges Datumsformat'
+    invalid_date: 'Ungültiges Datums-Zeit-Format'
   time:
     formats:
       concise: '%d.%m.%Y'
diff --git a/config/locales/en.yml b/config/locales/en.yml
index d65765801..ae63270f0 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2301,7 +2301,7 @@ en:
     formats:
       concise: '%Y-%m-%d'
   datetimepicker:
-    invalid_date: 'Invalid date format'
+    invalid_date: 'Invalid date time format'
   time:
     formats:
       concise: '%Y-%m-%d'

From d63eefd12ebdcc55bc309bc887ea47d779d05b9d Mon Sep 17 00:00:00 2001
From: Splines <dominic-plein@gmx.de>
Date: Wed, 12 Jul 2023 16:04:44 +0200
Subject: [PATCH 12/25] Fix "is-invalid" CSS classes via JS

---
 app/views/assignments/create.coffee | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/views/assignments/create.coffee b/app/views/assignments/create.coffee
index 3aab03b90..9e938c3f0 100644
--- a/app/views/assignments/create.coffee
+++ b/app/views/assignments/create.coffee
@@ -1,9 +1,9 @@
 # clean up from previous error messages
-$('#assignment_title').removeClass('is-invalid')
+$('#assignment_title_').removeClass('is-invalid')
 $('#assignment-title-error').empty()
 $('#assignment_deadline').removeClass('is-invalid')
 $('#assignment-deadline-error').empty()
-$('#assignment_deletion_date').removeClass('is-invalid')
+$('#assignment_deletion_date_').removeClass('is-invalid')
 $('#assignment-deletion-date-error').empty()
 
 # display error message
@@ -11,7 +11,7 @@ $('#assignment-deletion-date-error').empty()
 <% if @errors[:title].present? %>
 $('#assignment-title-error')
   .append('<%= @errors[:title].join(" ") %>').show()
-$('#assignment_title').addClass('is-invalid')
+$('#assignment_title_').addClass('is-invalid')
 <% end %>
 <% if @errors[:deadline].present? %>
 $('#assignment-deadline-error')
@@ -21,7 +21,7 @@ $('#assignment_deadline').addClass('is-invalid')
 <% if @errors[:deletion_date].present? %>
 $('#assignment-deletion-date-error')
   .append('<%= @errors[:deletion_date].join(" ") %>').show()
-$('#assignment_deletion_date').addClass('is-invalid')
+$('#assignment_deletion_date_').addClass('is-invalid')
 <% end %>
 <% else %>
 $('.assignmentRow[data-id="0"')

From 658a3715ce69c6de953da82d24a86d8207d6e24e Mon Sep 17 00:00:00 2001
From: Splines <dominic-plein@gmx.de>
Date: Wed, 12 Jul 2023 16:10:08 +0200
Subject: [PATCH 13/25] Get rid of old datetimepicker occurrences

---
 app/assets/javascripts/media.coffee   | 7 -------
 app/javascript/packs/application.sass | 1 -
 app/views/assignments/edit.coffee     | 3 ---
 app/views/assignments/new.js.erb      | 5 -----
 4 files changed, 16 deletions(-)

diff --git a/app/assets/javascripts/media.coffee b/app/assets/javascripts/media.coffee
index d6aaebb90..78975f59d 100644
--- a/app/assets/javascripts/media.coffee
+++ b/app/assets/javascripts/media.coffee
@@ -17,13 +17,6 @@ fancyTimeFormat = (time) ->
   output
 
 $(document).on 'turbolinks:load', ->
-
-  # init datetimepicker
-  $('#release_date').datetimepicker
-      format: 'd.m.Y H:i'
-      inline: false
-      lang: 'en'
-
   # disable/enable search field on the media search page, depending on
   # whether 'all tags'/'all editors'/... are selected
   $('[id^="search_all_"]').on 'change', ->
diff --git a/app/javascript/packs/application.sass b/app/javascript/packs/application.sass
index 0e08f8e6d..e69de29bb 100644
--- a/app/javascript/packs/application.sass
+++ b/app/javascript/packs/application.sass
@@ -1 +0,0 @@
-@import "jquery-datetimepicker/build/jquery.datetimepicker.min.css"
\ No newline at end of file
diff --git a/app/views/assignments/edit.coffee b/app/views/assignments/edit.coffee
index 60d65a9ff..ba2a46a73 100644
--- a/app/views/assignments/edit.coffee
+++ b/app/views/assignments/edit.coffee
@@ -20,6 +20,3 @@ $('#assignment_medium_id_<%= @assignment.id %>').val(null).trigger('change')
 # using moment to format the date right
 d = moment($("#assignment_deadline_<%= @assignment.id %>").val(),"YYYY-MM-DD hh:mm:ss z")
 $("#assignment_deadline_<%= @assignment.id %>").val (d.format("DD.MM.Y H:mm"))
-$("#assignment_deadline_<%= @assignment.id %>").datetimepicker
-  format:'d.m.Y H:i'
-  inline:false
diff --git a/app/views/assignments/new.js.erb b/app/views/assignments/new.js.erb
index df9a0beee..c7872b491 100644
--- a/app/views/assignments/new.js.erb
+++ b/app/views/assignments/new.js.erb
@@ -16,8 +16,3 @@ new TomSelect('#assignment_medium_id_', {
 });
 
 $('#assignment_medium_id_').val(null).trigger('change');
-
-$("#assignment_deadline_").datetimepicker({
-  format: 'd.m.Y H:i',
-  inline: false
-});
\ No newline at end of file

From fcf58a0f288efc43000eb0fc6cba4b54c3de0f1d Mon Sep 17 00:00:00 2001
From: Splines <dominic-plein@gmx.de>
Date: Wed, 12 Jul 2023 16:10:39 +0200
Subject: [PATCH 14/25] Get rid of "moment" as dependency for formatting dates

---
 app/views/assignments/edit.coffee | 4 ----
 package.json                      | 1 -
 yarn.lock                         | 5 -----
 3 files changed, 10 deletions(-)

diff --git a/app/views/assignments/edit.coffee b/app/views/assignments/edit.coffee
index ba2a46a73..68dab3107 100644
--- a/app/views/assignments/edit.coffee
+++ b/app/views/assignments/edit.coffee
@@ -16,7 +16,3 @@ new TomSelect('#assignment_medium_id_<%= @assignment.id %>',
 # make sure that no medium is preselected
 $('#assignment_medium_id_<%= @assignment.id %>').val(null).trigger('change')
 <% end %>
-
-# using moment to format the date right
-d = moment($("#assignment_deadline_<%= @assignment.id %>").val(),"YYYY-MM-DD hh:mm:ss z")
-$("#assignment_deadline_<%= @assignment.id %>").val (d.format("DD.MM.Y H:mm"))
diff --git a/package.json b/package.json
index 6f080f1ab..d2e04c647 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,6 @@
     "css-loader": "^5.2.7",
     "friendly-challenge": "^0.9.12",
     "imports-loader": "^1.2.0",
-    "moment": "^2.29.4",
     "regenerator-runtime": "^0.13.11",
     "sass": "^1.63.4",
     "sass-loader": "^10.1.1",
diff --git a/yarn.lock b/yarn.lock
index 5bfce2f6f..71d792403 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4674,11 +4674,6 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-moment@^2.29.4:
-  version "2.29.4"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
-  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
-
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"

From eab7d3472aae651cb87be18ab11b2d63a59f8f74 Mon Sep 17 00:00:00 2001
From: Splines <dominic-plein@gmx.de>
Date: Wed, 12 Jul 2023 16:42:12 +0200
Subject: [PATCH 15/25] Wait for document to be ready to init datetimepicker

Also close the datetimepicker when a date was selected
---
 app/assets/javascripts/datetimepicker.js | 119 ++++++++++++-----------
 1 file changed, 62 insertions(+), 57 deletions(-)

diff --git a/app/assets/javascripts/datetimepicker.js b/app/assets/javascripts/datetimepicker.js
index 354e8bccb..96edf82ef 100644
--- a/app/assets/javascripts/datetimepicker.js
+++ b/app/assets/javascripts/datetimepicker.js
@@ -1,65 +1,70 @@
-// see https://getdatepicker.com
-var datetimePicker = new tempusDominus.TempusDominus(
-    // currently, we only support one datetimepicker on a page
-    document.getElementsByClassName('td-picker')[0],
-    {
-        display: {
-            sideBySide: true,
-        },
-        localization: {
-            startOfTheWeek: 1,
-            // choose format to be compliant with backend time format
-            format: 'yyyy-MM-dd HH:mm',
-            hourCycle: 'h23',
+$(document).ready(function () {
+
+    // see https://getdatepicker.com
+    var datetimePicker = new tempusDominus.TempusDominus(
+        // currently, we only support one datetimepicker on a page
+        document.getElementsByClassName('td-picker')[0],
+        {
+            display: {
+                sideBySide: true,
+            },
+            localization: {
+                startOfTheWeek: 1,
+                // choose format to be compliant with backend time format
+                format: 'yyyy-MM-dd HH:mm',
+                hourCycle: 'h23',
+            }
         }
-    }
-);
+    );
 
-// Catch Tempus Dominus error when user types in invalid date
-// this is rather hacky at the moment, see this discussion:
-// https://github.com/Eonasdan/tempus-dominus/discussions/2656
-datetimePicker.dates.oldParseInput = datetimePicker.dates.parseInput;
-datetimePicker.dates.parseInput = (input) => {
-    try {
-        return datetimePicker.dates.oldParseInput(input);
-    } catch (err) {
-        const errorMsg = $('.td-error').data('td-invalid-date');
-        $('.td-error').text(errorMsg).show();
-        datetimePicker.dates.clear();
-    }
-};
+    // Catch Tempus Dominus error when user types in invalid date
+    // this is rather hacky at the moment, see this discussion:
+    // https://github.com/Eonasdan/tempus-dominus/discussions/2656
+    datetimePicker.dates.oldParseInput = datetimePicker.dates.parseInput;
+    datetimePicker.dates.parseInput = (input) => {
+        try {
+            return datetimePicker.dates.oldParseInput(input);
+        } catch (err) {
+            const errorMsg = $('.td-error').data('td-invalid-date');
+            $('.td-error').text(errorMsg).show();
+            datetimePicker.dates.clear();
+        }
+    };
 
-datetimePicker.subscribe(tempusDominus.Namespace.events.change, (e) => {
-    // see https://getdatepicker.com/6/namespace/events.html#change
-    if (e.isValid && !e.isClear) {
-        $('.td-error').empty();
-    }
-});
+    datetimePicker.subscribe(tempusDominus.Namespace.events.change, (e) => {
+        // see https://getdatepicker.com/6/namespace/events.html#change
+        if (e.isValid && !e.isClear) {
+            $('.td-error').empty();
+            datetimePicker.hide();
+        }
+    });
 
-// Show datetimepicker when user clicks in text field next to button
-// or when input field receives focus
-var isButtonInvokingFocus = false;
+    // Show datetimepicker when user clicks in text field next to button
+    // or when input field receives focus
+    var isButtonInvokingFocus = false;
 
-$('.td-input').on('click focusin', (e) => {
-    try {
-        if (!isButtonInvokingFocus) {
-            datetimePicker.show();
+    $('.td-input').on('click focusin', (e) => {
+        try {
+            if (!isButtonInvokingFocus) {
+                datetimePicker.show();
+            }
         }
-    }
-    finally {
-        isButtonInvokingFocus = false;
-    }
-});
+        finally {
+            isButtonInvokingFocus = false;
+        }
+    });
+
+    $('.td-picker-button').on('click', () => {
+        isButtonInvokingFocus = true;
+        $('.td-input').focus();
+    });
 
-$('.td-picker-button').on('click', () => {
-    isButtonInvokingFocus = true;
-    $('.td-input').focus();
-});
+    // Hide datetimepicker when input field loses focus
+    $('.td-input').blur((e) => {
+        if (!e.relatedTarget) {
+            return;
+        }
+        datetimePicker.hide();
+    });
 
-// Hide datetimepicker when input field loses focus
-$('.td-input').blur((e) => {
-    if (!e.relatedTarget) {
-        return;
-    }
-    datetimePicker.hide();
-});
+});
\ No newline at end of file

From f0f6499d58b662ff1d74281a87e64366ca7513d2 Mon Sep 17 00:00:00 2001
From: Splines <dominic-plein@gmx.de>
Date: Wed, 12 Jul 2023 17:26:02 +0200
Subject: [PATCH 16/25] Replace old datetimepicker in publish media modal

---
 app/assets/javascripts/datetimepicker.js | 137 +++++++++++++----------
 app/assets/javascripts/media.coffee      |   8 +-
 app/views/media/_publish_modal.html.erb  |  71 ++++++++----
 3 files changed, 132 insertions(+), 84 deletions(-)

diff --git a/app/assets/javascripts/datetimepicker.js b/app/assets/javascripts/datetimepicker.js
index 96edf82ef..bb3a09ef4 100644
--- a/app/assets/javascripts/datetimepicker.js
+++ b/app/assets/javascripts/datetimepicker.js
@@ -1,70 +1,91 @@
 $(document).ready(function () {
 
-    // see https://getdatepicker.com
-    var datetimePicker = new tempusDominus.TempusDominus(
-        // currently, we only support one datetimepicker on a page
-        document.getElementsByClassName('td-picker')[0],
-        {
-            display: {
-                sideBySide: true,
-            },
-            localization: {
-                startOfTheWeek: 1,
-                // choose format to be compliant with backend time format
-                format: 'yyyy-MM-dd HH:mm',
-                hourCycle: 'h23',
-            }
+    // Initialize Tempus Dominus datetimepicker(s)
+    startInitialization();
+    function startInitialization() {
+        const pickerElements = $('.td-picker');
+        if (pickerElements.length == 0) {
+            console.error('No datetimepicker element found on page, although requested.');
+            return;
         }
-    );
 
-    // Catch Tempus Dominus error when user types in invalid date
-    // this is rather hacky at the moment, see this discussion:
-    // https://github.com/Eonasdan/tempus-dominus/discussions/2656
-    datetimePicker.dates.oldParseInput = datetimePicker.dates.parseInput;
-    datetimePicker.dates.parseInput = (input) => {
-        try {
-            return datetimePicker.dates.oldParseInput(input);
-        } catch (err) {
-            const errorMsg = $('.td-error').data('td-invalid-date');
-            $('.td-error').text(errorMsg).show();
-            datetimePicker.dates.clear();
-        }
-    };
+        pickerElements.each((i, element) => {
+            element = $(element);
+            const datetimePicker = initDatetimePicker(element);
+            registerErrorHandlers(datetimePicker, element);
+            registerFocusHandlers(datetimePicker, element);
+        });
+    }
 
-    datetimePicker.subscribe(tempusDominus.Namespace.events.change, (e) => {
-        // see https://getdatepicker.com/6/namespace/events.html#change
-        if (e.isValid && !e.isClear) {
-            $('.td-error').empty();
-            datetimePicker.hide();
-        }
-    });
+    function initDatetimePicker(element) {
+        // see https://getdatepicker.com
+        return new tempusDominus.TempusDominus(
+            element.get(0),
+            {
+                display: {
+                    sideBySide: true, // clock to the right of the calendar
+                },
+                localization: {
+                    startOfTheWeek: 1,
+                    // choose format to be compliant with backend time format
+                    format: 'yyyy-MM-dd HH:mm',
+                    hourCycle: 'h23',
+                }
+            }
+        );
+    }
 
-    // Show datetimepicker when user clicks in text field next to button
-    // or when input field receives focus
-    var isButtonInvokingFocus = false;
+    function registerErrorHandlers(datetimePicker, element) {
+        // Catch Tempus Dominus error when user types in invalid date
+        // this is rather hacky at the moment, see this discussion:
+        // https://github.com/Eonasdan/tempus-dominus/discussions/2656
+        datetimePicker.dates.oldParseInput = datetimePicker.dates.parseInput;
+        datetimePicker.dates.parseInput = (input) => {
+            try {
+                return datetimePicker.dates.oldParseInput(input);
+            } catch (err) {
+                const errorMsg = element.find('.td-error').data('td-invalid-date');
+                element.find('.td-error').text(errorMsg).show();
+                datetimePicker.dates.clear();
+            }
+        };
 
-    $('.td-input').on('click focusin', (e) => {
-        try {
-            if (!isButtonInvokingFocus) {
-                datetimePicker.show();
+        datetimePicker.subscribe(tempusDominus.Namespace.events.change, (e) => {
+            // see https://getdatepicker.com/6/namespace/events.html#change
+            if (e.isValid && !e.isClear) {
+                element.find('.td-error').empty();
+                datetimePicker.hide();
             }
-        }
-        finally {
-            isButtonInvokingFocus = false;
-        }
-    });
+        });
+    }
 
-    $('.td-picker-button').on('click', () => {
-        isButtonInvokingFocus = true;
-        $('.td-input').focus();
-    });
+    function registerFocusHandlers(datetimePicker, element) {
+        // Show datetimepicker when user clicks in text field next to button
+        // or when input field receives focus
+        var isButtonInvokingFocus = false;
 
-    // Hide datetimepicker when input field loses focus
-    $('.td-input').blur((e) => {
-        if (!e.relatedTarget) {
-            return;
-        }
-        datetimePicker.hide();
-    });
+        element.find('.td-input').on('click focusin', (e) => {
+            try {
+                if (!isButtonInvokingFocus) {
+                    datetimePicker.show();
+                }
+            }
+            finally {
+                isButtonInvokingFocus = false;
+            }
+        });
+
+        element.find('.td-picker-button').on('click', () => {
+            isButtonInvokingFocus = true;
+            element.find('.td-input').focus();
+        });
 
+        // Hide datetimepicker when input field loses focus
+        element.find('.td-input').blur((e) => {
+            if (!e.relatedTarget) {
+                return;
+            }
+            datetimePicker.hide();
+        });
+    }
 });
\ No newline at end of file
diff --git a/app/assets/javascripts/media.coffee b/app/assets/javascripts/media.coffee
index 78975f59d..226eeb30e 100644
--- a/app/assets/javascripts/media.coffee
+++ b/app/assets/javascripts/media.coffee
@@ -388,14 +388,8 @@ $(document).on 'turbolinks:load', ->
     return
 
   $('#release_date').on 'focus', ->
+    # Focus other radio button if user clicks on release date input field
     $('#medium_release_now_0').prop('checked', true)
-    $('#release_date').datetimepicker('toggle')
-    return
-
-  $('#medium_assignment_deadline').on 'focus', ->
-    $(this).datetimepicker
-      format: 'd.m.Y H:i'
-      inline: false
     return
 
   $('#medium_create_assignment').on 'click', ->
diff --git a/app/views/media/_publish_modal.html.erb b/app/views/media/_publish_modal.html.erb
index 78d493ce9..01dc00c29 100644
--- a/app/views/media/_publish_modal.html.erb
+++ b/app/views/media/_publish_modal.html.erb
@@ -1,3 +1,5 @@
+<%= javascript_include_tag 'datetimepicker' %>
+
 <div class="modal fade"
      id="publishMediumModal"
      tabindex="-1"
@@ -50,18 +52,32 @@
                         class: 'form-check-label' %>
             <%= helpdesk(t('admin.medium.info.scheduled_release'), true) %>
           </div>
-          <div class="mb-3 col-12">
+
+          <%# Datetimepicker for release date %>
+          <div
+            class="mb-3 input-group td-picker"
+            id="release-date-picker"
+            data-td-target-input="nearest"
+            data-td-target-toggle="nearest">
             <%= f.text_field :release_date,
-                             class: 'form-control',
+                             class: 'form-control td-input',
                              id: 'release_date',
                              autocomplete: 'off',
-                             value: medium.planned_release_date
-                                          .try(:strftime,
-                                               '%d.%m.%Y %H:%M') %>
-            <div class="invalid-feedback"
-                 id="release-date-error">
+                             value: medium.planned_release_date,
+                            'data-td-target': '#release-date-picker'%>
+            <span
+              class="input-group-text td-picker-button"
+              role="button"
+              data-td-target="#release-date-picker"
+              data-td-toggle="datetimepicker">
+              <i class="bi bi-calendar-fill"></i>
+            </span>
+            <div class="invalid-feedback td-error"
+                 id="release-date-error"
+                 data-td-invalid-date="<%= t('datetimepicker.invalid_date') %>">
             </div>
           </div>
+
           <% if medium.sort == 'Nuesse' && medium.teachable.is_a?(Lecture) %>
             <div class="mb-1">
               <%= t('basics.assignment') %>
@@ -88,21 +104,37 @@
                      id="assignment-title-error">
                 </div>
               </div>
-              <div class="mb-3 col-3">
+
+              <%# Datetimepicker for assignment deadline %>
+              <div class="mb-3 col-4">
                 <%= f.label :assignment_deadline, t('basics.deadline'),
                             class: "form-label" %>
-                <%= f.text_field :assignment_deadline,
-                                 class: 'form-control',
-                                 autocomplete: 'off',
-                                 value: medium.publisher
-                                             &.assignment_deadline
-                                              .try(:strftime,
-                                                   '%d.%m.%Y %H:%M') %>
-                <div class="invalid-feedback"
-                     id="assignment-deadline-error">
+                <div
+                  class="input-group td-picker"
+                  id="assignment-date-picker"
+                  data-td-target-input="nearest"
+                  data-td-target-toggle="nearest">
+                  <%= f.text_field :assignment_deadline,
+                                  class: 'form-control td-input',
+                                  autocomplete: 'off',
+                                  value: medium.publisher
+                                              &.assignment_deadline,
+                                  'data-td-target': '#assignment-date-picker' %>
+                  <span
+                    class="input-group-text td-picker-button"
+                    role="button"
+                    data-td-target="#release-date-picker"
+                    data-td-toggle="datetimepicker">
+                    <i class="bi bi-calendar-fill"></i>
+                  </span>
+                  <div class="invalid-feedback td-error"
+                      id="assignment-deadline-error"
+                      data-td-invalid-date="<%= t('datetimepicker.invalid_date') %>">
+                  </div>
                 </div>
               </div>
-              <div class="mb-3 col-3">
+
+              <div class="mb-3 col-2 col-s-4">
                 <%= f.label :assignment_file_type,
                             t('submission.file_format'),
                             class: "form-label" %>
@@ -114,7 +146,8 @@
               </div>
               <div class="mb-3 col-3">
                 <%= f.label :assignment_deletion_date,
-                            t('assignment.deletion_date') %>
+                            t('assignment.deletion_date'),
+                            class: "form-label" %>
                 <%= f.select :assignment_deletion_date,
                             Term.possible_deletion_dates_localized,
                             {},

From d29433e0e6323ed83c07d5b0ee5331a58651ea6b Mon Sep 17 00:00:00 2001
From: Splines <dominic-plein@gmx.de>
Date: Wed, 12 Jul 2023 17:26:27 +0200
Subject: [PATCH 17/25] Fix datetimepicker in assignments view

---
 app/views/assignments/_form.html.erb | 44 +++++++++++++---------------
 1 file changed, 21 insertions(+), 23 deletions(-)

diff --git a/app/views/assignments/_form.html.erb b/app/views/assignments/_form.html.erb
index 266321663..0eec8828a 100644
--- a/app/views/assignments/_form.html.erb
+++ b/app/views/assignments/_form.html.erb
@@ -13,31 +13,29 @@
         </div>
       </div>
 
-      <div class="form-group col-3">
-        <div class="col-sm-12" id="htmlTarget">
-          <div
-            class="input-group log-event td-picker"
-            id="assignment-picker"
-            data-td-target-input="nearest"
-            data-td-target-toggle="nearest">
-            <%= f.text_field :deadline,
-                class: 'form-control td-input',
-                autocomplete: 'off',
-                'data-td-target': '#assignment-picker' %>
-            <span
-              class="input-group-text td-picker-button"
-              role="button"
-              data-td-target="#assignment-picker"
-              data-td-toggle="datetimepicker">
-              <i class="bi bi-calendar-fill"></i>
-            </span>
+      <%# Datetimepicker for assignment deadline %>
+      <div class="col-3 form-group">
+        <div
+          class="input-group log-event td-picker"
+          id="assignment-picker"
+          data-td-target-input="nearest"
+          data-td-target-toggle="nearest">
+          <%= f.text_field :deadline,
+              class: 'form-control td-input',
+              autocomplete: 'off',
+              'data-td-target': '#assignment-picker' %>
+          <span
+            class="input-group-text td-picker-button"
+            role="button"
+            data-td-target="#assignment-picker"
+            data-td-toggle="datetimepicker">
+            <i class="bi bi-calendar-fill"></i>
+          </span>
+          <div class="invalid-feedback td-error"
+            id="assignment-deadline-error"
+            data-td-invalid-date="<%= t('datetimepicker.invalid_date') %>">
           </div>
         </div>
-
-        <div class="invalid-feedback td-error"
-             id="assignment-deadline-error"
-             data-td-invalid-date="<%= t('datetimepicker.invalid_date') %>">
-        </div>
       </div>
 
 

From 483c464d8eec617359ee3169e971a0e6445a8997 Mon Sep 17 00:00:00 2001
From: Splines <dominic-plein@gmx.de>
Date: Wed, 12 Jul 2023 17:51:08 +0200
Subject: [PATCH 18/25] Do not close datetimepicker when only time is changed

---
 app/assets/javascripts/datetimepicker.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/app/assets/javascripts/datetimepicker.js b/app/assets/javascripts/datetimepicker.js
index bb3a09ef4..dfe3ae708 100644
--- a/app/assets/javascripts/datetimepicker.js
+++ b/app/assets/javascripts/datetimepicker.js
@@ -52,13 +52,25 @@ $(document).ready(function () {
 
         datetimePicker.subscribe(tempusDominus.Namespace.events.change, (e) => {
             // see https://getdatepicker.com/6/namespace/events.html#change
+
+            // Clear error message
             if (e.isValid && !e.isClear) {
                 element.find('.td-error').empty();
+            }
+
+            // If date was selected, close datetimepicker.
+            // However: leave the datetimepicker open if user only changed time
+            if (e.oldDate && !hasUserChangedDate(e.oldDate, e.date)) {
                 datetimePicker.hide();
             }
         });
     }
 
+    function hasUserChangedDate(oldDate, newDate) {
+        return oldDate.getHours() != newDate.getHours()
+            || oldDate.getMinutes() != newDate.getMinutes();
+    }
+
     function registerFocusHandlers(datetimePicker, element) {
         // Show datetimepicker when user clicks in text field next to button
         // or when input field receives focus

From a6d7c057edbe296e99cf0e250408218f3a5952ba Mon Sep 17 00:00:00 2001
From: Splines <dominic-plein@gmx.de>
Date: Wed, 12 Jul 2023 17:53:28 +0200
Subject: [PATCH 19/25] Improve comment

---
 app/assets/javascripts/media.coffee | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/media.coffee b/app/assets/javascripts/media.coffee
index 226eeb30e..8869ee596 100644
--- a/app/assets/javascripts/media.coffee
+++ b/app/assets/javascripts/media.coffee
@@ -388,7 +388,7 @@ $(document).on 'turbolinks:load', ->
     return
 
   $('#release_date').on 'focus', ->
-    # Focus other radio button if user clicks on release date input field
+    # Select other option if user clicks on release date input field
     $('#medium_release_now_0').prop('checked', true)
     return
 

From a1458c92d4f725b38dfa65c8f68cf81659159452 Mon Sep 17 00:00:00 2001
From: Splines <dominic-plein@gmx.de>
Date: Wed, 12 Jul 2023 23:47:58 +0200
Subject: [PATCH 20/25] Check if date is undefined

---
 app/assets/javascripts/datetimepicker.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/datetimepicker.js b/app/assets/javascripts/datetimepicker.js
index dfe3ae708..0aeb47ec0 100644
--- a/app/assets/javascripts/datetimepicker.js
+++ b/app/assets/javascripts/datetimepicker.js
@@ -60,7 +60,7 @@ $(document).ready(function () {
 
             // If date was selected, close datetimepicker.
             // However: leave the datetimepicker open if user only changed time
-            if (e.oldDate && !hasUserChangedDate(e.oldDate, e.date)) {
+            if (e.oldDate && e.date && !hasUserChangedDate(e.oldDate, e.date)) {
                 datetimePicker.hide();
             }
         });

From 377cc3defd653b183ea6da730baa081d33d00d60 Mon Sep 17 00:00:00 2001
From: Splines <dominic-plein@gmx.de>
Date: Thu, 13 Jul 2023 00:01:09 +0200
Subject: [PATCH 21/25] Prevent turbolink issue with datetimepicker

---
 app/assets/javascripts/datetimepicker.js | 180 ++++++++++++-----------
 1 file changed, 92 insertions(+), 88 deletions(-)

diff --git a/app/assets/javascripts/datetimepicker.js b/app/assets/javascripts/datetimepicker.js
index 0aeb47ec0..a40ec72d2 100644
--- a/app/assets/javascripts/datetimepicker.js
+++ b/app/assets/javascripts/datetimepicker.js
@@ -1,103 +1,107 @@
-$(document).ready(function () {
+// Initialize on page load (when js file is dynamically loaded)
+$(document).ready(startInitialization);
 
-    // Initialize Tempus Dominus datetimepicker(s)
-    startInitialization();
-    function startInitialization() {
-        const pickerElements = $('.td-picker');
-        if (pickerElements.length == 0) {
-            console.error('No datetimepicker element found on page, although requested.');
-            return;
-        }
+// On page change (e.g. go back and forth in browser)
+document.addEventListener('turbolinks:load', () => {
+    // Remove stale datetimepickers
+    $('.tempus-dominus-widget').remove();
+});
 
-        pickerElements.each((i, element) => {
-            element = $(element);
-            const datetimePicker = initDatetimePicker(element);
-            registerErrorHandlers(datetimePicker, element);
-            registerFocusHandlers(datetimePicker, element);
-        });
+function startInitialization() {
+    const pickerElements = $('.td-picker');
+    if (pickerElements.length == 0) {
+        console.error('No datetimepicker element found on page, although requested.');
+        return;
     }
 
-    function initDatetimePicker(element) {
-        // see https://getdatepicker.com
-        return new tempusDominus.TempusDominus(
-            element.get(0),
-            {
-                display: {
-                    sideBySide: true, // clock to the right of the calendar
-                },
-                localization: {
-                    startOfTheWeek: 1,
-                    // choose format to be compliant with backend time format
-                    format: 'yyyy-MM-dd HH:mm',
-                    hourCycle: 'h23',
-                }
-            }
-        );
-    }
+    pickerElements.each((i, element) => {
+        element = $(element);
+        const datetimePicker = initDatetimePicker(element);
+        registerErrorHandlers(datetimePicker, element);
+        registerFocusHandlers(datetimePicker, element);
+    });
+}
 
-    function registerErrorHandlers(datetimePicker, element) {
-        // Catch Tempus Dominus error when user types in invalid date
-        // this is rather hacky at the moment, see this discussion:
-        // https://github.com/Eonasdan/tempus-dominus/discussions/2656
-        datetimePicker.dates.oldParseInput = datetimePicker.dates.parseInput;
-        datetimePicker.dates.parseInput = (input) => {
-            try {
-                return datetimePicker.dates.oldParseInput(input);
-            } catch (err) {
-                const errorMsg = element.find('.td-error').data('td-invalid-date');
-                element.find('.td-error').text(errorMsg).show();
-                datetimePicker.dates.clear();
+function initDatetimePicker(element) {
+    // see https://getdatepicker.com
+    return new tempusDominus.TempusDominus(
+        element.get(0),
+        {
+            display: {
+                sideBySide: true, // clock to the right of the calendar
+            },
+            localization: {
+                startOfTheWeek: 1,
+                // choose format to be compliant with backend time format
+                format: 'yyyy-MM-dd HH:mm',
+                hourCycle: 'h23',
             }
-        };
+        }
+    );
+}
 
-        datetimePicker.subscribe(tempusDominus.Namespace.events.change, (e) => {
-            // see https://getdatepicker.com/6/namespace/events.html#change
+function registerErrorHandlers(datetimePicker, element) {
+    // Catch Tempus Dominus error when user types in invalid date
+    // this is rather hacky at the moment, see this discussion:
+    // https://github.com/Eonasdan/tempus-dominus/discussions/2656
+    datetimePicker.dates.oldParseInput = datetimePicker.dates.parseInput;
+    datetimePicker.dates.parseInput = (input) => {
+        try {
+            return datetimePicker.dates.oldParseInput(input);
+        } catch (err) {
+            const errorMsg = element.find('.td-error').data('td-invalid-date');
+            element.find('.td-error').text(errorMsg).show();
+            datetimePicker.dates.clear();
+        }
+    };
 
-            // Clear error message
-            if (e.isValid && !e.isClear) {
-                element.find('.td-error').empty();
-            }
+    datetimePicker.subscribe(tempusDominus.Namespace.events.change, (e) => {
+        // see https://getdatepicker.com/6/namespace/events.html#change
 
-            // If date was selected, close datetimepicker.
-            // However: leave the datetimepicker open if user only changed time
-            if (e.oldDate && e.date && !hasUserChangedDate(e.oldDate, e.date)) {
-                datetimePicker.hide();
-            }
-        });
-    }
+        // Clear error message
+        if (e.isValid && !e.isClear) {
+            element.find('.td-error').empty();
+        }
 
-    function hasUserChangedDate(oldDate, newDate) {
-        return oldDate.getHours() != newDate.getHours()
-            || oldDate.getMinutes() != newDate.getMinutes();
-    }
+        // If date was selected, close datetimepicker.
+        // However: leave the datetimepicker open if user only changed time
+        if (e.oldDate && e.date && !hasUserChangedDate(e.oldDate, e.date)) {
+            datetimePicker.hide();
+        }
+    });
+}
 
-    function registerFocusHandlers(datetimePicker, element) {
-        // Show datetimepicker when user clicks in text field next to button
-        // or when input field receives focus
-        var isButtonInvokingFocus = false;
+function hasUserChangedDate(oldDate, newDate) {
+    return oldDate.getHours() != newDate.getHours()
+        || oldDate.getMinutes() != newDate.getMinutes();
+}
 
-        element.find('.td-input').on('click focusin', (e) => {
-            try {
-                if (!isButtonInvokingFocus) {
-                    datetimePicker.show();
-                }
-            }
-            finally {
-                isButtonInvokingFocus = false;
+function registerFocusHandlers(datetimePicker, element) {
+    // Show datetimepicker when user clicks in text field next to button
+    // or when input field receives focus
+    var isButtonInvokingFocus = false;
+
+    element.find('.td-input').on('click focusin', (e) => {
+        try {
+            if (!isButtonInvokingFocus) {
+                datetimePicker.show();
             }
-        });
+        }
+        finally {
+            isButtonInvokingFocus = false;
+        }
+    });
 
-        element.find('.td-picker-button').on('click', () => {
-            isButtonInvokingFocus = true;
-            element.find('.td-input').focus();
-        });
+    element.find('.td-picker-button').on('click', () => {
+        isButtonInvokingFocus = true;
+        element.find('.td-input').focus();
+    });
 
-        // Hide datetimepicker when input field loses focus
-        element.find('.td-input').blur((e) => {
-            if (!e.relatedTarget) {
-                return;
-            }
-            datetimePicker.hide();
-        });
-    }
-});
\ No newline at end of file
+    // Hide datetimepicker when input field loses focus
+    element.find('.td-input').blur((e) => {
+        if (!e.relatedTarget) {
+            return;
+        }
+        datetimePicker.hide();
+    });
+}

From 466180bfdabd3fe5db02b0bdf9f3e5be0e791b3b Mon Sep 17 00:00:00 2001
From: Splines <dominic-plein@gmx.de>
Date: Thu, 13 Jul 2023 00:40:27 +0200
Subject: [PATCH 22/25] Fix assignment title CSS id

---
 app/views/assignments/update.coffee | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/views/assignments/update.coffee b/app/views/assignments/update.coffee
index 55c4573c4..6373d3e4a 100644
--- a/app/views/assignments/update.coffee
+++ b/app/views/assignments/update.coffee
@@ -1,13 +1,13 @@
 <% if @errors.present? %>
 # clean up from previous error messages
-$('#assignment_title').removeClass('is-invalid')
+$('#assignment_title_').removeClass('is-invalid')
 $('#assignment-title-error').empty()
 
 # display error message
 <% if @errors[:title].present? %>
 $('#assignment-title-error')
   .append('<%= @errors[:title].join(" ") %>').show()
-$('#assignment_title').addClass('is-invalid')
+$('#assignment_title_').addClass('is-invalid')
 <% end %>
 <% if @errors[:deadline].present? %>
 $('#assignment-deadline-error')

From 9d6f59d0d9c11bf7df1c8753aaf32e0e8fe0d1f1 Mon Sep 17 00:00:00 2001
From: Splines <dominic-plein@gmx.de>
Date: Thu, 13 Jul 2023 00:45:15 +0200
Subject: [PATCH 23/25] Empty error message upon update of assignment

---
 app/views/assignments/update.coffee | 2 ++
 config/locales/de.yml               | 2 +-
 config/locales/en.yml               | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/views/assignments/update.coffee b/app/views/assignments/update.coffee
index 6373d3e4a..b8acfcba6 100644
--- a/app/views/assignments/update.coffee
+++ b/app/views/assignments/update.coffee
@@ -2,6 +2,8 @@
 # clean up from previous error messages
 $('#assignment_title_').removeClass('is-invalid')
 $('#assignment-title-error').empty()
+$('#assignment_deadline').removeClass('is-invalid')
+$('#assignment-deadline-error').empty()
 
 # display error message
 <% if @errors[:title].present? %>
diff --git a/config/locales/de.yml b/config/locales/de.yml
index 3b5fd6038..5e3425d65 100644
--- a/config/locales/de.yml
+++ b/config/locales/de.yml
@@ -2442,7 +2442,7 @@ de:
     formats:
       concise: '%d.%m.%Y'
   datetimepicker:
-    invalid_date: 'Ungültiges Datums-Zeit-Format'
+    invalid_date: 'Ungültiges Datums-Zeit-Format.'
   time:
     formats:
       concise: '%d.%m.%Y'
diff --git a/config/locales/en.yml b/config/locales/en.yml
index ae63270f0..836f25839 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2301,7 +2301,7 @@ en:
     formats:
       concise: '%Y-%m-%d'
   datetimepicker:
-    invalid_date: 'Invalid date time format'
+    invalid_date: 'Invalid date time format.'
   time:
     formats:
       concise: '%Y-%m-%d'

From c0ab1a50f807ef63931a8e9090b0ee75cd77f57e Mon Sep 17 00:00:00 2001
From: Splines <dominic-plein@gmx.de>
Date: Thu, 13 Jul 2023 01:01:35 +0200
Subject: [PATCH 24/25] Restore old code for "assignment_title"

---
 app/views/assignments/update.coffee | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/views/assignments/update.coffee b/app/views/assignments/update.coffee
index b8acfcba6..0378a3237 100644
--- a/app/views/assignments/update.coffee
+++ b/app/views/assignments/update.coffee
@@ -1,6 +1,6 @@
 <% if @errors.present? %>
 # clean up from previous error messages
-$('#assignment_title_').removeClass('is-invalid')
+$('#assignment_title').removeClass('is-invalid')
 $('#assignment-title-error').empty()
 $('#assignment_deadline').removeClass('is-invalid')
 $('#assignment-deadline-error').empty()
@@ -9,7 +9,7 @@ $('#assignment-deadline-error').empty()
 <% if @errors[:title].present? %>
 $('#assignment-title-error')
   .append('<%= @errors[:title].join(" ") %>').show()
-$('#assignment_title_').addClass('is-invalid')
+$('#assignment_title').addClass('is-invalid')
 <% end %>
 <% if @errors[:deadline].present? %>
 $('#assignment-deadline-error')

From b5e3fe90d90965a2f1f9f2569a763b03a5dd3d33 Mon Sep 17 00:00:00 2001
From: Splines <dominic-plein@gmx.de>
Date: Thu, 13 Jul 2023 18:50:46 +0200
Subject: [PATCH 25/25] Use 'before-cache' instead of 'load' with Turbolinks

---
 app/assets/javascripts/datetimepicker.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/javascripts/datetimepicker.js b/app/assets/javascripts/datetimepicker.js
index a40ec72d2..07aaf97a6 100644
--- a/app/assets/javascripts/datetimepicker.js
+++ b/app/assets/javascripts/datetimepicker.js
@@ -2,7 +2,7 @@
 $(document).ready(startInitialization);
 
 // On page change (e.g. go back and forth in browser)
-document.addEventListener('turbolinks:load', () => {
+$(document).on('turbolinks:before-cache', () => {
     // Remove stale datetimepickers
     $('.tempus-dominus-widget').remove();
 });