#23 Add Datetime Field Component and moment Dependency

package-lock.json

@@ -8810,6 +8810,11 @@
         }
       }
     },
+    "moment": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "core-js": "^3.3.2",
+    "moment": "^2.24.0",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3",
     "vuetify": "^2.1.0",

src/components/DateTimeField.vue

+<template>
+  <v-row>
+    <v-col
+      cols="6"
+    >
+      <v-menu
+        :close-on-content-click="false"
+        min-width="290px"
+        offset-y
+        v-model="showDatePicker"
+      >
+        <template
+          v-slot:activator="{ on }"
+        >
+          <v-text-field
+            label="날짜"
+            readonly
+            v-model="date"
+            v-on="on"
+          ></v-text-field>
+        </template>
+        <v-date-picker
+          v-model="date"
+          @input="showDatePicker = false"
+        ></v-date-picker>
+      </v-menu>
+    </v-col>
+    <v-col
+      col="6"
+    >
+      <v-menu
+        :close-on-content-click="false"
+        min-width="290px"
+        offset-y
+        v-model="showTimePicker"
+      >
+        <template
+          v-slot:activator="{ on }"
+        >
+          <v-text-field
+            label="시각"
+            readonly
+            v-model="time"
+            v-on="on"
+          ></v-text-field>
+        </template>
+        <v-time-picker
+          v-model="time"
+          @input="showTimePicker = false"
+        ></v-time-picker>
+      </v-menu>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import moment from 'moment';
+
+export default {
+  name: 'DateTimeField',
+
+  props: ['datetime'],
+
+  data: () => ({
+    showDatePicker: false,
+    showTimePicker: false,
+    date: '',
+    time: '',
+  }),
+
+  watch: {
+    date() {
+      this.$emit('update:datetime', `${this.date} ${this.time}`);
+    },
+    time() {
+      this.$emit('update:datetime', `${this.date} ${this.time}`);
+    },
+  },
+
+  created() {
+    const m = moment(this.datetime);
+    this.date = m.format('YYYY-MM-DD');
+    this.time = m.format('HH:mm');
+  },
+};
+</script>
+
+
+<style scoped>
+.col {
+  padding: 0 12px 0;
+}
+</style>