[18.0] [IMP] web_timeline: Add date picker to jump at given date

web_timeline/static/src/views/timeline/timeline_renderer.esm.js

@@ -129,6 +129,23 @@ export class TimelineRenderer extends Component {
         this._scaleCurrentWindow((start) => 24 * (start.isInLeapYear ? 366 : 365));
     }
 
+    /**
+     * Set the timeline window to given day.
+     *
+     * @private
+     */
+    _onDateInputChanged(ev) {
+        const date = luxon.DateTime.fromISO(ev.target.value);
+        this.current_window = {
+            start: date.toJSDate(),
+            end: date.plus({hours: 24}).toJSDate(),
+        };
+
+        if (this.timeline) {
+            this.timeline.setWindow(this.current_window);
+        }
+    }
+
     /**
      * Scales the timeline window based on the current window.
      *
@@ -230,6 +247,7 @@ export class TimelineRenderer extends Component {
             this.draw_canvas();
             this.load_initial_data();
         });
+        this.timeline.on("rangechanged", this.on_range_changed.bind(this));
     }
     /**
      * Returns the XSS whitelist for the timeline library.
@@ -409,6 +427,22 @@ export class TimelineRenderer extends Component {
         return groups;
     }
 
+    /**
+     * Handle a change in the timeline range.
+     *
+     * @param {RangeEvent} e
+     * @private
+     */
+    on_range_changed(e) {
+        const start = luxon.DateTime.fromJSDate(e.start);
+        const end = luxon.DateTime.fromJSDate(e.end);
+        const centerDate = start.plus({seconds: end.diff(start).as("seconds") / 2});
+        if (this.rootRef.el) {
+            this.rootRef.el.querySelector(".oe_timeline_date_input").value =
+                centerDate.toFormat("yyyy-MM-dd");
+        }
+    }
+
     /**
      * Handle a click within the timeline.
      *

web_timeline/static/src/views/timeline/timeline_renderer.xml

@@ -24,6 +24,12 @@
                         t-att-class="'oe_timeline_button_scale_year btn ' + (mode.data == 'year' ? ' btn-primary' : 'btn-default')"
                         t-on-click="_onScaleYearClicked"
                     >Year</button>
+                    <input
+                        name="date-input"
+                        type="date"
+                        class="form-control oe_timeline_date_input"
+                        t-on-change="_onDateInputChanged"
+                    />
                 </div>
             </div>
             <div class="oe_timeline_widget" t-ref="canvas" />