[REF] web: datepicker widget

(backport of enterprise version)

* JS/XML refactoring
* Allow user to override default options for the picker

5 files changed, 78 insertions, 78 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index f664c9c1901..6d9ec8961a0 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -1168,14 +1168,14 @@
   width: -webkit-calc(100% - 20px);
   width: calc(100% - 20px);
 }
-.openerp .oe-search-options .searchview_extended_prop_value .oe_datepicker_main {
+.openerp .oe-search-options .searchview_extended_prop_value .o_datepicker {
   width: -webkit-calc(100% - 20px);
   width: calc(100% - 20px);
 }
-.openerp .oe-search-options .searchview_extended_prop_value .oe_datepicker_master {
+.openerp .oe-search-options .searchview_extended_prop_value .o_datepicker .o_datepicker_input {
   width: 100%;
 }
-.openerp .oe-search-options .searchview_extended_prop_value .fa-calendar {
+.openerp .oe-search-options .searchview_extended_prop_value .o_datepicker .o_datepicker_button {
   margin-left: -21px;
   cursor: pointer;
 }
@@ -2212,10 +2212,10 @@
   width: 100% !important;
   text-align: right;
 }
-.openerp .oe_list.oe_list_editable.oe_editing .oe_form_field.oe_form_field_datetime input.oe_datepicker_master, .openerp .oe_list.oe_list_editable.oe_editing .oe_form_field.oe_form_field_date input.oe_datepicker_master {
+.openerp .oe_list.oe_list_editable.oe_editing .oe_form_field.oe_form_field_datetime input.o_datepicker_input, .openerp .oe_list.oe_list_editable.oe_editing .oe_form_field.oe_form_field_date input.o_datepicker_input {
   width: 100% !important;
 }
-.openerp .oe_list.oe_list_editable.oe_editing .oe_form_field.oe_form_field_datetime .oe_datepicker_main, .openerp .oe_list.oe_list_editable.oe_editing .oe_form_field.oe_form_field_date .oe_datepicker_main {
+.openerp .oe_list.oe_list_editable.oe_editing .oe_form_field.oe_form_field_datetime .o_datepicker, .openerp .oe_list.oe_list_editable.oe_editing .oe_form_field.oe_form_field_date .o_datepicker {
   width: -webkit-calc(100% - 20px);
   width: calc(100% - 20px);
 }
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index aac83651105..c390972a69b 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -1058,14 +1058,14 @@ $sheet-padding: 16px
             > select, > input
                 width: -webkit-calc(100% - 20px)
                 width: calc(100% - 20px)
-            .oe_datepicker_main
+            .o_datepicker
                 width: -webkit-calc(100% - 20px)
                 width: calc(100% - 20px)
-            .oe_datepicker_master
-                width: 100%
-            .fa-calendar
-                margin-left: -21px
-                cursor: pointer
+                .o_datepicker_input
+                    width: 100%
+                .o_datepicker_button
+                    margin-left: -21px
+                    cursor: pointer
         span.remove-filter
             position: absolute
             top: 6px
@@ -1900,9 +1900,9 @@ $sheet-padding: 16px
                     width: 100% !important
                     text-align: right
             &.oe_form_field_datetime,&.oe_form_field_date
-                input.oe_datepicker_master
+                input.o_datepicker_input
                     width: 100% !important
-                .oe_datepicker_main
+                .o_datepicker
                     width: -webkit-calc(100% - 20px)
                     width: calc(100% - 20px)
             &.oe_form_field_reference
diff --git a/addons/web/static/src/js/views/form_widgets.js b/addons/web/static/src/js/views/form_widgets.js
index 30599171336..0a1f35ffd68 100644
--- a/addons/web/static/src/js/views/form_widgets.js
+++ b/addons/web/static/src/js/views/form_widgets.js
@@ -500,7 +500,7 @@ var FieldDatetime = common.AbstractField.extend(common.ReinitializeFieldMixin, {
     },
     is_syntax_valid: function() {
         if (!this.get("effective_readonly") && this.datewidget) {
-            return this.datewidget.is_valid_();
+            return this.datewidget.is_valid();
         }
         return true;
     },
diff --git a/addons/web/static/src/js/widgets/date_picker.js b/addons/web/static/src/js/widgets/date_picker.js
index d8d2b131516..9bd4795093d 100644
--- a/addons/web/static/src/js/widgets/date_picker.js
+++ b/addons/web/static/src/js/widgets/date_picker.js
@@ -8,67 +8,66 @@ var Widget = require('web.Widget');
 
 var _t = core._t;
 
-var DateTimeWidget = Widget.extend({
+var DateWidget = Widget.extend({
     template: "web.datepicker",
-    type_of_date: "datetime",
+    type_of_date: "date",
     events: {
-        'dp.change .oe_datepicker_main': 'change_datetime',
-        'dp.show .oe_datepicker_main': 'set_datetime_default',
-        'change .oe_datepicker_master': 'change_datetime',
+        'dp.change': 'change_datetime',
+        'dp.show': 'set_datetime_default',
+        'change .o_datepicker_input': 'change_datetime',
     },
-    init: function(parent) {
-        this._super(parent);
-        this.name = parent.name;
-    },
-    start: function() {
+    init: function(parent, options) {
+        this._super.apply(this, arguments);
+
         var l10n = _t.database.parameters;
-        var options = {
-            pickTime: true,
-            useSeconds: true,
+
+        this.name = parent.name;
+        this.options = _.defaults(options || {}, {
+            pickTime: this.type_of_date === 'datetime',
+            useSeconds: this.type_of_date === 'datetime',
             startDate: moment({ y: 1900 }),
             endDate: moment().add(200, "y"),
             calendarWeeks: true,
-            icons : {
+            icons: {
                 time: 'fa fa-clock-o',
                 date: 'fa fa-calendar',
                 up: 'fa fa-chevron-up',
                 down: 'fa fa-chevron-down'
-               },
+            },
             language : moment.locale(),
-            format : time.strftime_to_moment_format(l10n.date_format +' '+ l10n.time_format),
-        };
-        this.$input = this.$el.find('input.oe_datepicker_master');
-        if (this.type_of_date === 'date') {
-            options.pickTime = false;
-            options.useSeconds = false;
-            options.format = time.strftime_to_moment_format(l10n.date_format);
-        }
-        this.picker = this.$('.oe_datepicker_main').datetimepicker(options);
+            format : time.strftime_to_moment_format((this.type_of_date === 'datetime')? (l10n.date_format + ' ' + l10n.time_format) : l10n.date_format),
+        });
+    },
+    start: function() {
+        this.$input = this.$('input.o_datepicker_input');
+        this.$el.datetimepicker(this.options);
+        this.picker = this.$el.data('DateTimePicker');
         this.set_readonly(false);
-        this.set({'value': false});
+        this.set_value(false);
     },
-    set_value: function(value_) {
-        this.set({'value': value_});
-        this.$input.val(value_ ? this.format_client(value_) : '');
+    set_value: function(value) {
+        this.set({'value': value});
+        this.$input.val((value)? this.format_client(value) : '');
+        this.picker.setValue(value);
     },
     get_value: function() {
         return this.get('value');
     },
-    set_value_from_ui_: function() {
-        var value_ = this.$input.val() || false;
-        this.set_value(this.parse_client(value_));
+    set_value_from_ui: function() {
+        var value = this.$input.val() || false;
+        this.set_value(this.parse_client(value));
     },
     set_readonly: function(readonly) {
         this.readonly = readonly;
         this.$input.prop('readonly', this.readonly);
     },
-    is_valid_: function() {
-        var value_ = this.$input.val();
-        if (value_ === "") {
+    is_valid: function() {
+        var value = this.$input.val();
+        if(value === "") {
             return true;
         } else {
             try {
-                this.parse_client(value_);
+                this.parse_client(value);
                 return true;
             } catch(e) {
                 return false;
@@ -81,40 +80,43 @@ var DateTimeWidget = Widget.extend({
     format_client: function(v) {
         return formats.format_value(v, {"widget": this.type_of_date});
     },
-    set_datetime_default: function(){
+    set_datetime_default: function() {
         //when opening datetimepicker the date and time by default should be the one from
         //the input field if any or the current day otherwise
-        if (_.contains(['datetime', 'date'], this.type_of_date)) {
-            var value = moment().second(0);
-            if (this.$input.val().length !== 0 && this.is_valid_()){
-                value = this.$input.val();
-            }
-            var dt = this.$('.oe_datepicker_main').data('DateTimePicker');
-            // temporarily set pickTime to true to bypass datetimepicker hiding on setValue
-            // see https://github.com/Eonasdan/bootstrap-datetimepicker/issues/603
-            var saved_picktime = dt.options.pickTime;
-            dt.options.pickTime = true;
-            dt.setValue(value);
-            dt.options.pickTime = saved_picktime;
+        var value = moment().second(0);
+        if(this.$input.val().length !== 0 && this.is_valid()) {
+            value = this.$input.val();
         }
+
+        // temporarily set pickTime to true to bypass datetimepicker hiding on setValue
+        // see https://github.com/Eonasdan/bootstrap-datetimepicker/issues/603
+        var saved_picktime = this.picker.options.pickTime;
+        this.picker.options.pickTime = true;
+        this.picker.setValue(value);
+        this.picker.options.pickTime = saved_picktime;
     },
     change_datetime: function(e) {
-        if ((e.type !== "keypress" || e.which === 13) && this.is_valid_()) {
-            this.set_value_from_ui_();
+        if(this.is_valid()) {
+            this.set_value_from_ui();
             this.trigger("datetime_changed");
         }
     },
-    commit_value: function () {
+    commit_value: function() {
         this.change_datetime();
     },
+    destroy: function() {
+        this.picker.destroy();
+        this._super.apply(this, arguments);
+    },
 });
 
-var DateWidget = DateTimeWidget.extend({
-    type_of_date: "date"
+var DateTimeWidget = DateWidget.extend({
+    type_of_date: "datetime"
 });
 
 return {
-    DateTimeWidget: DateTimeWidget,
     DateWidget: DateWidget,
+    DateTimeWidget: DateTimeWidget,
 };
+
 });
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 78f9ffea42d..55ccb035735 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -715,16 +715,14 @@
     </div>
 </t>
 <t t-name="web.datepicker">
-    <span>
-        <t t-set="placeholder" t-value="widget.getParent().node and widget.getParent().node.attrs.placeholder"/>
-        <div class="oe_datepicker_main input-group">
-            <input type="text"
-                t-att-name="widget.name"
-                t-att-placeholder="placeholder"
-                class="oe_datepicker_master"
-            /><span class="fa fa-calendar datepickerbutton"/>
-        </div>
-    </span>
+    <t t-set="placeholder" t-value="widget.getParent().node and widget.getParent().node.attrs.placeholder"/>
+    <div class="o_datepicker">
+        <input type="text"
+            class="o_datepicker_input"
+            t-att-name="widget.name"
+            t-att-placeholder="placeholder"/>
+        <span class="fa fa-calendar o_datepicker_button"/>
+    </div>
 </t>
 <t t-name="FieldDate">
     <span class="oe_form_field oe_datepicker_root oe_form_field_date" t-att-style="widget.node.attrs.style"/>