diff --git a/addons/web/static/src/js/components/datepicker.js b/addons/web/static/src/js/components/datepicker.js
index d7d62ba104e..6031c72fc69 100644
--- a/addons/web/static/src/js/components/datepicker.js
+++ b/addons/web/static/src/js/components/datepicker.js
@@ -42,7 +42,8 @@ odoo.define('web.DatePickerOwl', function (require) {
             $(this.el).on('hide.datetimepicker', this._onDateTimePickerHide.bind(this));
             $(this.el).on('error.datetimepicker', () => false);
 
-            this._datetimepicker(this.props);
+            const pickerOptions = Object.assign({ format: this.defaultFormat }, this.props);
+            this._datetimepicker(pickerOptions);
             this.inputRef.el.value = this._formatDate(this.props.date);
         }
 
@@ -51,8 +52,10 @@ odoo.define('web.DatePickerOwl', function (require) {
         }
 
         willUpdateProps(nextProps) {
+            for (const prop in nextProps) {
+                this._datetimepicker(prop, nextProps[prop]);
+            }
             if (nextProps.date) {
-                this._datetimepicker('date', nextProps.date);
                 this.inputRef.el.value = this._formatDate(nextProps.date);
             }
         }
@@ -61,6 +64,17 @@ odoo.define('web.DatePickerOwl', function (require) {
         // Private
         //---------------------------------------------------------------------
 
+        /**
+         * @returns {string}
+         */
+        get defaultFormat() {
+            return time.getLangDateFormat();
+        }
+
+        //---------------------------------------------------------------------
+        // Private
+        //---------------------------------------------------------------------
+
         /**
          * Handle bootstrap datetimepicker calls.
          * @private
@@ -153,7 +167,6 @@ odoo.define('web.DatePickerOwl', function (require) {
 
     DatePicker.defaultProps = {
         calendarWeeks: true,
-        format: time.getLangDateFormat(),
         icons: {
             clear: 'fa fa-delete',
             close: 'fa fa-check primary',
@@ -185,7 +198,7 @@ odoo.define('web.DatePickerOwl', function (require) {
             optional: 1,
         },
         calendarWeeks: Boolean,
-        format: String,
+        format: { type: String, optional: 1 },
         icons: {
             type: Object,
             shape: {
@@ -226,6 +239,13 @@ odoo.define('web.DatePickerOwl', function (require) {
 
             this.typeOfDate = 'datetime';
         }
+
+        /**
+         * @override
+         */
+        get defaultFormat() {
+            return time.getLangDatetimeFormat();
+        }
     }
 
     DateTimePicker.defaultProps = Object.assign({}, DatePicker.defaultProps, {
@@ -234,7 +254,6 @@ odoo.define('web.DatePickerOwl', function (require) {
             showClose: true,
             showToday: false,
         },
-        format: time.getLangDatetimeFormat(),
     });
 
     return {
diff --git a/addons/web/static/tests/components/datepicker_tests.js b/addons/web/static/tests/components/datepicker_tests.js
index 995521259a1..7e59e9620d7 100644
--- a/addons/web/static/tests/components/datepicker_tests.js
+++ b/addons/web/static/tests/components/datepicker_tests.js
@@ -3,6 +3,7 @@ odoo.define('web.datepicker_tests', function (require) {
 
     const { DatePicker, DateTimePicker } = require('web.DatePickerOwl');
     const testUtils = require('web.test_utils');
+    const time = require('web.time');
 
     const { createComponent } = testUtils;
 
@@ -101,6 +102,26 @@ odoo.define('web.datepicker_tests', function (require) {
             picker.destroy();
         });
 
+        QUnit.test("Date format is correctly set", async function (assert) {
+            assert.expect(2);
+
+            testUtils.patch(time, { getLangDateFormat: () => "YYYY/MM/DD" });
+            const picker = await createComponent(DatePicker, {
+                props: { date: moment('01/09/1997') },
+            });
+            const input = picker.el.querySelector('.o_datepicker_input');
+
+            assert.strictEqual(input.value, '1997/01/09');
+
+            // Forces an update to assert that the registered format is the correct one
+            await testUtils.dom.click(input);
+
+            assert.strictEqual(input.value, '1997/01/09');
+
+            picker.destroy();
+            testUtils.unpatch(time);
+        });
+
         QUnit.module('DateTimePicker');
 
         QUnit.test("basic rendering", async function (assert) {
@@ -211,5 +232,25 @@ odoo.define('web.datepicker_tests', function (require) {
 
             picker.destroy();
         });
+
+        QUnit.test("Date time format is correctly set", async function (assert) {
+            assert.expect(2);
+
+            testUtils.patch(time, { getLangDatetimeFormat: () => "hh:mm:ss YYYY/MM/DD" });
+            const picker = await createComponent(DateTimePicker, {
+                props: { date: moment('01/09/1997 12:30:01') },
+            });
+            const input = picker.el.querySelector('.o_datepicker_input');
+
+            assert.strictEqual(input.value, '12:30:01 1997/01/09');
+
+            // Forces an update to assert that the registered format is the correct one
+            await testUtils.dom.click(input);
+
+            assert.strictEqual(input.value, '12:30:01 1997/01/09');
+
+            picker.destroy();
+            testUtils.unpatch(time);
+        });
     });
 });