From 438556b9ee0a10bc89adef5018a3cc7280e19050 Mon Sep 17 00:00:00 2001
From: JunGu Kang <chr0m3.kr@gmail.com>
Date: Tue, 10 Dec 2019 00:24:54 +0900
Subject: [PATCH] #23 Add Datetime Field Component and moment Dependency

---
 package-lock.json                |  5 ++
 package.json                     |  1 +
 src/components/DateTimeField.vue | 93 ++++++++++++++++++++++++++++++++
 3 files changed, 99 insertions(+)
 create mode 100644 src/components/DateTimeField.vue

diff --git a/package-lock.json b/package-lock.json
index f362cc2..f2ca81a 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 0766420..2bb3fcf 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/DateTimeField.vue b/src/components/DateTimeField.vue
new file mode 100644
index 0000000..27574ea
--- /dev/null
+++ b/src/components/DateTimeField.vue
@@ -0,0 +1,93 @@
+<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>
-- 
GitLab