UX: improves dates on reports export UI (#7971)

- show it's UTC
- allows future
- shows date in more human readable format

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

@@ -183,6 +183,32 @@ export default Ember.Component.extend({
   },
 
   actions: {
+    onChangeEndDate(date) {
+      const startDate = moment(this.startDate);
+      const newEndDate = moment(date).endOf("day");
+
+      if (newEndDate.isSameOrAfter(startDate)) {
+        this.set("endDate", newEndDate.format("YYYY-MM-DD"));
+      } else {
+        this.set("endDate", startDate.endOf("day").format("YYYY-MM-DD"));
+      }
+
+      this.send("refreshReport");
+    },
+
+    onChangeStartDate(date) {
+      const endDate = moment(this.endDate);
+      const newStartDate = moment(date).startOf("day");
+
+      if (newStartDate.isSameOrBefore(endDate)) {
+        this.set("startDate", newStartDate.format("YYYY-MM-DD"));
+      } else {
+        this.set("startDate", endDate.startOf("day").format("YYYY-MM-DD"));
+      }
+
+      this.send("refreshReport");
+    },
+
     applyFilter(id, value) {
       let customFilters = this.get("filters.customFilters") || {};
 

app/assets/javascripts/admin/templates/components/admin-report.hbs

@@ -130,9 +130,7 @@
             </span>
 
             <div class="input">
-              {{date-picker-past
-                value=startDate
-                defaultDate=startDate}}
+              {{date-input date=startDate onChange=(action "onChangeStartDate")}}
             </div>
           </div>
 
@@ -142,9 +140,7 @@
             </span>
 
             <div class="input">
-              {{date-picker-past
-                value=endDate
-                defaultDate=endDate}}
+              {{date-input date=endDate onChange=(action "onChangeEndDate")}}
             </div>
           </div>
         {{/if}}

config/locales/client.en.yml

@@ -3155,8 +3155,8 @@ en:
           view_table: "table"
           view_graph: "graph"
           refresh_report: "Refresh Report"
-          start_date: "Start Date"
-          end_date: "End Date"
+          start_date: "Start Date (UTC)"
+          end_date: "End Date (UTC)"
           groups: "All groups"
           disabled: "This report is disabled"
           totals_for_sample: "Totals for sample"