Commit @d2bc760d27574aecaad80dbc69fb5742e3615d39

류윤주 04-01

250401 류윤주 input date 공통화

@d2bc760d27574aecaad80dbc69fb5742e3615d39

7009a41

d2bc760

client/resources/js/defaultDateParams.js

--- client/resources/js/defaultDateParams.js

+++ client/resources/js/defaultDateParams.js


     },
 
     // 조회기간 유효성 검사
+    // validateDate(event, cate) {
+    //   const val = event.target.value; // 변경된 날짜 값
+    //   // 시작일 변경 시
+    //   if (cate === "startDt") {
+    //     if (this.searchDate.endDt !== null && this.searchDate.endDt < val) {
+    //       alert("시작일은 종료일보다 클 수 없습니다.");
+    //       this.searchDate.startDt = null; // 유효하지 않은 경우, 시작일을 초기화
+    //     } else {
+    //       this.searchDate.startDt = val;
+    //     }
+    //   }
+    //   // 종료일 변경 시
+    //   else if (cate === "endDt") {
+    //     if (this.searchDate.startDt !== null && this.searchDate.startDt > val) {
+    //       alert("종료일은 시작일보다 작을 수 없습니다.");
+    //       this.searchDate.endDt = null; // 유효하지 않은 경우, 종료일을 초기화
+    //     } else {
+    //       this.searchDate.endDt = val;
+    //     }
+    //   }
+    // },
+
     validateDate(event, cate) {
-      const val = event.target.value; // 변경된 날짜 값
-      // 시작일 변경 시
+      let val;
+
+      // 값이 Date 객체인지 확인
+      if (event instanceof Date) {
+        const year = event.getFullYear();
+        const month = ('00' + (event.getMonth() + 1)).slice(-2);
+        const day = ('00' + event.getDate()).slice(-2);
+
+        val = `${year}-${month}-${day}`;
+      }
+      // 값이 Event 객체인지 확인
+      else if (event instanceof Event) {
+        val = event.target.value; // input에서 직접 입력된 값
+      }
+      // 그 외의 경우 처리 불필요 (예외 처리)
+      else {
+        console.error("Invalid date input:", event);
+        return;
+      }
+
+      // 시작일 검증
       if (cate === "startDt") {
-        if (this.searchDate.endDt !== null && this.searchDate.endDt < val) {
+        if (this.searchDate.endDt && this.searchDate.endDt < val) {
           alert("시작일은 종료일보다 클 수 없습니다.");
-          this.searchDate.startDt = null; // 유효하지 않은 경우, 시작일을 초기화
+          this.searchDate.startDt = null;
         } else {
           this.searchDate.startDt = val;
         }
       }
-      // 종료일 변경 시
+      // 종료일 검증
       else if (cate === "endDt") {
-        if (this.searchDate.startDt !== null && this.searchDate.startDt > val) {
+        if (this.searchDate.startDt && this.searchDate.startDt > val) {
           alert("종료일은 시작일보다 작을 수 없습니다.");
-          this.searchDate.endDt = null; // 유효하지 않은 경우, 종료일을 초기화
+          this.searchDate.endDt = null;
         } else {
           this.searchDate.endDt = val;
         }
       }
-    },
+    }
   }
 }

7009a41

d2bc760

client/resources/scss/admin/content.scss

--- client/resources/scss/admin/content.scss

+++ client/resources/scss/admin/content.scss

...	...	@@ -371,3 +371,32 @@
371	371	.mb30{
372	372	margin-bottom: 3rem;
373	373	}
	374	+
	375	+.dp__main{
	376	+ height: 100%;
	377	+ >div:first-child{
	378	+ height: 100%;
	379	+ *{
	380	+ height: 100%;
	381	+ }
	382	+ .dp__input{
	383	+ width: 100%;
	384	+ border: none;
	385	+ background-color: transparent;
	386	+ transition: none;
	387	+ line-height: 100%;
	388	+ padding: 0;
	389	+ font-size: 1.5rem;
	390	+ }
	391	+ .dp__icon{
	392	+ display: none;
	393	+ }
	394	+
	395	+ }
	396	+
	397	+ .dp__menu,
	398	+ .dp__selection_preview,
	399	+ .dp__action_button{
	400	+ font-size: 1.5rem;
	401	+ }
	402	+} (파일 끝에 줄바꿈 문자 없음)

