[FIX] web: remove old datetimepicker and change by bootstrap datetimepicker

3 files changed, 177 insertions, 76 deletions

diff --git a/addons/web/static/src/js/core.js b/addons/web/static/src/js/core.js
index 47e2a30a3d5..866dcb274a7 100644
--- a/addons/web/static/src/js/core.js
+++ b/addons/web/static/src/js/core.js
@@ -300,6 +300,101 @@ instance.web.Session.include( /** @lends instance.web.Session# */{
         ].join(';');
     },
     /**
+     * match between moment js locale and odoo locale
+     *
+     */
+    match_locale: function(){
+        var self = this;
+        var conversion = {
+            // 'ab_RU': 'en',
+            // 'am_ET': 'en',
+            'ar_SY': 'ar',
+            'bg_BG': 'bg',
+            'bs_BS': 'bs',
+            'ca_ES': 'ca',
+            'cs_CZ': 'cs',
+            'da_DK': 'da',
+            'de_DE': 'de',
+            'el_GR': 'el',
+            'en_CA': 'en-ca',
+            'en_GB': 'en-gb',
+            // 'en_US': 'en',
+            'es_AR': 'es',
+            'es_BO': 'es',
+            'es_CL': 'es',
+            'es_CO': 'es',
+            'es_CR': 'es',
+            'es_DO': 'es',
+            'es_EC': 'es',
+            'es_ES': 'es',
+            'es_GT': 'es',
+            'es_HN': 'es',
+            'es_MX': 'es',
+            'es_NI': 'es',
+            'es_PA': 'es',
+            'es_PE': 'es',
+            'es_PR': 'es',
+            'es_PY': 'es',
+            'es_SV': 'es',
+            'es_UY': 'es',
+            'es_VE': 'es',
+            'et_EE': 'et',
+            'fa_IR': 'fa',
+            'fi_FI': 'fi',
+            'fr_BE': 'fr',
+            'fr_CA': 'fr-ca',
+            'fr_CH': 'fr',
+            'fr_FR': 'fr',
+            'gl_ES': 'gl',
+            // 'gu_IN': 'en',
+            'he_IL': 'he',
+            'hi_IN': 'hi',
+            'hr_HR': 'hr',
+            'hu_HU': 'hu',
+            'id_ID': 'id',
+            'it_IT': 'it',
+            // 'iu_CA': 'en',
+            'ja_JP': 'ja',
+            'ko_KP': 'ko',
+            'ko_KR': 'ko',
+            // 'lo_LA': 'en',
+            'lt_LT': 'lt',
+            'lv_LV': 'lv',
+            'mk_MK': 'mk',
+            'ml_IN': 'ml',
+            // 'mn_MN': 'en',
+            'nb_NO': 'nb',
+            'nl_NL': 'nl',
+            'nl_BE': 'nl',
+            // 'oc_FR': 'en',
+            'pl_PL': 'pl',
+            'pt_BR': 'pt-br',
+            'pt_PT': 'pt',
+            'ro_RO': 'ro',
+            'ru_RU': 'ru',
+            // 'si_LK': 'en',
+            'sl_SI': 'sl',
+            'sk_SK': 'sk',
+            'sq_AL': 'sq',
+            'sr_RS': 'sr',
+            // 'sr@latin': 'en',
+            'sv_SE': 'sv',
+            // 'te_IN': 'en',
+            'tr_TR': 'tr',
+            'vi_VN': 'vi',
+            'uk_UA': 'uk',
+            // 'ur_PK': 'en',
+            'zh_CN': 'zh-cn',
+            // 'zh_HK': 'en',
+            'zh_TW': 'zh-tw',
+            'th_TH': 'th',
+            // 'tlh_TLH': 'en',
+        };
+
+        var lang = self.user_context.lang || 'en_US';
+        return conversion[lang] || 'en';
+    },
+    /**
      * Load additional web addons of that instance and init them
      *
      */
diff --git a/addons/web/static/src/js/formats.js b/addons/web/static/src/js/formats.js
index 3d7b574e56a..14026f17681 100644
--- a/addons/web/static/src/js/formats.js
+++ b/addons/web/static/src/js/formats.js
@@ -361,4 +361,52 @@ instance.web.round_decimals = function(value, decimals){
     return instance.web.round_precision(value, Math.pow(10,-decimals));
 };
 
