fix datetime field

src/Aiplugs.PoshApp/Views/Shared/Components/DateTime.cshtml

@@ -1,6 +1,7 @@
 <template id="datetime-field-component">
     <span class="d-flex">
-        <v-menu v-model="menuDate"
+        <v-menu ref="dateMenu"
+                v-model="menuDate"
                 :close-on-content-click="true"
                 :nudge-right="40"
                 transition="scale-transition"
@@ -15,36 +16,47 @@
                     :filled="filled" 
                     :rounded="rounded" 
                     :dense="dense"
+                    :value="date"
                     readonly
-                    v-bind:value="date"
                     v-on="on"
                     class="flex-grow-1"
                 ></v-text-field>
             </template>
-            <v-date-picker v-model="date" v-on:input="handleInput"></v-date-picker>
+            <v-date-picker v-model="date" 
+                           v-on:input="handleInput"
+                           v-on:click:date="$refs.dateMenu.save(date)">
+            </v-date-picker>
         </v-menu>
-        <v-menu v-model="menuTime"
+        <v-menu ref="timeMenu" 
+                v-model="menuTime"
                 :close-on-content-click="false"
                 :nudge-right="40"
                 transition="scale-transition"
                 offset-y
                 min-width="290px">
             <template v-slot:activator="{ on }">
-                <v-text-field
+                <v-text-field 
                     class="ml-4 flex-grow-1"
                     :label="`${label} - Time`" 
                     :hint="hint"
                     :rules="rules"
                     :required="required"
-                    readonly
-                    v-bind:value="time"
-                    v-on="on"
                     :filled="filled" 
                     :rounded="rounded" 
                     :dense="dense"
+                    :value="time"
+                    readonly
+                    v-on="on"
                 ></v-text-field>
             </template>
-            <v-time-picker v-model="time" v-on:input="handleInput"></v-date-picker>
+            <v-time-picker ref="timePicker"
+                           v-model="time"
+                           v-on:input="handleInput"
+                           v-if="menuTime">
+                <v-spacer></v-spacer>
+                <v-btn text color="primary" v-on:click="menuTime = false">Cancel</v-btn>
+                <v-btn text color="primary" v-on:click="$refs.timeMenu.save(time)">OK</v-btn>
+            </v-time-picker>
         </v-menu>
     </span>
 </template>
@@ -62,21 +74,40 @@
             dense: Boolean,
         },
         data() {
-            const d = Date.parse(this.value) || null;
-            const date = d ? `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()}` : null;
-            const time = d ? `${d.getHours()}:${d.getMinutes()}` : null;
+            const { date, time } = this.extractValue(this.value);
             return {
                 date,
                 time,
                 menuDate: false,
                 menuTime: false
             }
         },
+        watch: {
+            value(newValue) {
+                const { date, time } = this.extractValue(newValue);
+                this.date = date;
+                this.time = time;
+            }
+        },
         methods: {
+            extractValue(value) {
+                const ticks = Date.parse(value);
+
+                if (isNaN(ticks))
+                    return { date: null, time: null };
+
+                const d = new Date(ticks);
+                const date = d ? `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()}` : null;
+                const time = d ? `${d.getHours()}:${d.getMinutes()}` : null;
+                return { date, time };
+            },
             handleInput(ev) {
                 this.menuDate = false;
                 this.menuTime = false;
-                this.$emit('input', new Date(`${this.date} ${this.time}`).toJSON());
+                const d = new Date(`${this.date} ${this.time}`);
+                if (!isNaN(d)) {
+                    this.$emit('input', d.toJSON());
+                }
             }
         }
     })