7009a41

d2bc760

client/views/pages/adm/log/LoginLog.vue

--- client/views/pages/adm/log/LoginLog.vue

+++ client/views/pages/adm/log/LoginLog.vue


 
         </div>
         <div class="search-bar">
-          <VueDatePicker
-            time-picker-inline
-            placeholder="시작일"
-            locale="ko"
-            v-model="search['startDt']"
-          />
-        <div class="pd10">-</div>
-          <VueDatePicker
-            time-picker-inline
-            placeholder="종료일"
-            locale="ko"
-            v-model="search['endDt']"
-          />
+          <div class="form-control sm cal">
+            <VueDatePicker
+              InlineOptions
+              placeholder="시작일"
+              locale="ko"
+              :enable-time-picker="false"
+              :format="formatDate"
+              v-model="search['startDt']"
+            />
+          </div>
+          <div class="mark">-</div>
+          <div class="form-control sm cal">
+              <VueDatePicker
+              InlineOptions
+              placeholder="종료일"
+              locale="ko"
+              :enable-time-picker="false"
+              :format="formatDate"
+              v-model="search['endDt']"
+            />
+          </div>
           <select
             name="selectType"
             id="selectType"

       }
     },
     //─────axios─────┘
+
+    // 날짜포맷
+    formatDate(date) {
+      const year = date.getFullYear();
+      const month = ('00' + (date.getMonth() + 1)).slice(-2);
+      const day = ('00' + date.getDate()).slice(-2);
+      return `${year}-${month}-${day}`;
+    }
+
   },
 };
 </script>

7009a41

d2bc760

client/views/pages/adm/log/PersonalDataLog.vue

--- client/views/pages/adm/log/PersonalDataLog.vue

+++ client/views/pages/adm/log/PersonalDataLog.vue


       <p>개인정보 조회 이력</p>
     </div>
     <div class="search-bar">
-            <VueDatePicker
-              time-picker-inline
-              placeholder="시작일"
-              locale="ko"
-              v-model="search['startDt']"
+      <div class="form-control sm cal">
+        <VueDatePicker
+          InlineOptions   
+          placeholder="시작일"
+          locale="ko"
+          :enable-time-picker="false"
+          :format="formatDate"
+          v-model="search['startDt']"
             />
-          <div>-</div>
-            <VueDatePicker
-              time-picker-inline
-              placeholder="종료일"
-              locale="ko"
-              v-model="search['endDt']"
-            />
+      </div>  
+      <div class="mark">-</div>
+      <div  class="form-control sm cal">
+        <VueDatePicker
+          InlineOptions
+          placeholder="종료일"
+          locale="ko"
+          :enable-time-picker="false"
+          :format="formatDate"
+          v-model="search['endDt']"
+        />
+      </div>
             <select
               name="selectType"
               id="selectType"

       }
     },
     //─────axios─────┘},
+    // 날짜포맷
+    formatDate(date) {
+      const year = date.getFullYear();
+      const month = date.getMonth() + 1;
+      const day = date.getDate();
+
+      // 날짜 앞에 0을 붙여야 하는 경우
+      if (month || day < 10) {
+        const zeroDay = ('00' + day).slice(-2);
+        const zeroMonth = ('00' + month).slice(-2);
+
+        return `${year}-${zeroMonth}-${zeroDay}`;
+      } else {
+
+        return `${year}-${month}-${day}`;
+      }
+    }
   },
 };
 </script>

7009a41

d2bc760

client/views/pages/adm/statistics/BbsStatistics.vue

--- client/views/pages/adm/statistics/BbsStatistics.vue

+++ client/views/pages/adm/statistics/BbsStatistics.vue


           </div>
 
         </div>
