[IMP] web: Add option on 'Datepicker' to warn when setting date in the future

Purpose
=======

There's no generic way to display a warning message if the user tries to set
a date in the future.

Specification
=============

Add this new feature on the datepicker (in web module), and use it account. For
example for the invoice date on the invoice/vendor bills form view.

TaskID: 1868221

4 files changed, 33 insertions, 3 deletions

diff --git a/addons/account/views/account_invoice_view.xml b/addons/account/views/account_invoice_view.xml
index 5e908ce7339..233d3a2c583 100644
--- a/addons/account/views/account_invoice_view.xml
+++ b/addons/account/views/account_invoice_view.xml
@@ -294,7 +294,7 @@
                         <group>
                             <field name="origin" attrs="{'invisible': [('origin', '=', False)]}"/>
                             <field name="source_email" widget="email" groups="base.group_no_one" attrs="{'invisible': [('source_email', '=', False)]}"/>
-                            <field name="date_invoice" string="Bill Date"/>
+                            <field name="date_invoice" string="Bill Date" options="{'datepicker': {'warn_future': true}}"/>
                             <field name="date_due" attrs="{'readonly': ['|',('payment_term_id','!=',False), ('state', 'in', ['open', 'paid'])]}" force_save="1"/>
                             <field name="move_name" invisible="1"/>
                             <field name="currency_id" options="{'no_create': True, 'no_open': True}" groups="base.group_multi_currency"/>
@@ -442,7 +442,7 @@
                             <field name="cash_rounding_id" groups="account.group_cash_rounding"/>
                         </group>
                         <group>
-                            <field name="date_invoice"/>
+                            <field name="date_invoice" options="{'datepicker': {'warn_future': true}}"/>
                             <field name="date_due" attrs="{'readonly': ['|',('payment_term_id','!=',False), ('state', 'in', ['open', 'paid'])]}" force_save="1"/>
                             <field name="move_name" invisible="1"/>
                             <field name="user_id" groups="base.group_user"/>
diff --git a/addons/account/views/account_view.xml b/addons/account/views/account_view.xml
index 67c3be21db3..7284cad6f4e 100644
--- a/addons/account/views/account_view.xml
+++ b/addons/account/views/account_view.xml
@@ -670,7 +670,7 @@
                             <field name="cashbox_start_id" invisible="1"/>
                             <field name="cashbox_end_id" invisible="1"/>
                             <field name="journal_id" domain="[('type', '=', journal_type)]" attrs="{'readonly': [('move_line_count','!=', 0)]}" widget="selection"/>
-                            <field name="date"/>
+                            <field name="date" options="{'datepicker': {'warn_future': true}}" />
                             <field name="accounting_date" groups="base.group_no_one"/>
                             <field name='company_id' options="{'no_create': True}" groups="base.group_multi_company" />
                             <field name="currency_id" invisible="1"/>
diff --git a/addons/web/static/src/js/widgets/date_picker.js b/addons/web/static/src/js/widgets/date_picker.js
index 9d47e79f6a7..7220bd6efd5 100644
--- a/addons/web/static/src/js/widgets/date_picker.js
+++ b/addons/web/static/src/js/widgets/date_picker.js
@@ -1,10 +1,13 @@
 odoo.define('web.datepicker', function (require) {
 "use strict";
 
+var core = require('web.core');
 var field_utils = require('web.field_utils');
 var time = require('web.time');
 var Widget = require('web.Widget');
 
+var _t = core._t;
+
 var DateWidget = Widget.extend({
     template: "web.datepicker",
     type_of_date: "date",
@@ -95,6 +98,9 @@ var DateWidget = Widget.extend({
             if (hasChanged) {
                 // The condition is strangely written; this is because the
                 // values can be false/undefined
+                if (this.options.warn_future) {
+                    this._warnFuture(newValue);
+                }
                 this.trigger("datetime_changed");
             }
         }
@@ -139,6 +145,25 @@ var DateWidget = Widget.extend({
     //--------------------------------------------------------------------------
 
     /**
+     * add a warning to communicate that a date in the future has been set
+     *
+     * @private
+     * @param {Moment} currentDate
+     */
+    _warnFuture: function(currentDate) {
+        if (!this.$warning) {
+            this.$warning = $('<span class="fa fa-exclamation-triangle o_tz_warning o_datepicker_warning"/>')
+            this.$warning.attr('title', _t("This date is on the future. Make sure it is what you expected."))
+            this.$input.after(this.$warning)
+        }
+        if (currentDate.isAfter(moment())) {
+            this.$warning.show()
+        } else {
+            this.$warning.hide()
+        }
+    },
+
+    /**
      * @private
      * @param {Moment} v
      * @returns {string}
diff --git a/addons/web/static/src/scss/datepicker.scss b/addons/web/static/src/scss/datepicker.scss
index a9642c91df4..4658f26cedd 100644
--- a/addons/web/static/src/scss/datepicker.scss
+++ b/addons/web/static/src/scss/datepicker.scss
@@ -25,6 +25,11 @@
             @include o-caret-down;
         }
     }
+
+    .o_datepicker_warning {
+        top: 0;
+        right: 20px;
+    }
 }