diff --git a/addons/web/static/src/views/fields/properties/properties_field.js b/addons/web/static/src/views/fields/properties/properties_field.js
index b48446fe9b1..959e2175b5b 100644
--- a/addons/web/static/src/views/fields/properties/properties_field.js
+++ b/addons/web/static/src/views/fields/properties/properties_field.js
@@ -91,9 +91,13 @@ export class PropertiesField extends Component {
      * @returns {array}
      */
     get propertiesList() {
-        const propertiesValues = JSON.parse(
-            JSON.stringify(this.props.record.data[this.props.name] || [])
-        );
+        const propertiesValues = (this.props.record.data[this.props.name] || []).map(property => {
+            if (["date", "datetime"].includes(property.type)) {
+                // Date and Datetime are immutable luxon objects.
+                return property;
+            }
+            return JSON.parse(JSON.stringify(property));
+        });
         return propertiesValues.filter((definition) => !definition.definition_deleted);
     }
 
diff --git a/addons/web/static/tests/views/fields/properties_field_tests.js b/addons/web/static/tests/views/fields/properties_field_tests.js
index 75004839f54..fce90b7873c 100644
--- a/addons/web/static/tests/views/fields/properties_field_tests.js
+++ b/addons/web/static/tests/views/fields/properties_field_tests.js
@@ -1357,6 +1357,58 @@ QUnit.module("Fields", (hooks) => {
         assert.equal(items.length, 2);
     });
 
+    QUnit.test("properties: kanban view with date and datetime property fields", async function (assert) {
+        serverData.models.partner.records.push({
+            id: 40,
+            display_name: "fifth partner",
+            properties: [
+                {
+                    name: "property_1",
+                    string: "My Date",
+                    type: "date",
+                    value: "2019-01-01",
+                    view_in_kanban: true,
+                },
+                {
+                    name: "property_2",
+                    string: "My DateTime",
+                    type: "datetime",
+                    value: "2019-01-01 10:00:00",
+                    view_in_kanban: true,
+                },
+            ],
+            company_id: 37,
+        });
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+            <kanban>
+                <templates>
+                    <t t-name="kanban-box">
+                        <div>
+                            <field name="company_id"/> <hr/>
+                            <field name="display_name"/> <hr/>
+                            <field name="properties" widget="properties"/>
+                        </div>
+                    </t>
+                </templates>
+            </kanban>`,
+        });
+
+        // check fifth card
+        const property1 = target.querySelector(
+            ".o_kanban_record:nth-child(5) .o_kanban_property_field:nth-child(1) span"
+        );
+        assert.equal(property1.innerText, "01/01/2019");
+        const property2 = target.querySelector(
+            ".o_kanban_record:nth-child(5) .o_kanban_property_field:nth-child(2) span"
+        );
+        assert.equal(property2.innerText, "01/01/2019 11:00:00");
+    });
+
     QUnit.test(
         "properties: kanban view with multiple sources of properties definitions",
         async function (assert) {