[FIX] web: datepicker get correct database format

Before this commit, the format used by both date and datetime picker
components depended on default props which are evaluated on module
loading. This was an issue because the "time" module did not have time
to load and fetch the correct database value, hence using the default
ones.

Now, the format is evaluated on component instantiation, giving enough
time to the "time" module to load.

Task 2307258

closes odoo/odoo#55113

X-original-commit: 792b565a65a8c9f65bf13e94f30b88913f2bfa7f
Signed-off-by: Paul Morelle <madprog@users.noreply.github.com>
Signed-off-by: Julien Mougenot (jum) <jum@odoo.com>

2 files changed, 65 insertions, 5 deletions

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);
             }
         }
@@ -62,6 +65,17 @@ odoo.define('web.DatePickerOwl', function (require) {
         //---------------------------------------------------------------------
 
         /**
+         * @returns {string}
+         */
+        get defaultFormat() {
+            return time.getLangDateFormat();
+        }
+
+        //---------------------------------------------------------------------
+        // Private
+        //---------------------------------------------------------------------
+
+        /**
          * Handle bootstrap datetimepicker calls.
          * @private
          * @param {...any} args anything that will be passed to the datetimepicker function.
@@ -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);
+        });
     });
 });