-        <div class="input-group mb30">
-            <input
+        <div class="search-bar mb30">
+          <div class="form-control sm cal">
+            <VueDatePicker
+              InlineOptions
+              placeholder="시작일"
+              locale="ko"
+              :enable-time-picker="false"
+              :format="formatDate"
+              v-model="searchDate.startDt"
+              @update:model-value="validateDate($event, 'startDt')"
+            />
+          </div>
+            <!-- <input
               type="date"
               class="form-control sm datepicker"
               v-model="searchDate.startDt"
               @change="validateDate($event, 'startDt')"
-            />
+            /> -->
             <div class="mark">-</div>
-            <input
+            <div class="form-control sm cal">
+              <VueDatePicker
+              InlineOptions
+              placeholder="종료일"
+              locale="ko"
+              :enable-time-picker="false"
+              :format="formatDate"
+              v-model="searchDate.endDt"
+              @update:model-value="validateDate($event, 'endDt')"
+            />
+          </div>
+            <!-- <input
               type="date"
               class="form-control sm datepicker"
               v-model="searchDate.endDt"
               @change="validateDate($event, 'endDt')"
-            />
+            /> -->
             <button class="btn sm primary" @click="axiosSelectList">
               조회
             </button>

           });
       });
     },
+
+    // 날짜포맷
+    formatDate(date) {
+      const year = date.getFullYear();
+      const month = ('00' + (date.getMonth() + 1)).slice(-2);
+      const day = ('00' + date.getDate()).slice(-2);
+      return `${year}-${month}-${day}`;
+    }
   },
 };
 </script>

7009a41

d2bc760

client/views/pages/adm/statistics/MenuStatistics.vue

--- client/views/pages/adm/statistics/MenuStatistics.vue

+++ client/views/pages/adm/statistics/MenuStatistics.vue


           </div>
 
         </div>
-        <div class="input-group mb30">
-            <input
+        <div class="search-bar mb30">
+          <div class="form-control sm cal">
+            <VueDatePicker
+              InlineOptions
+              placeholder="시작일"
+              locale="ko"
+              :enable-time-picker="false"
+              :format="formatDate"
+              v-model="searchDate.startDt"
+               @update:model-value="validateDate($event, 'startDt')"
+            />
+          </div>
+            <!-- <input
               type="date"
               class="form-control sm"
               v-model="searchDate.startDt"
               @change="validateDate($event, 'startDt')"
-            />
+            /> -->
             <div>-</div>
-            <input
+            <div class="form-control sm cal">
+              <VueDatePicker
+              InlineOptions
+              placeholder="종료일"
+              locale="ko"
+              :enable-time-picker="false"
+              :format="formatDate"
+              v-model="searchDate.endDt"
+              @update:model-value="validateDate($event, 'endDt')"
+            />
+          </div>
+            <!-- <input
               type="date"
               class="form-control sm"
               v-model="searchDate.endDt"
               @change="validateDate($event, 'endDt')"
-            />      
+            />       -->
             <button class="btn sm primary" @click="axiosSelectList">
               조회
             </button>

           });
       });
     },
+    // 날짜포맷
+    formatDate(date) {
+      const year = date.getFullYear();
+      const month = ('00' + (date.getMonth() + 1)).slice(-2);
+      const day = ('00' + date.getDate()).slice(-2);
+      return `${year}-${month}-${day}`;
+    }
   },
 };
 </script>

7009a41

d2bc760

client/views/pages/adm/statistics/UserStatistics.vue

--- client/views/pages/adm/statistics/UserStatistics.vue

+++ client/views/pages/adm/statistics/UserStatistics.vue


           </div>
 
         </div>
-        <div class="input-group mb30">
-          <input
+        <div class="search-bar mb30">
+          <div class="form-control sm cal">
+              <VueDatePicker
+              InlineOptions
+              placeholder="종료일"
+              locale="ko"
+              :enable-time-picker="false"
+              :format="formatDate"
+              v-model="searchDate.startDt"
+              @update:model-value="validateDate($event, 'startDt')"
+            />
+          </div>
+          <!-- <input
             type="date"
             class="form-control sm"
             v-model="searchDate.startDt"
             @change="validateDate($event, 'startDt')"
-          />
+          /> -->
           <div class="mark">-</div>
