src/views/Promotion/EventView.vue

@@ -63,6 +63,29 @@
               required
             />
           </v-card-text>
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="4">
+                기간
+              </v-col>
+              <v-col
+                cols="8"
+                class="datepicker-wrapper"
+              >
+                <datetime
+                  v-model="event.startDate"
+                  class="datepicker"
+                  format="YYYY-MM-DD"
+                />
+                <div> ~ </div>
+                <datetime
+                  v-model="event.endDate"
+                  class="datepicker"
+                  format="YYYY-MM-DD"
+                />
+              </v-col>
+            </v-row>
+          </v-card-text>
           <v-card-text>
             <div class="image-select">
               <label for="thumbnailImage">
@@ -254,9 +277,11 @@
 
 <script>
 import * as api from '@/api/event'
+import datetime from 'vuejs-datetimepicker';
 
 export default {
   name: "EventView",
+  components: { datetime },
 
   data() {
     return {
@@ -344,6 +369,8 @@ export default {
       this.event.isPopup = item.isPopup
       this.event.isAdult = item.isAdult === null ? '' : item.isAdult
       this.event.popupImageUrl = item.popupImageUrl
+      this.event.startDate = item.startDate
+      this.event.endDate = item.endDate
       this.show_write_dialog = true
     },
 
@@ -369,6 +396,11 @@ export default {
         return false;
       }
 
+      if (this.event.startDate == null || this.event.endDate == null) {
+        this.notifyError("이벤트 기간을 선택하세요")
+        return false;
+      }
+
       return true
     },
 
@@ -383,6 +415,8 @@ export default {
         formData.append("title", this.event.title)
         formData.append("thumbnail", this.event.thumbnailImage)
         formData.append("isPopup", this.event.isPopup ? this.event.isPopup : false)
+        formData.append("startDate", this.event.startDate)
+        formData.append("endDate", this.event.endDate)
 
         if (this.event.detailImage != null) {
           formData.append("detail", this.event.detailImage)
@@ -451,6 +485,14 @@ export default {
           formData.append("isAdult", JSON.parse(this.event.isAdult))
         }
 
+        if (this.event.startDate != null) {
+          formData.append("startDate", this.event.startDate)
+        }
+
+        if (this.event.endDate != null) {
+          formData.append("endDate", this.event.endDate)
+        }
+
         const res = await api.modify(formData)
         if (res.status === 200 && res.data.success === true) {
           this.show_write_dialog = false
@@ -505,6 +547,19 @@ export default {
 </script>
 
 <style scoped>
+.datepicker {
+  text-align: center;
+}
+
+.datepicker-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
+.datepicker-wrapper > div {
+  margin: 20px;
+}
+
 .image-select label {
   display: inline-block;
   padding: 10px 20px;