Try out Tempus Dominus datetimepicker on assignments

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

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,

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/[email protected]/dist/umd/popper.min.js" crossorigin="anonymous">
+</script>
+<script src="https://cdn.jsdelivr.net/npm/@eonasdan/[email protected]/dist/js/tempus-dominus.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@eonasdan/[email protected]/dist/js/jQuery-provider.js"></script>
+
+<link rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@eonasdan/[email protected]/dist/css/tempus-dominus.css"
+/>
+
+
+<%# Datetimepicker (Tempus Dominus) %>
+<!-- Popperjs (needed for Tempus Dominus) -->
+<%# <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" crossorigin="anonymous"></script>
+<!-- Tempus Dominus JavaScript -->
+<script src="https://cdn.jsdelivr.net/npm/@eonasdan/[email protected]/dist/js/tempus-dominus.min.js" crossorigin="anonymous"></script>
+<!-- Tempus Dominus Styles -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@eonasdan/[email protected]/dist/css/tempus-dominus.min.css" crossorigin="anonymous"> %>
+
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sanitize-html.min.js" integrity="sha256-+Tha6wUu+wzAOUzilJ7AmF4OXc3CsY1aMsWopnCVwb4=" crossorigin="anonymous"></script>
 <script defer
         src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"
@@ -59,6 +84,8 @@
   </script>
 <![endif]-->
 
+
+
 <meta name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no">