-
-          <input
+          <div class="form-control sm cal">
+              <VueDatePicker
+              InlineOptions
+              placeholder="종료일"
+              locale="ko"
+              :enable-time-picker="false"
+              :format="formatDate"
+              v-model="searchDate.endDt"
+              @update:model-value="validateDate($event, 'endDt')"
+            />
+          </div>
+          <!-- <input
             type="date"
             class="form-control sm"
             v-model="searchDate.endDt"
             @change="validateDate($event, 'endDt')"
-          />
+          /> -->
 
 
           <button class="btn sm primary" @click="axiosSelectList">

           });
       });
     },
+    // 날짜포맷
+    formatDate(date) {
+      const year = date.getFullYear();
+      const month = ('00' + (date.getMonth() + 1)).slice(-2);
+      const day = ('00' + date.getDate()).slice(-2);
+      return `${year}-${month}-${day}`;
+    }
   },
 };
 </script>

Add a comment

Open 0
Closed 0

List

...	...	@@ -36,26 +36,67 @@
36	36	},
37	37
38	38	// 조회기간 유효성 검사
	39	+ // validateDate(event, cate) {
	40	+ // const val = event.target.value; // 변경된 날짜 값
	41	+ // // 시작일 변경 시
	42	+ // if (cate === "startDt") {
	43	+ // if (this.searchDate.endDt !== null && this.searchDate.endDt < val) {
	44	+ // alert("시작일은 종료일보다 클 수 없습니다.");
	45	+ // this.searchDate.startDt = null; // 유효하지 않은 경우, 시작일을 초기화
	46	+ // } else {
	47	+ // this.searchDate.startDt = val;
	48	+ // }
	49	+ // }
	50	+ // // 종료일 변경 시
	51	+ // else if (cate === "endDt") {
	52	+ // if (this.searchDate.startDt !== null && this.searchDate.startDt > val) {
	53	+ // alert("종료일은 시작일보다 작을 수 없습니다.");
	54	+ // this.searchDate.endDt = null; // 유효하지 않은 경우, 종료일을 초기화
	55	+ // } else {
	56	+ // this.searchDate.endDt = val;
	57	+ // }
	58	+ // }
	59	+ // },
	60	+
39	61	validateDate(event, cate) {
40		- const val = event.target.value; // 변경된 날짜 값
41		- // 시작일 변경 시
	62	+ let val;
	63	+
	64	+ // 값이 Date 객체인지 확인
	65	+ if (event instanceof Date) {
	66	+ const year = event.getFullYear();
	67	+ const month = ('00' + (event.getMonth() + 1)).slice(-2);
	68	+ const day = ('00' + event.getDate()).slice(-2);
	69	+
	70	+ val = `${year}-${month}-${day}`;
	71	+ }
	72	+ // 값이 Event 객체인지 확인
	73	+ else if (event instanceof Event) {
	74	+ val = event.target.value; // input에서 직접 입력된 값
	75	+ }
	76	+ // 그 외의 경우 처리 불필요 (예외 처리)
	77	+ else {
	78	+ console.error("Invalid date input:", event);
	79	+ return;
	80	+ }
	81	+
	82	+ // 시작일 검증
42	83	if (cate === "startDt") {
43		- if (this.searchDate.endDt !== null && this.searchDate.endDt < val) {
	84	+ if (this.searchDate.endDt && this.searchDate.endDt < val) {
44	85	alert("시작일은 종료일보다 클 수 없습니다.");
45		- this.searchDate.startDt = null; // 유효하지 않은 경우, 시작일을 초기화
	86	+ this.searchDate.startDt = null;
46	87	} else {
47	88	this.searchDate.startDt = val;
48	89	}
49	90	}
50		- // 종료일 변경 시
	91	+ // 종료일 검증
51	92	else if (cate === "endDt") {
52		- if (this.searchDate.startDt !== null && this.searchDate.startDt > val) {
	93	+ if (this.searchDate.startDt && this.searchDate.startDt > val) {
53	94	alert("종료일은 시작일보다 작을 수 없습니다.");
54		- this.searchDate.endDt = null; // 유효하지 않은 경우, 종료일을 초기화
	95	+ this.searchDate.endDt = null;
55	96	} else {
56	97	this.searchDate.endDt = val;
57	98	}
58	99	}
59		- },
	100	+ }
60	101	}
61	102	} (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -9,19 +9,27 @@
9	9
10	10	</div>
11	11	<div class="search-bar">
12		- <VueDatePicker
13		- time-picker-inline
14		- placeholder="시작일"
15		- locale="ko"
16		- v-model="search['startDt']"
17		- />
18		- <div class="pd10">-</div>
19		- <VueDatePicker
20		- time-picker-inline
21		- placeholder="종료일"
22		- locale="ko"
23		- v-model="search['endDt']"
24		- />
	12	+ <div class="form-control sm cal">
	13	+ <VueDatePicker
	14	+ InlineOptions
	15	+ placeholder="시작일"
	16	+ locale="ko"
	17	+ :enable-time-picker="false"
	18	+ :format="formatDate"
	19	+ v-model="search['startDt']"
	20	+ />
	21	+ </div>
	22	+ <div class="mark">-</div>
	23	+ <div class="form-control sm cal">
	24	+ <VueDatePicker
	25	+ InlineOptions
	26	+ placeholder="종료일"
	27	+ locale="ko"
	28	+ :enable-time-picker="false"
	29	+ :format="formatDate"
	30	+ v-model="search['endDt']"
	31	+ />
	32	+ </div>
25	33	<select
26	34	name="selectType"
27	35	id="selectType"
...	...	@@ -164,6 +172,15 @@
164	172	}
165	173	},
166	174	//─────axios─────┘
	175	+
	176	+ // 날짜포맷
	177	+ formatDate(date) {
	178	+ const year = date.getFullYear();
	179	+ const month = ('00' + (date.getMonth() + 1)).slice(-2);
	180	+ const day = ('00' + date.getDate()).slice(-2);
	181	+ return `${year}-${month}-${day}`;
	182	+ }
	183	+
