[IMP] web: multiple improvements on datepicker

* Changed the default value of datetime to "is between" with "today"
as the default value (same day 00:00:00 to 23:59:59).
* Changed the style of the "Close" button to match the one on the "primary buttons".
* added increments to the minutes in daterange
Minutes can now be chosen by increments of 5 instead of 10.

Task 2068164

--
I confirm I have signed the CLA and read the PR guidelines at www.odoo.com/submit-pr

closes odoo/odoo#36775

Signed-off-by: VincentSchippefilt <VincentSchippefilt@users.noreply.github.com>

addons/web/static/src/js/fields/basic_fields.js

@@ -588,7 +588,7 @@ var FieldDateRange = InputField.extend({
                 timePicker: !this.isDateField,
                 timePicker24Hour: _t.database.parameters.time_format.search('%H') !== -1,
                 autoUpdateInput: false,
-                timePickerIncrement: 10,
+                timePickerIncrement: 5,
                 locale: {
                     format: this.isDateField ? time.getLangDateFormat() : time.getLangDatetimeFormat(),
                 },

addons/web/static/src/js/views/control_panel/search/search_filters.js

@@ -184,13 +184,13 @@ var DateTime = Field.extend({
         type: 'datetime'
     },
     operators: [
+        {value: "between", text: _lt("is between")},
         {value: "=", text: _lt("is equal to")},
         {value: "!=", text: _lt("is not equal to")},
         {value: ">", text: _lt("is after")},
         {value: "<", text: _lt("is before")},
         {value: ">=", text: _lt("is after or equal to")},
         {value: "<=", text: _lt("is before or equal to")},
-        {value: "between", text: _lt("is between")},
         {value: "∃", text: _lt("is set")},
         {value: "∄", text: _lt("is not set")}
     ],
@@ -216,15 +216,9 @@ var DateTime = Field.extend({
         this._super.apply(this, arguments);
 
         if ($operator.val() === "between") {
-            if (!this.datewidget_1) {
-                this._create_new_widget("datewidget_1");
-            } else {
-                this.datewidget_1.do_show();
-            }
+            this.datewidget_1.do_show();
         } else {
-            if (this.datewidget_1) {
-                this.datewidget_1.do_hide();
-            }
+            this.datewidget_1.do_hide();
         }
     },
     toString: function () {
@@ -238,13 +232,18 @@ var DateTime = Field.extend({
     start: function () {
         return Promise.all([
             this._super.apply(this, arguments),
-            this._create_new_widget("datewidget_0")
-        ]);
+            this._create_new_widget("datewidget_0", '00:00:00', 'hh:mm:ss'),
+            this._create_new_widget("datewidget_1", '23:59:59', 'hh:mm:ss'),
+        ]).then(() => {
+            if (this.operators[0].value !== "between") {
+                this.datewidget_1.do_hide();
+            }
+        });
     },
-    _create_new_widget: function (name) {
+    _create_new_widget: function (name, ...time) {
         this[name] = new (this._get_widget_class())(this);
         return this[name].appendTo(this.$el).then((function () {
-            this[name].setValue(moment());
+            this[name].setValue(moment(...time));
         }).bind(this));
     },
     _get_widget_class: function () {
@@ -256,6 +255,17 @@ var Date = DateTime.extend({
     attributes: {
         type: 'date'
     },
+    operators: [
+        {value: "=", text: _lt("is equal to")},
+        {value: "!=", text: _lt("is not equal to")},
+        {value: ">", text: _lt("is after")},
+        {value: "<", text: _lt("is before")},
+        {value: ">=", text: _lt("is after or equal to")},
+        {value: "<=", text: _lt("is before or equal to")},
+        {value: "between", text: _lt("is between")},
+        {value: "∃", text: _lt("is set")},
+        {value: "∄", text: _lt("is not set")}
+    ],
     get_value: function (index) {
         // retrieve the datepicker value
         return this["datewidget_" + (index || 0)].getValue();

addons/web/static/src/js/widgets/date_picker.js

@@ -42,7 +42,7 @@ var DateWidget = Widget.extend({
                 next: 'fa fa-chevron-right',
                 today: 'fa fa-calendar-check-o',
                 clear: 'fa fa-delete',
-                close: 'fa fa-times'
+                close: 'fa fa-check primary',
             },
             calendarWeeks: true,
             buttons: {

addons/web/static/src/scss/datepicker.scss

@@ -84,6 +84,20 @@ div.dropdown-menu.bootstrap-datetimepicker-widget{
     }
 }
 
+.picker-switch {
+    span.fa {
+        margin: 0;
+        @include transition($btn-transition);
+        &.primary {
+            background-color: $o-brand-primary;
+            color: white;
+            &:hover {
+                background-color: darken($o-brand-primary, 10%);
+            }
+        }
+    }
+}
+
 // This is rtl language specific fix
 // it will fix the user agent stylesheet padding
 // and transform the prev and next icons

addons/web/static/tests/fields/basic_fields_tests.js

@@ -2636,7 +2636,7 @@ QUnit.module('basic_fields', {
     QUnit.module('FieldDateRange');
 
     QUnit.test('Datetime field', async function (assert) {
-        assert.expect(19);
+        assert.expect(20);
 
         this.data.partner.fields.datetime_end = {string: 'Datetime End', type: 'datetime'};
         this.data.partner.records[0].datetime_end = '2017-03-13 00:00:00';
@@ -2685,6 +2685,8 @@ QUnit.module('basic_fields', {
             "active end date hour should be '5' in date range picker");
         assert.strictEqual($('.daterangepicker:first .drp-calendar.right .minuteselect').val(), '30',
             "active end date minute should be '30' in date range picker");
+        assert.containsN($('.daterangepicker:first .drp-calendar.left .minuteselect'), 'option', 12,
+            "minute selection should contain 12 options (1 for each 5 minutes)");
 
         // Close picker
         await testUtils.dom.click($('.daterangepicker:first .cancelBtn'));

addons/web/static/tests/views/search_view_tests.js

@@ -372,7 +372,7 @@ QUnit.module('Search View', {
         assert.expect(7);
 
         const unpatchDate = patchDate(2019,6,31,13,43,0);
-        
+
         var actionManager = await createActionManager({
             actions: this.actions,
             archs: this.archs,
@@ -524,7 +524,7 @@ QUnit.module('Search View', {
         await testUtils.dom.click($('.o_search_options button span.fa-filter'));
         await testUtils.dom.click($('.o_filters_menu .o_menu_item a').first());
         await testUtils.dom.click($('.o_graph_controller .o_control_panel .o_cp_buttons button').eq(1));
-        await testUtils.dom.click($('.o_graph_controller .o_group_by_menu .o_menu_item').eq(1));   
+        await testUtils.dom.click($('.o_graph_controller .o_group_by_menu .o_menu_item').eq(1));
         assert.doesNotHaveClass($('.o_graph_controller .o_group_by_menu .o_menu_item > .dropdown-item').eq(1), 'selected',
             'groupby should be still unselected');
         actionManager.destroy();
@@ -1116,7 +1116,7 @@ QUnit.module('Search View', {
         // activate Foo a
         await testUtils.fields.triggerKey('press', $('.o_searchview_input'), 97);
         await testUtils.fields.triggerKey('up', $('.o_searchview_input'), 'enter');
-        
+
         // activate Date Filter with This Month
         await testUtils.dom.click($('button .fa-filter'));
         await testUtils.dom.click($('.o_filters_menu .o_menu_item a'));
@@ -1604,7 +1604,7 @@ QUnit.module('Search View', {
         var $filterDropdown = $('.modal .o_filters_menu');
         await testUtils.dom.click($filterDropdown.find('.o_add_custom_filter'));
 
-        assert.containsN($filterDropdown, '.o_input', 3);
+        assert.containsN($filterDropdown, '.o_input', 4);
 
         // We really are interested in the click event
         // We do it twice on each input to make sure