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

1 files changed, 24 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 {