ayanova/src/components/date-control.vue

@@ -2,42 +2,60 @@
   <div>
     <v-row>
       <template v-if="!readonly">
-        <v-col cols="12">
-          <v-dialog v-model="dlgdate" width="300px">
-            <template v-slot:activator="{ on }">
-              <v-text-field
-                v-on="on"
-                prepend-icon="$ayiCalendarAlt"
-                @click:prepend="dlgdate = true"
+        <template v-if="!$store.state.nativeDateTimeInput">
+          <v-col cols="12">
+            <v-dialog v-model="dlgdate" width="300px">
+              <template v-slot:activator="{ on }">
+                <v-text-field
+                  v-on="on"
+                  prepend-icon="$ayiCalendarAlt"
+                  @click:prepend="dlgdate = true"
+                  :value="dateValue"
+                  :label="label"
+                  :rules="rules"
+                  readonly
+                  :error="!!hasErrors"
+                  :data-cy="'dtfpick:' + testId"
+                ></v-text-field>
+              </template>
+              <v-date-picker
                 :value="dateValue"
-                :label="label"
-                :rules="rules"
-                readonly
-                :error="!!hasErrors"
-                :data-cy="'dtfpick:' + testId"
-              ></v-text-field>
-            </template>
-            <v-date-picker
-              :value="dateValue"
-              @input="updateDateValue"
-              :locale="languageName"
-              :data-cy="'dpick:' + testId"
-            >
-              <v-btn text color="primary" @click="$emit('input', null)">{{
-                $ay.t("Delete")
-              }}</v-btn>
-              <v-spacer></v-spacer>
+                @input="updateDateValue"
+                :locale="languageName"
+                :data-cy="'dpick:' + testId"
+              >
+                <v-btn text color="primary" @click="$emit('input', null)">{{
+                  $ay.t("Delete")
+                }}</v-btn>
+                <v-spacer></v-spacer>
 
-              <v-btn text color="primary" @click="setToday()">{{
-                $ay.t("DateRangeToday")
-              }}</v-btn>
-              <v-spacer></v-spacer>
-              <v-btn text color="primary" @click="dlgdate = false">{{
-                $ay.t("OK")
-              }}</v-btn>
-            </v-date-picker>
-          </v-dialog>
-        </v-col>
+                <v-btn text color="primary" @click="setToday()">{{
+                  $ay.t("DateRangeToday")
+                }}</v-btn>
+                <v-spacer></v-spacer>
+                <v-btn text color="primary" @click="dlgdate = false">{{
+                  $ay.t("OK")
+                }}</v-btn>
+              </v-date-picker>
+            </v-dialog>
+          </v-col>
+        </template>
+        <template v-if="$store.state.nativeDateTimeInput">
+          <v-col cols="6">
+            <v-text-field
+              ref="dateField"
+              :value="dateValue"
+              @change="updateDateValue"
+              :readonly="readonly"
+              :disabled="disabled"
+              :label="label"
+              :rules="rules"
+              type="date"
+              :error-messages="errorMessages"
+              :data-cy="'dpick:' + testId"
+            ></v-text-field>
+          </v-col>
+        </template>
       </template>
       <template v-else>
         <v-col cols="12">

ayanova/src/components/time-control.vue

@@ -2,41 +2,56 @@
   <div>
     <v-row>
       <template v-if="!readonly">
-        <v-col cols="12">
-          <v-dialog v-model="dlgtime" width="300px">
-            <template v-slot:activator="{ on }">
-              <v-text-field
-                v-on="on"
-                :value="readonlyFormat()"
-                :label="label"
-                prepend-icon="$ayiClock"
-                @click:prepend="dlgtime = true"
-                readonly
-                :error="!!hasErrors"
-                :data-cy="'ttfpick:' + testId"
-              ></v-text-field>
-            </template>
-            <v-time-picker
-              scrollable
-              ampm-in-title
-              :format="hour12 ? 'ampm' : '24hr'"
+        <template v-if="!$store.state.nativeDateTimeInput">
+          <v-col cols="12">
+            <v-dialog v-model="dlgtime" width="300px">
+              <template v-slot:activator="{ on }">
+                <v-text-field
+                  v-on="on"
+                  :value="readonlyFormat()"
+                  :label="label"
+                  prepend-icon="$ayiClock"
+                  @click:prepend="dlgtime = true"
+                  readonly
+                  :error="!!hasErrors"
+                  :data-cy="'ttfpick:' + testId"
+                ></v-text-field>
+              </template>
+              <v-time-picker
+                scrollable
+                ampm-in-title
+                :format="hour12 ? 'ampm' : '24hr'"
+                :value="timeValue"
+                @input="updateTimeValue"
+                :data-cy="'tpick:' + testId"
+                ><v-btn text color="primary" @click="$emit('input', null)">{{
+                  $ay.t("Delete")
+                }}</v-btn>
+                <v-spacer></v-spacer>
+                <v-btn text color="primary" @click="setNow()">{{
+                  $ay.t("Now")
+                }}</v-btn>
+                <v-spacer></v-spacer>
+                <v-btn text color="primary" @click="dlgtime = false">{{
+                  $ay.t("OK")
+                }}</v-btn>
+              </v-time-picker>
+            </v-dialog>
+          </v-col>
+        </template>
+        <template v-if="$store.state.nativeDateTimeInput">
+          <v-col cols="6">
+            <v-text-field
+              ref="timeField"
               :value="timeValue"
-              @input="updateTimeValue"
-              :data-cy="'tpick:' + testId"
-              ><v-btn text color="primary" @click="$emit('input', null)">{{
-                $ay.t("Delete")
-              }}</v-btn>
-              <v-spacer></v-spacer>
-              <v-btn text color="primary" @click="setNow()">{{
-                $ay.t("Now")
-              }}</v-btn>
-              <v-spacer></v-spacer>
-              <v-btn text color="primary" @click="dlgtime = false">{{
-                $ay.t("OK")
-              }}</v-btn>
-            </v-time-picker>
-          </v-dialog>
-        </v-col>
+              @change="updateTimeValue"
+              :readonly="readonly"
+              :disabled="disabled"
+              type="time"
+              :data-cy="'timeinput:' + testId"
+            ></v-text-field>
+          </v-col>
+        </template>
       </template>
       <template v-else>
         <v-col cols="12">