--- a/client/src/components/gauge/Gauges.vue	Mon Mar 18 15:34:37 2019 +0100
+++ b/client/src/components/gauge/Gauges.vue	Mon Mar 18 15:43:03 2019 +0100
@@ -36,18 +36,26 @@
         </select>
         <div v-if="selectedGaugeISRS" class="mt-2">
           <hr class="mb-1" />
-          <small class="text-muted">
-            <translate>Time period</translate>:
-          </small>
-          <select
-            v-model="waterlevelsTimePeriod"
-            class="form-control form-control-sm mb-2"
-          >
-            <option value="day">last day</option>
-            <option value="week">last week</option>
-            <option value="month">last month</option>
-            <option value="year">last year</option>
-          </select>
+          <div class="row no-gutters mb-2">
+            <div class="col-6 pr-1">
+              <small class="text-muted"><translate>From</translate>:</small>
+              <input
+                type="date"
+                class="form-control form-control-sm small"
+                :value="dateFrom && dateFrom.toISOString().split('T')[0]"
+                @input="dateFrom = $event.target.valueAsDate"
+              />
+            </div>
+            <div class="col-6 pl-1">
+              <small class="text-muted"><translate>To</translate>:</small>
+              <input
+                type="date"
+                class="form-control form-control-sm small"
+                :value="dateTo && dateTo.toISOString().split('T')[0]"
+                @input="dateTo = $event.target.valueAsDate"
+              />
+            </div>
+          </div>
           <button
             @click="showWaterlevelDiagram()"
             class="btn btn-sm btn-info d-block w-100"
@@ -91,12 +99,14 @@
  * Markus Kottländer <markus.kottlaender@intevation.de>
  */
 import { mapState, mapGetters } from "vuex";
+import { displayError } from "@/lib/errors.js";
 
 export default {
   data() {
     return {
       loading: false,
-      waterlevelsTimePeriod: "day"
+      dateFrom: new Date(),
+      dateTo: new Date()
     };
   },
   computed: {
@@ -164,8 +174,18 @@
       this.loading = true;
       this.$store.commit("application/showSplitscreen", true);
       this.$store
-        .dispatch("gauges/loadWaterlevels", this.waterlevelsTimePeriod)
-        .then(() => {
+        .dispatch("gauges/loadWaterlevels", {
+          from: this.dateFrom,
+          to: this.toDate
+        })
+        .catch(error => {
+          const { status, data } = error.response;
+          displayError({
+            title: "Backend Error",
+            message: `${status}: ${data.message || data}`
+          });
+        })
+        .finally(() => {
           this.$store.commit("application/splitscreenLoading", false);
           this.loading = false;
         });
@@ -179,6 +199,7 @@
     }
   },
   mounted() {
+    this.dateFrom.setDate(this.dateFrom.getDate() - 30);
     this.$store.dispatch("gauges/loadGauges");
   }
 };