diff --git a/ayanova/src/components/duration-control.vue b/ayanova/src/components/duration-control.vue
index 3dd382b7..e94fdb96 100644
--- a/ayanova/src/components/duration-control.vue
+++ b/ayanova/src/components/duration-control.vue
@@ -2,16 +2,43 @@
   <div>
     <template v-if="!readonly">
       <v-text-field
-        ref="dateField"
+        v-if="showDays"
         :value="days"
-        @input="handleInput"
+        @input="handleDaysInput"
         :readonly="readonly"
         :disabled="disabled"
         :label="$ay.t('TimeSpanDays')"
         type="number"
-        :num
         :data-cy="!!$ay.dev ? 'durationdays:' + testId : false"
       ></v-text-field>
+      <v-text-field
+        :value="hours"
+        @input="handleHoursInput"
+        :readonly="readonly"
+        :disabled="disabled"
+        :label="$ay.t('TimeSpanHours')"
+        type="number"
+        :data-cy="!!$ay.dev ? 'durationhours:' + testId : false"
+      ></v-text-field>
+      <v-text-field
+        :value="minutes"
+        @input="handleMinutesInput"
+        :readonly="readonly"
+        :disabled="disabled"
+        :label="$ay.t('TimeSpanMinutes')"
+        type="number"
+        :data-cy="!!$ay.dev ? 'durationminutes:' + testId : false"
+      ></v-text-field>
+      <v-text-field
+        v-if="showSeconds"
+        :value="seconds"
+        @input="handleSecondsInput"
+        :readonly="readonly"
+        :disabled="disabled"
+        :label="$ay.t('TimeSpanSeconds')"
+        type="number"
+        :data-cy="!!$ay.dev ? 'durationseconds:' + testId : false"
+      ></v-text-field>
     </template>
     <template v-else>
       <v-text-field
@@ -87,13 +114,17 @@ export default {
         this.hour12
       );
     },
-    handleDaysInput(value) {},
+    handleDaysInput(value) {
+      this.days = Number(value);
+      this.handleInput();
+    },
     handleHoursInput(value) {
       if (Number(value) > 24) {
-        this.days = 24;
+        this.hours = 24;
       } else {
-        this.days = Number(value);
+        this.hours = Number(value);
       }
+      this.handleInput();
       //oninput="if(Number(this.value) > Number(this.max)) this.value = this.max;"
     },
     handleMinutesInput(value) {
@@ -102,6 +133,7 @@ export default {
       } else {
         this.minutes = Number(value);
       }
+      this.handleInput();
     },
     handleSecondsInput(value) {
       if (Number(value) > 60) {
@@ -109,7 +141,9 @@ export default {
       } else {
         this.seconds = Number(value);
       }
-    }
+      this.handleInput();
+    },
+    handleInput() {}
     //combine these into the proper timespan string
     //   //combine the time and dates into a consolidated value
     //   let TimePortion = window.$gz.locale.utcDateStringToLocal8601TimeOnlyString(