Merge pull request #63 from Digipalvelutehdas/feature/dashboard-datepicker-fixes

Feature/dashboard datepicker fixes

Author: NNN

core/lib/i18n/en.i18n.json

@@ -636,6 +636,8 @@
   "statusCodeCountsChart_title": "HTTP Status Codes",
   "statusCodeCountsChart_help_text": "You can use this chart to see the HTTP responses generated by your API for the requests it receives for a specific time period. You can filter the chart with response type for a single API or a combination of them. The overview information and other charts will be updated when you interact with HTTP Status Codes.",
   "swaggerUi_swaggerDocumentInvalidText": "Swagger document is not valid.",
+  "timeFrameSelectPicker_from": "from",
+  "timeFrameSelectPicker_to": "to",
   "updatePassword_legend_text": "Update password",
   "umbrella_createuser_error": "Failed to create user on API Umbrella.",
   "updatePassword_submitButton_text": "Change Password",

dashboard/client/filtering/datepicker/datepicker.html

@@ -1,8 +1,12 @@
 <template name="timeFrameSelectPicker">
-  <div class="input-daterange input-group time-frame-picker" id="datepicker">
-    <span class="input-group-addon">from</span>
-    <input type="text" class="form-control" id="analytics-timeframe-start" />
-    <span class="input-group-addon">to</span>
-    <input type="text" class="form-control" id="analytics-timeframe-end" />
+  <div id="timeframe-datepickers" class="input-group input-daterange">
+    <span class="input-group-addon">
+      {{_ "timeFrameSelectPicker_from" }}
+    </span>
+    <input id="analytics-timeframe-start" type="text" class="form-control">
+    <span class="input-group-addon">
+      {{_ "timeFrameSelectPicker_to" }}
+    </span>
+    <input id="analytics-timeframe-end" type="text" class="form-control">
   </div>
 </template>

dashboard/client/filtering/datepicker/datepicker.js

@@ -6,12 +6,14 @@ import $ from 'jquery';
 
 Template.timeFrameSelectPicker.onRendered(function () {
 
-  // Enable date picker on timeframe start
-  $('#analytics-timeframe-start').datepicker({
+  $('#timeframe-datepickers').datepicker({
     todayHighlight: true,
     endDate: 'today',
     autoclose: true,
-  })
+  });
+
+  // Event handler for timeframe start
+  $('#analytics-timeframe-start').datepicker()
   // Save chosen date to URL parameter
   // in order to share dashboard state
   .on('changeDate', function (event) {
@@ -27,12 +29,8 @@ Template.timeFrameSelectPicker.onRendered(function () {
     $('#analytics-timeframe-start').datepicker('setDate', new Date(fromDate));
   }
 
-  // Enable date picker on timeframe end
-  $('#analytics-timeframe-end').datepicker({
-    todayHighlight: true,
-    endDate: 'today',
-    autoclose: true,
-  })
+  // Event handler for timeframe end
+  $('#analytics-timeframe-end').datepicker()
   // Save chosen date to URL parameter
   .on('changeDate', function (event) {
     // Set fromDate URL parameter to ISO YYYY-mm-dd