diff --git a/addons/web/static/src/core/datepicker/datepicker.js b/addons/web/static/src/core/datepicker/datepicker.js
index cb621febd4f..ba14e5fb0f0 100644
--- a/addons/web/static/src/core/datepicker/datepicker.js
+++ b/addons/web/static/src/core/datepicker/datepicker.js
@@ -220,10 +220,10 @@ export class DatePicker extends Component {
         const options = this.getOptions(useStatic);
         const parsedDate = this.parseValue(value, options)[0];
         this.state.warning = parsedDate && parsedDate > DateTime.local();
-        if (value && !parsedDate) {
-            // Reset to default (= given) date.
-            this.updateInput();
-        }
+        // Always update input.
+        // if the date is invalid, it will reset to default (= given) date.
+        // if the input is a computed date (+5d for instance), it will put the correct date.
+        this.updateInput();
         if (parsedDate !== null && !areDateEquals(this.date, parsedDate)) {
             this.props.onDateTimeChanged(parsedDate);
         }
diff --git a/addons/web/static/tests/core/domain_selector_tests.js b/addons/web/static/tests/core/domain_selector_tests.js
index cf9b4396066..e8d27edcf3c 100644
--- a/addons/web/static/tests/core/domain_selector_tests.js
+++ b/addons/web/static/tests/core/domain_selector_tests.js
@@ -181,21 +181,33 @@ QUnit.module("Components", (hooks) => {
     QUnit.test("building a domain with a datetime", async (assert) => {
         assert.expect(4);
 
+        class Parent extends Component {
+            setup() {
+                this.value = `[("datetime", "=", "2017-03-27 15:42:00")]`;
+            }
+            onUpdate(newValue) {
+                assert.strictEqual(
+                    newValue,
+                    `[("datetime", "=", "2017-02-26 15:42:00")]`,
+                    "datepicker value should have changed"
+                );
+                this.value = newValue;
+                this.render();
+            }
+        }
+        Parent.components = { DomainSelector };
+        Parent.template = xml`
+            <DomainSelector
+                resModel="'partner'"
+                value="value"
+                readonly="false"
+                isDebugMode="true"
+                update="(newValue) => this.onUpdate(newValue)"
+            />
+        `;
+
         // Create the domain selector and its mock environment
-        await mountComponent(DomainSelector, {
-            props: {
-                resModel: "partner",
-                value: `[("datetime", "=", "2017-03-27 15:42:00")]`,
-                readonly: false,
-                update: (newValue) => {
-                    assert.strictEqual(
-                        newValue,
-                        `[("datetime", "=", "2017-02-26 15:42:00")]`,
-                        "datepicker value should have changed"
-                    );
-                },
-            },
-        });
+        await mountComponent(Parent);
 
         // Check that there is a datepicker to choose the date
         assert.containsOnce(target, ".o_datepicker", "there should be a datepicker");
@@ -241,8 +253,9 @@ QUnit.module("Components", (hooks) => {
             document.body.querySelector(`.bootstrap-datetimepicker-widget [data-action=close]`)
         );
 
-        // The input field should display an empty value. NB: this could be improved, but OK for now
-        assert.equal(target.querySelector(".o_datepicker_input").value, "");
+        // The input field should continue displaying 'Invalid DateTime'.
+        // The value is still invalid.
+        assert.equal(target.querySelector(".o_datepicker_input").value, "Invalid DateTime");
         assert.verifySteps([]);
     });
 
diff --git a/addons/web/static/tests/views/fields/date_field_tests.js b/addons/web/static/tests/views/fields/date_field_tests.js
index e212538cd78..cd2df9ce7fa 100644
--- a/addons/web/static/tests/views/fields/date_field_tests.js
+++ b/addons/web/static/tests/views/fields/date_field_tests.js
@@ -4,9 +4,11 @@ import { makeFakeLocalizationService } from "@web/../tests/helpers/mock_services
 import {
     click,
     clickCreate,
+    clickDiscard,
     clickSave,
     editInput,
     getFixture,
+    patchDate,
     patchTimeZone,
     patchWithCleanup,
     triggerEvent,
@@ -741,4 +743,35 @@ QUnit.module("Fields", (hooks) => {
             `08/01/${year}`
         );
     });
+
+    QUnit.test("DateField: allow to use compute dates (+5d for instance)", async function (assert) {
+        patchDate(2021, 1, 15, 10, 0, 0); // current date : 15 Feb 2021 10:00:00
+        serverData.models.partner.fields.date.default = "2019-09-15";
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="date"></field></form>',
+        });
+
+        assert.strictEqual(target.querySelector(".o_field_widget input").value, "09/15/2019"); // default date
+
+        // Calculate a new date from current date + 5 days
+        await editInput(target, ".o_field_widget[name=date] input", "+5d");
+        assert.strictEqual(target.querySelector(".o_field_widget input").value, "02/20/2021");
+
+        // Discard and do it again
+        await clickDiscard(target);
+        assert.strictEqual(target.querySelector(".o_field_widget input").value, "09/15/2019"); // default date
+        await editInput(target, ".o_field_widget[name=date] input", "+5d");
+        assert.strictEqual(target.querySelector(".o_field_widget input").value, "02/20/2021");
+
+        // Save and do it again
+        await clickSave(target);
+        // new computed date (current date + 5 days) is saved
+        assert.strictEqual(target.querySelector(".o_field_widget input").value, "02/20/2021");
+        await editInput(target, ".o_field_widget[name=date] input", "+5d");
+        assert.strictEqual(target.querySelector(".o_field_widget input").value, "02/20/2021");
+    });
 });