167	184	},
168	185	};
169	186	</script>

...	...	@@ -4,19 +4,27 @@
4	4	<p>개인정보 조회 이력</p>
5	5	</div>
6	6	<div class="search-bar">
7		- <VueDatePicker
8		- time-picker-inline
9		- placeholder="시작일"
10		- locale="ko"
11		- v-model="search['startDt']"
	7	+ <div class="form-control sm cal">
	8	+ <VueDatePicker
	9	+ InlineOptions
	10	+ placeholder="시작일"
	11	+ locale="ko"
	12	+ :enable-time-picker="false"
	13	+ :format="formatDate"
	14	+ v-model="search['startDt']"
12	15	/>
13		- <div>-</div>
14		- <VueDatePicker
15		- time-picker-inline
16		- placeholder="종료일"
17		- locale="ko"
18		- v-model="search['endDt']"
19		- />
	16	+ </div>
	17	+ <div class="mark">-</div>
	18	+ <div class="form-control sm cal">
	19	+ <VueDatePicker
	20	+ InlineOptions
	21	+ placeholder="종료일"
	22	+ locale="ko"
	23	+ :enable-time-picker="false"
	24	+ :format="formatDate"
	25	+ v-model="search['endDt']"
	26	+ />
	27	+ </div>
20	28	<select
21	29	name="selectType"
22	30	id="selectType"
...	...	@@ -198,6 +206,23 @@
198	206	}
199	207	},
200	208	//─────axios─────┘},
	209	+ // 날짜포맷
	210	+ formatDate(date) {
	211	+ const year = date.getFullYear();
	212	+ const month = date.getMonth() + 1;
	213	+ const day = date.getDate();
	214	+
	215	+ // 날짜 앞에 0을 붙여야 하는 경우
	216	+ if (month \|\| day < 10) {
	217	+ const zeroDay = ('00' + day).slice(-2);
	218	+ const zeroMonth = ('00' + month).slice(-2);
	219	+
	220	+ return `${year}-${zeroMonth}-${zeroDay}`;
	221	+ } else {
	222	+
	223	+ return `${year}-${month}-${day}`;
	224	+ }
	225	+ }
201	226	},
202	227	};
203	228	</script>