+/**
++ * 
++ * convert python.strftime format into moment.js format
++ * inspired from : https://github.com/uruz/moment-datetime/blob/master/moment-datetime.js
++*/
+instance.web.convert_to_moment_format = function(format){
+    if (!format)
+        return false;
+    var replacements = {
+            'a': 'ddd',
+            'A': 'dddd',
+            'b': 'MMM',
+            'B': 'MMMM',
+            //'c': //%c is defined too vaguely
+            'd': 'DD',
+            //'f': JS have no support for microseconds and moment.js have no support for milliseconds
+            'H': 'HH',
+            'I': 'hh',
+            'j': 'DDDD',
+            'm': 'MM',
+            'M': 'mm',
+            'p': 'A',
+            'S': 'ss',
+            'U': 'ww',//ww is for Sunday-based week
+            'w': 'd',
+            //'W': 'ww',//%W is weeknumber for weeks starting from Monday and it is not implemented in moment.js
+            //'x':
+            //'X': //%x and %X are defined too vaguely to be implemented 
+            'y': 'YY',
+            'Y': 'YYYY',
+            'z': 'ZZ',
+            //'Z': 'z', - moment.js does not support timezone names
+            '%': '%'
+    }
+    var moment_format = '', directive_index = 0, replacement, unformatted;
+    while (format.indexOf('%') !== -1){
+        directive_index = format.indexOf('%') + 1;
+        replacement = replacements[format[directive_index]];
+        unformatted = format.substr(0, directive_index-1);
+        if (unformatted.length){
+                unformatted = '[' + unformatted.replace(/(\[|\])/g, '\\$&') +']';
+        }
+        moment_format += unformatted + (replacement ? replacement : format[directive_index]);
+        format = format.substr(directive_index+1);
+    }
+    return moment_format;
+};
+
 })();
diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index faaf8cca112..61a3f3c9d2b 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -2578,10 +2578,10 @@ instance.web.form.FieldCharDomain = instance.web.form.AbstractField.extend(insta
 
 instance.web.DateTimeWidget = instance.web.Widget.extend({
     template: "web.datepicker",
-    jqueryui_object: 'datetimepicker',
     type_of_date: "datetime",
     events: {
-        'change .oe_datepicker_master': 'change_datetime',
+        'dp.change .oe_datepicker_main': 'change_datetime',
+        'dp.show .oe_datepicker_main': 'change_datetime',
         'keypress .oe_datepicker_master': 'change_datetime',
     },
     init: function(parent) {
@@ -2590,82 +2590,32 @@ instance.web.DateTimeWidget = instance.web.Widget.extend({
     },
     start: function() {
         var self = this;
+        var l10n = _t.database.parameters;
+        var options = {
+            pickTime: true,
+            useSeconds: true,
+            startDate: new moment({ y: 1900 }),
+            endDate: new moment().add(200, "y"),
+            calendarWeeks: true,
+            icons : {
+                time: 'fa fa-clock-o',
+                date: 'fa fa-calendar',
+                up: 'fa fa-chevron-up',
+                down: 'fa fa-chevron-down'
+               },
+            language: this.session.match_locale(),
+            format : instance.web.convert_to_moment_format(l10n.date_format +' '+ l10n.time_format),
+        };
         this.$input = this.$el.find('input.oe_datepicker_master');
-        this.$input_picker = this.$el.find('input.oe_datepicker_container');
-
-        $.datepicker.setDefaults({
-            clearText: _t('Clear'),
-            clearStatus: _t('Erase the current date'),
-            closeText: _t('Done'),
-            closeStatus: _t('Close without change'),
-            prevText: _t('<Prev'),
-            prevStatus: _t('Show the previous month'),
-            nextText: _t('Next>'),
-            nextStatus: _t('Show the next month'),
-            currentText: _t('Today'),
-            currentStatus: _t('Show the current month'),
-            monthNames: Date.CultureInfo.monthNames,
-            monthNamesShort: Date.CultureInfo.abbreviatedMonthNames,
-            monthStatus: _t('Show a different month'),
-            yearStatus: _t('Show a different year'),
-            weekHeader: _t('Wk'),
-            weekStatus: _t('Week of the year'),
-            dayNames: Date.CultureInfo.dayNames,
-            dayNamesShort: Date.CultureInfo.abbreviatedDayNames,
-            dayNamesMin: Date.CultureInfo.shortestDayNames,
-            dayStatus: _t('Set DD as first week day'),
-            dateStatus: _t('Select D, M d'),
-            firstDay: Date.CultureInfo.firstDayOfWeek,
-            initStatus: _t('Select a date'),
-            isRTL: false
-        });
-        $.timepicker.setDefaults({
-            timeOnlyTitle: _t('Choose Time'),
-            timeText: _t('Time'),
-            hourText: _t('Hour'),
-            minuteText: _t('Minute'),
-            secondText: _t('Second'),
-            currentText: _t('Now'),
-            closeText: _t('Done')
-        });
-
-        this.picker({
-            onClose: this.on_picker_select,
-            onSelect: this.on_picker_select,
-            changeMonth: true,
-            changeYear: true,
-            showWeek: true,
-            showButtonPanel: true,
-            firstDay: Date.CultureInfo.firstDayOfWeek
-        });
-        // Some clicks in the datepicker dialog are not stopped by the
-        // datepicker and "bubble through", unexpectedly triggering the bus's
-        // click event. Prevent that.
-        this.picker('widget').click(function (e) { e.stopPropagation(); });
-
-        this.$el.find('img.oe_datepicker_trigger').click(function() {
-            if (self.get("effective_readonly") || self.picker('widget').is(':visible')) {
-                self.$input.focus();
-                return;
-            }
-            self.picker('setDate', self.get('value') ? instance.web.auto_str_to_date(self.get('value')) : new Date());
-            self.$input_picker.show();
-            self.picker('show');
-            self.$input_picker.hide();
-        });
+        if (this.type_of_date === 'date') {
+            options['pickTime'] = false;
+            options['useSeconds'] = false;
+            options['format'] = instance.web.convert_to_moment_format(l10n.date_format);
+        }
+        this.picker = this.$('.oe_datepicker_main').datetimepicker(options);
         this.set_readonly(false);
         this.set({'value': false});
     },
-    picker: function() {
-        return $.fn[this.jqueryui_object].apply(this.$input_picker, arguments);
-    },
-    on_picker_select: function(text, instance_) {
-        var date = this.picker('getDate');
-        this.$input
-            .val(date ? this.format_client(date) : '')
-            .change()
-            .focus();
-    },
     set_value: function(value_) {
         this.set({'value': value_});
         this.$input.val(value_ ? this.format_client(value_) : '');
@@ -2680,7 +2630,6 @@ instance.web.DateTimeWidget = instance.web.Widget.extend({
     set_readonly: function(readonly) {
         this.readonly = readonly;
         this.$input.prop('readonly', this.readonly);
-        this.$el.find('img.oe_datepicker_trigger').toggleClass('oe_input_icon_disabled', readonly);
     },
     is_valid_: function() {
         var value_ = this.$input.val();
@@ -2704,7 +2653,17 @@ instance.web.DateTimeWidget = instance.web.Widget.extend({
     change_datetime: function(e) {
         if ((e.type !== "keypress" || e.which === 13) && this.is_valid_()) {
             this.set_value_from_ui_();
+            this.set_value(this.get('value')); //reformat date and show it correctly
             this.trigger("datetime_changed");
+            //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 (this.type_of_date === 'datetime') {
+                value = new moment().second(0);
+                if (this.$input.val().length !== 0 && this.is_valid_()){
+                    var value = this.$input.val();
+                }
+                this.$('.oe_datepicker_main').data('DateTimePicker').setValue(value);
+            }
         }
     },
     commit_value: function () {
@@ -2713,7 +2672,6 @@ instance.web.DateTimeWidget = instance.web.Widget.extend({
 });
 
 instance.web.DateWidget = instance.web.DateTimeWidget.extend({
-    jqueryui_object: 'datepicker',
     type_of_date: "date"
 });