[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

2 files changed, 30 insertions, 0 deletions

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