[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>

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 {

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);
+        });
     });
 });