Change date time picker widget

judge/widgets/datetime.py

@@ -1,24 +1,19 @@
 from django import forms
+from django.templatetags.static import static
+from django.utils.html import format_html
+from django.forms.utils import flatatt
 
 
 class DateTimePickerWidget(forms.DateTimeInput):
-    template_name = "widgets/datetimepicker.html"
+    input_type = "datetime-local"
 
-    def get_context(self, name, value, attrs):
-        datetimepicker_id = "datetimepicker_{name}".format(name=name)
-        if attrs is None:
-            attrs = dict()
-        attrs["data-target"] = "#{id}".format(id=datetimepicker_id)
-        attrs["class"] = "form-control datetimepicker-input"
-        context = super().get_context(name, value, attrs)
-        context["widget"]["datetimepicker_id"] = datetimepicker_id
-        return context
+    def render(self, name, value, attrs=None, renderer=None):
+        if value is None:
+            value = ""
+        else:
+            value = value.strftime("%Y-%m-%dT%H:%M")
 
-    @property
-    def media(self):
-        css_url = "/static/datetime-picker/datetimepicker.min.css"
-        js_url = "/static/datetime-picker/datetimepicker.full.min.js"
-        return forms.Media(
-            js=[js_url],
-            css={"screen": [css_url]},
+        final_attrs = self.build_attrs(
+            attrs, {"type": self.input_type, "name": name, "value": value}
         )
+        return format_html("<input{}>", flatatt(final_attrs))

resources/blog.scss

@@ -262,6 +262,13 @@
     border-radius: 1em;
 }
 
+.post-content-header {
+    margin-left: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.2em;
+}
+
 
 @media (max-width: 799px) {
     .blog-sidebar,

resources/widgets.scss

@@ -143,7 +143,7 @@
 }
 
 input {
-    &[type=text], &[type=password], &[type=email], &[type=number] {
+    &[type=text], &[type=password], &[type=email], &[type=number], &[type=datetime-local] {
         padding: 4px 8px;
         color: #555;
         background: #FFF none;

templates/blog/content.html

@@ -1,7 +1,7 @@
 {% for post in posts%}
   <section class="{% if post.sticky %}sticky {% endif %}blog-box">
     <div style="margin-bottom: 0.5em">
-      <span class="item-header time">
+      <span class="post-content-header time">
         {% with authors=post.authors.all() %}
           {%- if authors -%}
             <span class="user-img" style="width: 1.5em; height: 1.5em">

templates/blog/list.html

@@ -7,12 +7,6 @@
         clear: both;
       }
     }
-    .item-header {
-      margin-left: 0;
-      display: inline-flex;
-      align-items: center;
-      gap: 0.2em;
-    }
 
     .no-clarifications-message {
       font-style: italic;

templates/widgets/datetimepicker.html

@@ -1,21 +0,0 @@
-<input
-  autocomplete="off"
-  type="{{ widget.type }}"
-  name="{{ widget.name }}"
-  {% if widget.value != None %}
-    value="{{ widget.value }}"
-  {% endif %}
-  {% for name, value in widget.attrs.items() %}
-    {% if value %}
-      {{ name }}{% if not value %}="{{ value }}"{% endif %}
-    {% endif %}
-  {% endfor %}
-/>
-
-<script>
-  $(function () {
-    $("input[name='{{ widget.name }}']").datetimepicker({
-      format: 'Y-m-d H:i:s',
-    });
-  });
-</script>