diff --git a/ayanova/src/api/translation.js b/ayanova/src/api/translation.js
index 211e6455..54a747f3 100644
--- a/ayanova/src/api/translation.js
+++ b/ayanova/src/api/translation.js
@@ -223,7 +223,11 @@ export default {
     "MaintenanceExpired",
     "MaintenanceExpiredNote",
     "Import",
-    "Export"
+    "Export",
+    "TimeSpanDays",
+    "TimeSpanHours",
+    "TimeSpanMinutes",
+    "TimeSpanSeconds"
   ],
 
   ////////////////////////////////////////////////////////
diff --git a/ayanova/src/components/duration-control.vue b/ayanova/src/components/duration-control.vue
new file mode 100644
index 00000000..3dd382b7
--- /dev/null
+++ b/ayanova/src/components/duration-control.vue
@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <template v-if="!readonly">
+      <v-text-field
+        ref="dateField"
+        :value="days"
+        @input="handleInput"
+        :readonly="readonly"
+        :disabled="disabled"
+        :label="$ay.t('TimeSpanDays')"
+        type="number"
+        :num
+        :data-cy="!!$ay.dev ? 'durationdays:' + testId : false"
+      ></v-text-field>
+    </template>
+    <template v-else>
+      <v-text-field
+        :value="readonlyFormat()"
+        :label="label"
+        readonly
+        disabled
+      ></v-text-field>
+    </template>
+  </div>
+</template>
+<script>
+/*  Xeslint-disable */
+
+/*
+  "TimeSpanDays": "days",
+  "TimeSpanHours": "hours",
+  "TimeSpanMinutes": "minutes",
+  "TimeSpanSeconds": "seconds", */
+//example serialized json TimeSpans
+//seems to be DD.HH:MM:SS.ms at it's most characters
+//two colons always with an optional period at each end to separate days and ms
+//we don't give a shit about MS and can safely ignore them
+//so just look for a period at the top and the rest is split by colons
+//maybe split by colon first then subsplit first and last elements into days and MS
+//{"data":{"testTSDaysWMS":"22.10:15:22.0330000","testTSHMS":"05:16:33","testTS_DHMS":"5.10:15:33","testTS_MS":"00:15:33","testTS_S":"00:00:33","testTS_D":"22.00:00:00"}}
+export default {
+  data() {
+    return {
+      internalValue: null,
+      days: 0,
+      hours: 0,
+      minutes: 0,
+      seconds: 0
+    };
+  },
+  watch: {
+    value(val) {
+      this.internalValue = val;
+    }
+  },
+  props: {
+    label: String,
+    rules: Array,
+    "error-messages": { type: Array, default: null },
+    value: { type: String, default: null },
+    readonly: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    error: {
+      type: String,
+      required: false
+    },
+    showSeconds: { type: Boolean, default: true },
+    showDays: { type: Boolean, default: true },
+    testId: String
+  },
+  methods: {
+    allErrors() {
+      let ret = "";
+      if (this.error != null) {
+        ret = this.error;
+      }
+      if (this.errorMessages != null && this.errorMessages.length > 0) {
+        ret += this.errorMessages.toString();
+      }
+      return ret;
+    },
+    readonlyFormat() {
+      return window.$gz.locale.utcDateToShortDateLocalized(
+        this.internalValue,
+        this.timeZoneName,
+        this.languageName,
+        this.hour12
+      );
+    },
+    handleDaysInput(value) {},
+    handleHoursInput(value) {
+      if (Number(value) > 24) {
+        this.days = 24;
+      } else {
+        this.days = Number(value);
+      }
+      //oninput="if(Number(this.value) > Number(this.max)) this.value = this.max;"
+    },
+    handleMinutesInput(value) {
+      if (Number(value) > 60) {
+        this.minutes = 60;
+      } else {
+        this.minutes = Number(value);
+      }
+    },
+    handleSecondsInput(value) {
+      if (Number(value) > 60) {
+        this.seconds = 60;
+      } else {
+        this.seconds = Number(value);
+      }
+    }
+    //combine these into the proper timespan string
+    //   //combine the time and dates into a consolidated value
+    //   let TimePortion = window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(
+    //     this.internalValue,
+    //     this.timeZoneName
+    //   );
+    //   if (!TimePortion) {
+    //     TimePortion = "00:00:00";
+    //   }
+    //   let newValue = window.$gz.locale.localTimeDateStringToUTC8601String(
+    //     value + "T" + TimePortion,
+    //     this.timeZoneName
+    //   );
+    //   this.$emit("input", newValue);
+  }
+};
+</script>