...	...	@@ -8,20 +8,42 @@
8	8	</div>
9	9
10	10	</div>
11		- <div class="input-group mb30">
12		- <input
	11	+ <div class="search-bar mb30">
	12	+ <div class="form-control sm cal">
	13	+ <VueDatePicker
	14	+ InlineOptions
	15	+ placeholder="시작일"
	16	+ locale="ko"
	17	+ :enable-time-picker="false"
	18	+ :format="formatDate"
	19	+ v-model="searchDate.startDt"
	20	+ @update:model-value="validateDate($event, 'startDt')"
	21	+ />
	22	+ </div>
	23	+ <!-- <input
13	24	type="date"
14	25	class="form-control sm datepicker"
15	26	v-model="searchDate.startDt"
16	27	@change="validateDate($event, 'startDt')"
17		- />
	28	+ /> -->
18	29	<div class="mark">-</div>
19		- <input
	30	+ <div class="form-control sm cal">
	31	+ <VueDatePicker
	32	+ InlineOptions
	33	+ placeholder="종료일"
	34	+ locale="ko"
	35	+ :enable-time-picker="false"
	36	+ :format="formatDate"
	37	+ v-model="searchDate.endDt"
	38	+ @update:model-value="validateDate($event, 'endDt')"
	39	+ />
	40	+ </div>
	41	+ <!-- <input
20	42	type="date"
21	43	class="form-control sm datepicker"
22	44	v-model="searchDate.endDt"
23	45	@change="validateDate($event, 'endDt')"
24		- />
	46	+ /> -->
25	47	<button class="btn sm primary" @click="axiosSelectList">
26	48	조회
27	49	</button>
...	...	@@ -225,6 +247,14 @@
225	247	});
226	248	});
227	249	},
	250	+
	251	+ // 날짜포맷
	252	+ formatDate(date) {
	253	+ const year = date.getFullYear();
	254	+ const month = ('00' + (date.getMonth() + 1)).slice(-2);
	255	+ const day = ('00' + date.getDate()).slice(-2);
	256	+ return `${year}-${month}-${day}`;
	257	+ }
228	258	},
229	259	};
230	260	</script> (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -8,21 +8,42 @@
8	8	</div>
9	9
10	10	</div>
11		- <div class="input-group mb30">
12		- <input
	11	+ <div class="search-bar mb30">
	12	+ <div class="form-control sm cal">
	13	+ <VueDatePicker
	14	+ InlineOptions
	15	+ placeholder="종료일"
	16	+ locale="ko"
	17	+ :enable-time-picker="false"
	18	+ :format="formatDate"
	19	+ v-model="searchDate.startDt"
	20	+ @update:model-value="validateDate($event, 'startDt')"
	21	+ />
	22	+ </div>
	23	+ <!-- <input
13	24	type="date"
14	25	class="form-control sm"
15	26	v-model="searchDate.startDt"
16	27	@change="validateDate($event, 'startDt')"
17		- />
	28	+ /> -->
18	29	<div class="mark">-</div>
19		-
20		- <input
	30	+ <div class="form-control sm cal">
	31	+ <VueDatePicker
	32	+ InlineOptions
	33	+ placeholder="종료일"
	34	+ locale="ko"
	35	+ :enable-time-picker="false"
	36	+ :format="formatDate"
	37	+ v-model="searchDate.endDt"
	38	+ @update:model-value="validateDate($event, 'endDt')"
	39	+ />
	40	+ </div>
	41	+ <!-- <input
21	42	type="date"
22	43	class="form-control sm"
23	44	v-model="searchDate.endDt"
24	45	@change="validateDate($event, 'endDt')"
25		- />
	46	+ /> -->
26	47
27	48
28	49	<button class="btn sm primary" @click="axiosSelectList">
...	...	@@ -214,6 +235,13 @@
214	235	});
215	236	});
216	237	},
	238	+ // 날짜포맷
	239	+ formatDate(date) {
	240	+ const year = date.getFullYear();
	241	+ const month = ('00' + (date.getMonth() + 1)).slice(-2);
	242	+ const day = ('00' + date.getDate()).slice(-2);
	243	+ return `${year}-${month}-${day}`;
	244	+ }
217	245	},
218	246	};
219	247	</script> (파일 끝에 줄바꿈 문자 없음)

Delete comment