--- a/client/src/components/fairway/AvailableFairwayDepthDialogue.vue	Mon Sep 23 15:41:46 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepthDialogue.vue	Mon Sep 23 16:16:42 2019 +0200
@@ -135,30 +135,117 @@
           </div>
         </div>
         <div class="d-flex mt-2">
-          <div class="d-flex flex-column w-50 mr-1">
+          <div
+            :key="new Date().getTime()"
+            v-if="selectedFrequency === $options.FREQUENCIES.monthly"
+            class="d-flex flex-column w-50 mr-1"
+          >
             <small for="from" class="my-auto text-muted">
-              <translate>Date from</translate>
+              <translate>Starting Month</translate>
             </small>
-            <input
-              id="from"
-              v-model="fromDate"
-              class="form-control form-control-sm"
-              type="date"
-            />
+            <select v-model="startMonth" class="form-control form-control-sm">
+              <option
+                v-for="month in Object.keys($options.MONTHS)"
+                :key="'start' + month"
+                :value="month"
+                >{{ $options.MONTHS[month] }}</option
+              >
+            </select>
           </div>
-          <div class="d-flex flex-column w-50 ml-1">
-            <small for="to" class="my-auto text-muted">
-              <translate>Date to</translate>
+          <div
+            :key="new Date().getTime()"
+            v-if="selectedFrequency === $options.FREQUENCIES.quarterly"
+            class="d-flex flex-column w-50 mr-1"
+          >
+            <small for="from" class="my-auto text-muted">
+              <translate>Starting Quarter</translate>
             </small>
-            <input
-              id="to"
-              v-model="toDate"
-              class="form-control form-control-sm"
-              type="date"
-            />
+            <select v-model="startQuarter" class="form-control form-control-sm">
+              <option
+                v-for="month in [1, 2, 3, 4]"
+                :key="'qstart' + month"
+                :value="month"
+                >Q{{ month }}</option
+              >
+            </select>
+          </div>
+          <div
+            :class="[
+              'd-flex',
+              'flex-column',
+              'w-50',
+              { 'ml-1': selectedFrequency !== $options.FREQUENCIES.yearly }
+            ]"
+          >
+            <small for="from" class="my-auto text-muted">
+              <translate>Starting Year</translate>
+            </small>
+            <select v-model="startYear" class="form-control form-control-sm">
+              <option
+                v-for="year in $options.YEARS"
+                :key="'start' + year"
+                :value="year"
+                >{{ year }}</option
+              >
+            </select>
           </div>
         </div>
-
+        <div class="d-flex mt-2">
+          <div
+            :key="new Date().getTime()"
+            class="d-flex flex-column w-50 mr-1"
+            v-if="selectedFrequency === $options.FREQUENCIES.monthly"
+          >
+            <small for="to" class="my-auto text-muted">
+              <translate>Ending Month</translate>
+            </small>
+            <select v-model="endMonth" class="form-control form-control-sm">
+              <option
+                v-for="month in Object.keys($options.MONTHS)"
+                :key="'end' + month"
+                :value="month"
+                >{{ $options.MONTHS[month] }}</option
+              >
+            </select>
+          </div>
+          <div
+            :key="new Date().getTime()"
+            v-if="selectedFrequency === $options.FREQUENCIES.quarterly"
+            class="d-flex flex-column w-50 mr-1"
+          >
+            <small for="from" class="my-auto text-muted">
+              <translate>Ending Quarter</translate>
+            </small>
+            <select v-model="endQuarter" class="form-control form-control-sm">
+              <option
+                v-for="month in [1, 2, 3, 4]"
+                :key="'qend' + month"
+                :value="month"
+                >Q{{ month }}</option
+              >
+            </select>
+          </div>
+          <div
+            :class="[
+              'd-flex',
+              'flex-column',
+              'w-50',
+              { 'ml-1': selectedFrequency !== $options.FREQUENCIES.yearly }
+            ]"
+          >
+            <small for="to" class="my-auto text-muted">
+              <translate>Ending Year</translate>
+            </small>
+            <select v-model="endYear" class="form-control form-control-sm">
+              <option
+                v-for="year in $options.YEARS"
+                :key="'end' + year"
+                :value="year"
+                >{{ year }}</option
+              >
+            </select>
+          </div>
+        </div>
         <div v-if="depthLimitVisible" class="d-flex mt-2" :key="1">
           <div class="d-flex flex-column w-50 mr-1">
             <small for="from" class="my-auto text-muted">
