Fixed #5363 -- HTML5 datetime-local valid format HTMLFormRenderer

Author: mgaligniana

rest_framework/renderers.py

@@ -343,7 +343,11 @@ def render_field(self, field, parent_style):
         field = field.as_form_field()
 
         if style.get('input_type') == 'datetime-local' and isinstance(field.value, str):
-            field.value = field.value.rstrip('Z')
+            # The format of an input type="datetime-local" is "yyyy-MM-ddThh:mm"
+            # followed by optional ":ss" or ":ss.SSS", so keep only the first three
+            # digits of milliseconds to avoid browser console error.
+            datetime_parts = field.value.split(".")
+            field.value = f"{datetime_parts[0]}.{datetime_parts[1][:3]}"
 
         if 'template' in style:
             template_name = style['template']

tests/test_renderers.py

@@ -1,5 +1,6 @@
 import re
 from collections.abc import MutableMapping
+from datetime import datetime
 
 import pytest
 from django.core.cache import cache
@@ -488,6 +489,23 @@ class TestSerializer(serializers.Serializer):
         assert rendered == ''
 
 
+class TestDateTimeFieldHTMLFormRender(TestCase):
+    def test_datetime_field_rendering(self):
+        class TestSerializer(serializers.Serializer):
+            appointment = serializers.DateTimeField()
+
+        appointment = datetime(2024, 12, 24, 00, 55, 30, 345678)
+        serializer = TestSerializer(data={"appointment": appointment})
+        serializer.is_valid()
+        renderer = HTMLFormRenderer()
+        field = serializer['appointment']
+        rendered = renderer.render_field(field, {})
+        self.assertInHTML(
+            '<input name="appointment" class="form-control" type="datetime-local" value="2024-12-24T00:55:30.345">',
+            rendered
+        )
+
+
 class TestHTMLFormRenderer(TestCase):
     def setUp(self):
         class TestSerializer(serializers.Serializer):