UX: uses native date picker when possible (eg: not safari) (#12668)

Note that this is only applied on date-input and not the old date-picker for now.

This commit is also slightly modifying admin report dates form to ensure the native picker is correctly used, as a result: it doesn’t auto refresh on date change and fixes a border bug.

app/assets/javascripts/admin/addon/components/admin-report.js

@@ -68,6 +68,8 @@ export default Component.extend({
   showDatesOptions: alias("model.dates_filtering"),
   showRefresh: or("showDatesOptions", "model.available_filters.length"),
   shouldDisplayTrend: and("showTrend", "model.prev_period"),
+  endDate: null,
+  startDate: null,
 
   init() {
     this._super(...arguments);
@@ -82,25 +84,21 @@ export default Component.extend({
       .includes(this.dataSourceName);
   }),
 
-  startDate: computed("filters.startDate", function () {
-    if (this.filters && isPresent(this.filters.startDate)) {
-      return moment(this.filters.startDate, "YYYY-MM-DD");
-    } else {
-      return moment();
-    }
-  }),
-
-  endDate: computed("filters.endDate", function () {
-    if (this.filters && isPresent(this.filters.endDate)) {
-      return moment(this.filters.endDate, "YYYY-MM-DD");
-    } else {
-      return moment();
-    }
-  }),
-
   didReceiveAttrs() {
     this._super(...arguments);
 
+    let startDate = moment();
+    if (this.filters && isPresent(this.filters.startDate)) {
+      startDate = moment(this.filters.startDate, "YYYY-MM-DD");
+    }
+    this.set("startDate", startDate);
+
+    let endDate = moment();
+    if (this.filters && isPresent(this.filters.endDate)) {
+      endDate = moment(this.filters.endDate, "YYYY-MM-DD");
+    }
+    this.set("endDate", endDate);
+
     if (this.report) {
       this._renderReport(this.report, this.forcedModes, this.currentMode);
     } else if (this.dataSourceName) {
@@ -213,7 +211,7 @@ export default Component.extend({
 
   @action
   onChangeDateRange(range) {
-    this.send("refreshReport", {
+    this.setProperties({
       startDate: range.from,
       endDate: range.to,
     });