@@ -221,7 +308,18 @@
             />
           </div>
         </div>
-
+        <div class="d-flex mt-2">
+          <div class="d-flex flex-column w-50 ml-1">
+            <small for="from" class="my-auto text-muted">
+              <translate>From</translate> {{ fromDate | surveyDate }}
+            </small>
+          </div>
+          <div class="d-flex flex-column w-50 ml-1">
+            <small for="to" class="my-auto text-muted">
+              <translate>To</translate> {{ toDate | surveyDate }}
+            </small>
+          </div>
+        </div>
         <div class="mt-3">
           <button
             @click="openFairwaydepthDiagram"
@@ -276,11 +374,35 @@
 import { displayError } from "@/lib/errors";
 import { mapState, mapGetters } from "vuex";
 import { LIMITINGFACTORS } from "@/store/fairwayavailability";
+import {
+  subYears,
+  getMonth,
+  startOfYear,
+  startOfMonth,
+  endOfMonth,
+  endOfYear,
+  format,
+  getQuarter,
+  startOfQuarter,
+  endOfQuarter,
+  setQuarter,
+  getYear
+} from "date-fns";
+
+const isoFormat = date => {
+  return format(date, "YYYY-MM-DD");
+};
 
 export default {
   data() {
     return {
-      loading: false
+      loading: false,
+      startMonth: null,
+      endMonth: null,
+      startQuarter: null,
+      endQuarter: null,
+      startYear: null,
+      endYear: null
     };
   },
   computed: {
@@ -339,13 +461,7 @@
         ];
     },
     isComplete() {
-      return (
-        !!this.from &&
-        !!this.to &&
-        !!this.frequency &&
-        !!this.los &&
-        this.selectedFairwayAvailabilityFeature !== null
-      );
+      return this.selectedFairwayAvailabilityFeature !== null;
     },
     type: {
       get() {
@@ -448,6 +564,57 @@
     }
   },
   watch: {
+    selectedFrequency() {
+      const now = new Date();
+      switch (this.selectedFrequency) {
+        case this.$options.FREQUENCIES.monthly:
+          this.startMonth = getMonth(now) + 1;
+          this.endMonth = getMonth(now) + 1;
+          this.startYear = getYear(subYears(now, 1));
+          this.endYear = getYear(now);
+          this.fromDate = isoFormat(subYears(startOfMonth(now), 1));
+          this.toDate = isoFormat(endOfMonth(now));
+          break;
+        case this.$options.FREQUENCIES.quarterly:
+          this.startQuarter = this.dateToQuarter(now);
+          this.endQuarter = this.dateToQuarter(now);
+          this.startYear = getYear(subYears(now, 1));
+          this.endYear = getYear(now);
+          this.fromDate = isoFormat(subYears(startOfQuarter(now), 1));
+          this.toDate = this.toDate = isoFormat(endOfQuarter(now));
+          break;
+        case this.$options.FREQUENCIES.yearly:
+          this.startYear = getYear(subYears(now, 1));
+          this.endYear = getYear(now);
+          this.fromDate = isoFormat(subYears(startOfYear(now), 1));
+          this.toDate = isoFormat(endOfYear(now));
+          break;
+        default:
+          throw new Error("undefined frequency");
+      }
+    },
+    startQuarter() {
+      this.fromDate = isoFormat(
+        startOfQuarter(this.quarterToDate(this.startYear, this.startQuarter))
+      );
+    },
+    endQuarter() {
+      this.toDate = isoFormat(
+        endOfQuarter(this.quarterToDate(this.endYear, this.endQuarter))
+      );
+    },
+    startMonth() {
+      this.calcStart();
+    },
+    startYear() {
+      this.calcStart();
+    },
+    endMonth() {
+      this.calcEnd();
+    },
+    endYear() {
+      this.calcEnd();
+    },
     depthLimitVisible() {
       if (this.depthLimitVisible) {
         this.depthLimit1 = 2.3;
@@ -506,6 +673,34 @@
     }
   },
   methods: {
+    dateToQuarter(date) {
+      return getQuarter(date);
+    },
+    quarterToDate(year, quarter) {
+      return setQuarter(new Date(year, 1, 1), quarter);
+    },
+    calcStart() {
+      this.fromDate = isoFormat(
+        startOfMonth(new Date(this.startYear, this.startMonth - 1))
+      );
+    },
+    calcEnd() {
+      this.toDate = isoFormat(
+        endOfMonth(new Date(this.endYear, this.endMonth - 1))
+      );
+    },
+    initDates() {
+      const endDate = new Date();
+      const startDate = subYears(new Date(), 1);
+      this.startMonth = getMonth(startDate) + 1;
+      this.endMonth = getMonth(endDate) + 1;
+      this.startYear = getYear(startDate);
+      this.endYear = getYear(endDate);
+      this.fromDate = isoFormat(startOfMonth(startDate));
+      this.toDate = isoFormat(endOfMonth(endDate));
+      this.startQuarter = this.dateToQuarter(startDate);
+      this.endQuarter = this.dateToQuarter(endDate);
+    },
     openFairwaydepthLNWLDiagram() {
       this.clearInvisibleFormValues();
       this.loading = true;
@@ -639,6 +834,9 @@
       );
     }
   },
