[FIX] survey: fix various issues in customer view about datetimepicker

Survey has troubles displaying correctly the datetime picker widget
especially when more than one has to be instanciated. This merge fixes
several issues related to the datetime widget when displaying the survey
in customer (front-end like) view.

See sub-commits for more details about each change.

This merge is related to task ID 1912194.

closes odoo/odoo#28966

4 files changed, 61 insertions, 59 deletions

diff --git a/addons/survey/controllers/main.py b/addons/survey/controllers/main.py
index 3674012e091..856dd1bffd5 100644
--- a/addons/survey/controllers/main.py
+++ b/addons/survey/controllers/main.py
@@ -185,7 +185,7 @@ class Survey(http.Controller):
                     ret.setdefault(answer_tag, []).append(answer_value)
                 else:
                     _logger.warning("[survey] No answer has been found for question %s marked as non skipped" % answer_tag)
-        return json.dumps(ret)
+        return json.dumps(ret, default=str)
 
     # AJAX scores loading for quiz correction mode
     @http.route(['/survey/scores/<model("survey.survey"):survey>/<string:token>'],
diff --git a/addons/survey/static/src/js/survey.js b/addons/survey/static/src/js/survey.js
index 145005790ec..16def6107d2 100644
--- a/addons/survey/static/src/js/survey.js
+++ b/addons/survey/static/src/js/survey.js
@@ -183,31 +183,34 @@ if(!the_form.length) {
     // frontend does not load moment locale at all.
     // so wait until DOM ready with locale then init datetimepicker
     ready_with_locale.then(function(){
-        $('.form-control.date').datetimepicker({
-            format : time.getLangDateFormat(),
-            minDate: moment({ y: 1900 }),
-            maxDate: moment().add(200, "y"),
-            calendarWeeks: true,
-            icons: {
-                time: 'fa fa-clock-o',
-                date: 'fa fa-calendar',
-                next: 'fa fa-chevron-right',
-                previous: 'fa fa-chevron-left',
-                up: 'fa fa-chevron-up',
-                down: 'fa fa-chevron-down',
-            },
-            locale : moment.locale(),
-            allowInputToggle: true,
-            keyBinds: null,
+         _.each($('.input-group.date'), function(date_field){
+            var minDate = $(date_field).data('mindate') || moment({ y: 1900 });
+            var maxDate = $(date_field).data('maxdate') || moment().add(200, "y");
+            $('#' + date_field.id).datetimepicker({
+                format : time.getLangDateFormat(),
+                minDate: minDate,
+                maxDate: maxDate,
+                calendarWeeks: true,
+                icons: {
+                    time: 'fa fa-clock-o',
+                    date: 'fa fa-calendar',
+                    next: 'fa fa-chevron-right',
+                    previous: 'fa fa-chevron-left',
+                    up: 'fa fa-chevron-up',
+                    down: 'fa fa-chevron-down',
+                },
+                locale : moment.locale(),
+                allowInputToggle: true,
+                keyBinds: null,
+            });
         });
+        // Launch prefilling
+        prefill();
+        if(quiz_correction_mode === true){
+            display_scores();
+        }
     });
 
-    // Launch prefilling
-    prefill();
-    if(quiz_correction_mode === true){
-        display_scores();
-    }
-
     console.debug("[survey] Custom JS for survey loaded!");
 
 });
diff --git a/addons/survey/views/survey_templates.xml b/addons/survey/views/survey_templates.xml
index 199e8bdd2e4..9efe5426187 100644
--- a/addons/survey/views/survey_templates.xml
+++ b/addons/survey/views/survey_templates.xml
@@ -238,9 +238,11 @@
 
     <template id="date" name="Date box">
         <div class="form-group">
-            <div class="input-group date" id="datetimepicker" data-target-input="nearest">
-                <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker" t-att-name="prefix"/>
-                <div class="input-group-append" data-target="#datetimepicker" data-toggle="datetimepicker">
+            <div class="input-group date" t-attf-id="datetimepicker_#{question.id}" data-target-input="nearest"
+                    t-att-data-mindate="question.validation_min_date"
+                    t-att-data-maxdate="question.validation_max_date">
+                <input type="text" class="form-control datetimepicker-input" t-attf-data-target="#datetimepicker_#{question.id}" t-att-name="prefix"/>
+                <div class="input-group-append" t-attf-data-target="#datetimepicker_#{question.id}" data-toggle="datetimepicker">
                     <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                 </div>
             </div>
@@ -341,39 +343,37 @@
             <div class="wrap">
                 <div class="container">
                     <t t-call="survey.back" />
-                    <div class="row">
-                        <div class='jumbotron mt32'>
-                            <h1><span t-field='survey.title'/></h1>
-                            <t t-if="survey.description"><div t-field='survey.description' class="oe_no_empty"/></t>
-                        </div>
-                        <div role="form" class="js_surveyform" t-att-name="'%s' % (survey.id)" t-att-data-prefill="'/survey/prefill/%s/%s' % (slug(survey), token)">
-                            <t t-foreach="survey.page_ids" t-as="page">
-                                <div class="o_page_header">
-                                    <h1 t-field='page.title' />
-                                    <t t-if="page.description"><div t-field='page.description' class="oe_no_empty"/></t>
+                    <div class='jumbotron mt32'>
+                        <h1><span t-field='survey.title'/></h1>
+                        <t t-if="survey.description"><div t-field='survey.description' class="oe_no_empty"/></t>
+                    </div>
+                    <div role="form" class="js_surveyform" t-att-name="'%s' % (survey.id)" t-att-data-prefill="'/survey/prefill/%s/%s' % (slug(survey), token)">
+                        <t t-foreach="survey.page_ids" t-as="page">
+                            <div class="o_page_header">
+                                <h1 t-field='page.title' />
+                                <t t-if="page.description"><div t-field='page.description' class="oe_no_empty"/></t>
+                            </div>
+                            <t t-foreach='page.question_ids' t-as='question'>
+                                <t t-set="prefix" t-value="'%s_%s_%s' % (survey.id, page.id, question.id)" />
+                                <div class="js_question-wrapper" t-att-id="prefix">
+                                    <h2>
+                                        <span t-field='question.question' />
+                                        <span t-if="question.constr_mandatory" class="text-danger">*</span>
+                                        <span t-if="quizz_correction" class="badge badge-pill" t-att-data-score-question="question.id"></span>
+                                    </h2>
+                                    <t t-if="question.description"><div class="text-muted oe_no_empty" t-field='question.description'/></t>
+                                    <t t-if="question.type == 'free_text'"><t t-call="survey.free_text"/></t>
+                                    <t t-if="question.type == 'textbox'"><t t-call="survey.textbox"/></t>
+                                    <t t-if="question.type == 'numerical_box'"><t t-call="survey.numerical_box"/></t>
+                                    <t t-if="question.type == 'date'"><t t-call="survey.date"/></t>
+                                    <t t-if="question.type == 'simple_choice'"><t t-call="survey.simple_choice"/></t>
+                                    <t t-if="question.type == 'multiple_choice'"><t t-call="survey.multiple_choice"/></t>
+                                    <t t-if="question.type == 'matrix'"><t t-call="survey.matrix"/></t>
+                                    <div class="js_errzone alert alert-danger" style="display:none;" role="alert"></div>
                                 </div>
-                                <t t-foreach='page.question_ids' t-as='question'>
-                                    <t t-set="prefix" t-value="'%s_%s_%s' % (survey.id, page.id, question.id)" />
-                                    <div class="js_question-wrapper" t-att-id="prefix">
-                                        <h2>
-                                            <span t-field='question.question' />
-                                            <span t-if="question.constr_mandatory" class="text-danger">*</span>
-                                            <span t-if="quizz_correction" class="badge badge-pill" t-att-data-score-question="question.id"></span>
-                                        </h2>
-                                        <t t-if="question.description"><div class="text-muted oe_no_empty" t-field='question.description'/></t>
-                                        <t t-if="question.type == 'free_text'"><t t-call="survey.free_text"/></t>
-                                        <t t-if="question.type == 'textbox'"><t t-call="survey.textbox"/></t>
-                                        <t t-if="question.type == 'numerical_box'"><t t-call="survey.numerical_box"/></t>
-                                        <t t-if="question.type == 'date'"><t t-call="survey.date"/></t>
-                                        <t t-if="question.type == 'simple_choice'"><t t-call="survey.simple_choice"/></t>
-                                        <t t-if="question.type == 'multiple_choice'"><t t-call="survey.multiple_choice"/></t>
-                                        <t t-if="question.type == 'matrix'"><t t-call="survey.matrix"/></t>
-                                        <div class="js_errzone alert alert-danger" style="display:none;" role="alert"></div>
-                                    </div>
-                                </t>
-                                <hr/>
                             </t>
-                        </div>
+                            <hr/>
+                        </t>
                     </div>
                 </div>
             </div>
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index 100b553b09d..cb1184e3565 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -50,6 +50,7 @@
         <link rel="stylesheet" type="text/css" href="/web/static/lib/fontawesome/css/font-awesome.css"/>
         <link rel="stylesheet" type="text/css" href="/web/static/lib/select2/select2.css"/>
         <link rel="stylesheet" type="text/css" href="/web/static/lib/select2-bootstrap-css/select2-bootstrap.css"/>
+        <link rel="stylesheet" type="text/scss" href="/web/static/lib/tempusdominus/tempusdominus.scss"/>
 
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/fonts.scss"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/ui.scss"/>
@@ -145,7 +146,6 @@
         <t t-call="web._assets_backend_helpers"/>
 
         <t t-call="web._assets_bootstrap"/>
-        <link rel="stylesheet" type="text/scss" href="/web/static/lib/tempusdominus/tempusdominus.scss"/>
 
         <link rel="stylesheet" type="text/css" href="/base/static/src/css/modules.css"/>
 
@@ -318,7 +318,6 @@
         <t t-call="web._assets_frontend_helpers"/>
 
         <t t-call="web._assets_bootstrap"/>
-        <link rel="stylesheet" type="text/scss" href="/web/static/lib/tempusdominus/tempusdominus.scss"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/navbar_mobile.scss"/>
 
         <script type="text/javascript" src="/web/static/src/js/services/session.js"></script>