+  mounted() {
+    this.initDates();
+  },
   BOTTLENECK: "bottleneck",
   SECTION: "section",
   STRETCH: "stretch",
@@ -648,6 +846,58 @@
     quarterly: app.$gettext("quarterly"),
     yearly: app.$gettext("yearly")
   },
+  YEARS: [
+    2015,
+    2016,
+    2017,
+    2018,
+    2019,
+    2020,
+    2021,
+    2022,
+    2023,
+    2024,
+    2025,
+    2026,
+    2027,
+    2028,
+    2029,
+    2030,
+    2031,
+    2032,
+    2033,
+    2034,
+    2035,
+    2036,
+    2037,
+    2038,
+    2039,
+    2040,
+    2041,
+    2042,
+    2043,
+    2044,
+    2045,
+    2046,
+    2047,
+    2048,
+    2049,
+    2050
+  ],
+  MONTHS: {
+    1: "January",
+    2: "February",
+    3: "March",
+    4: "April",
+    5: "May",
+    6: "June",
+    7: "July",
+    8: "August",
+    9: "September",
+    10: "October",
+    11: "November",
+    12: "December"
+  },
   LIMITINGFACTORS: LIMITINGFACTORS
 };
 </script>

--- a/client/src/store/fairwayavailability.js	Mon Sep 23 15:41:46 2019 +0200
+++ b/client/src/store/fairwayavailability.js	Mon Sep 23 16:16:42 2019 +0200
@@ -17,7 +17,6 @@
 import { HTTP } from "@/lib/http";
 import {
   format,
-  subYears,
   startOfMonth,
   endOfMonth,
   startOfYear,
@@ -43,10 +42,6 @@
   YEARLY: "yearly"
 };
 
-const isoFormat = date => {
-  return format(date, "YYYY-MM-DD");
-};
-
 const getIntervallBorders = (start, end, frequency) => {
   switch (frequency) {
     case FREQUENCIES.MONTHLY:
@@ -60,12 +55,16 @@
   }
 };
 
+const isoFormat = date => {
+  return format(date, "YYYY-MM-DD");
+};
+
 const init = () => {
   return {
     type: TYPES.BOTTLENECK,
     selectedFairwayAvailabilityFeature: null,
-    to: isoFormat(new Date()),
-    from: isoFormat(subYears(new Date(), 1)),
+    to: null,
+    from: null,
     frequency: FREQUENCIES.MONTHLY,
     limitingFactor: null,
     depthlimit1: 230,