[#951][3.0] DatePicker > timeFormat, shortcuts의 validator 및 설명 보완 (#952)

Co-authored-by: Hye Yeon, Kim <hy2on@ex-em.com>

docs/views/calendar/api/calendar.md

@@ -28,4 +28,4 @@
 |  |  | week | 주일(일~토) 선택 | \['YYYY-MM-DD'`일`, 'YYYY-MM-DD'`월`, 'YYYY-MM-DD'`화`, 'YYYY-MM-DD'`수`, 'YYYY-MM-DD'`목`, 'YYYY-MM-DD'`금`, 'YYYY-MM-DD'`토`\] |
 |  | multiDayLimit | 1 | `mode: dateMulti, type: date` 시 선택 일수 제한 |  |
 |  | disabledDate | () => {} | 달력 상 사용불가능 날짜를 함수로 정의 |  |
-|  | timeFormat   | '' | 시간값 선택 범위 설정 <br> 타입: string, Array <br> 단일 캘린더: 'HH:mm:00'/'HH:55:00'/'10:mm:ss'로 사용 가능 <br> 다중 캘린더: ['HH:00:ss', 'HH:59:00'] 로 사용 가능 <br> 숫자로 넘기면 disabled 적용  |  | 
+|  | timeFormat   | '' | 시간값 선택 범위 설정 <br> 타입: string, Array <br> 단일 캘린더일 경우 string으로 넘겨야 하며 'HH:mm:00'/'HH:55:00'/'10:mm:ss'로 사용 가능 <br> 다중 캘린더일 경우 Array로 넘겨야 하며 ['HH:00:ss', 'HH:59:00'] 로 사용 가능 <br> 숫자로 넘기면 disabled 적용  |  | 

docs/views/datePicker/api/datePicker.md

@@ -33,5 +33,5 @@
 |  | multiDayLimit | 1 | `mode: dateMulti, type: date` 시 선택 일수 제한 |  |
 |  | disabledDate | () => {} | 달력 상 사용불가능 날짜를 함수로 정의 |  |
 |  | tagShorten | false | 선택된 날짜가 연속되는 경우 날짜를 모두 나열하는 것은 default이나, 이를 `fromDate ~ toDate`로 태그를 단축하여 보여주는 기능. (mode: `dateMulti`, options.multiType: `weekday` or `week`), (mode: `dateRange`)인 경우 사용 가능 |  |
-|  | timeFormat   | '' | 시간값 선택 범위 설정 <br> 타입: string, Array <br> 단일 캘린더: 'HH:mm:00'/'HH:55:00'/'10:mm:ss' 로 사용 가능 <br> 다중 캘린더: ['HH:00:ss', 'HH:59:ss'] 로 사용 가능 <br> 숫자로 넘기면 disabled 적용  |  |
-| shortcuts | Array | [] | shortcut 버튼을 이용한 사용자 정의 객체 Array <br> {<br> label: '어제', <br> value: 'yesterday',<br> customDate: (fromDate, toDate) => {}<br> } <br> DateMulti 모드 제외 |  |
+|  | timeFormat   | '' | 시간값 선택 범위 설정 <br> 타입: string, Array <br> 단일 캘린더일 경우 string으로 넘겨야 하며 'HH:mm:00'/'HH:55:00'/'10:mm:ss'로 사용 가능 <br> 다중 캘린더일 경우 Array로 넘겨야 하며 ['HH:00:ss', 'HH:59:00'] 로 사용 가능 <br> 숫자로 넘기면 disabled 적용  |  |
+| shortcuts | Array | [] | shortcut 버튼을 이용한 사용자 정의 객체 Array <br> {<br> label: '어제', <br> value: 'yesterday',<br> shortcutDate: () => {} } <br> shortcutDate 함수의 반환값 타입은 Date(단일캘린더), Array(다중캘린더) 이며 Array 타입인 경우 배열 내에 Date 객체 형식  함 <br> DateMulti 모드 제외 |  |

docs/views/datePicker/example/Default.vue

@@ -5,19 +5,6 @@
       v-model="date1"
       placeholder="Select a date."
       clearable
-      :shortcuts="[{
-          label: 'Yesterday',
-          value: 'yesterday',
-          shortcutDate: () => {
-            return new Date().setDate(new Date().getDate() - 1);
-          }
-        }, {
-          label: 'Today',
-          value: 'today',
-          shortcutDate: () => {
-            return new Date();
-          }
-        }]"
     />
     <ev-date-picker
       v-model="date1"
@@ -47,6 +34,32 @@
       {{ dateTime1 }}
     </div>
   </div>
+  <div class="case">
+    <p class="case-title">Calendar dateTime mode(shortcuts)</p>
+    <ev-date-picker
+        v-model="dateTime2"
+        mode="dateTime"
+        clearable
+        :options="{
+          timeFormat: 'HH:00:ss'
+        }"
+        :shortcuts="[{
+          label: 'Yesterday',
+          value: 'yesterday',
+          shortcutDate: () => new Date(new Date().setDate(new Date().getDate() - 1))
+        }, {
+          label: 'Today',
+          value: 'today',
+          shortcutDate: () => new Date()
+        }]"
+    />
+    <div class="description">
+      <span class="badge">
+        Value
+      </span>
+      {{ dateTime2 }}
+    </div>
+  </div>
   <div class="case">
     <p class="case-title">Calendar dateMulti mode(multiType: date, multiDayLimit: 3)</p>
     <ev-date-picker
@@ -145,51 +158,7 @@
         :options="{
           timeFormat: ['HH:00:ss', 'HH:59:ss']
         }"
-        :shortcuts="[{
-          label: 'LastMonth',
-          value: 'lastMonth',
-          shortcutDate: () => {
-            return [
-                new Date().setDate(new Date().getDate() - 30),
-                new Date(),
-            ]
-          }
-        },{
-          label: 'LastWeek',
-          value: 'lastWeek',
-          shortcutDate: () => {
-            return [
-                new Date().setDate(new Date().getDate() - 6),
-                new Date(),
-            ]
-          }
-        },{
-          label: 'Weekday',
-          value: 'weekday',
-          shortcutDate: () => {
-            return [
-                new Date(
-                    new Date().getFullYear(),
-                    new Date().getMonth(),
-                    new Date().getDate() - new Date().getDay() + 1
-                ),
-                new Date(
-                    new Date().getFullYear(),
-                    new Date().getMonth(),
-                    new Date().getDate() + (5 - new Date().getDay())
-                ),
-            ];
-          }
-        }, {
-          label: 'Today',
-          value: 'today',
-          shortcutDate: () => {
-            return [
-                new Date(),
-                new Date(),
-            ]
-          }
-        }]"
+        :shortcuts="dateTimeRange2Shortcut"
     />
     <div class="description">
       <span class="badge">
@@ -202,27 +171,70 @@
 
 <script>
 import { ref } from 'vue';
+import { cloneDeep } from 'lodash-es';
 
 export default {
   setup() {
     const date1 = ref('2020-09-01');
     const dateTime1 = ref('2020-10-15 13:09:10');
+    const dateTime2 = ref('2021-11-22 13:09:10');
     const dateMulti1 = ref([]);
     const dateMulti2 = ref([]);
     const dateMulti3 = ref([]);
     const dateRange1 = ref([]);
     const dateTimeRange1 = ref([]);
     const dateTimeRange2 = ref(['2021-11-10 16:01:01', '2021-12-10 17:10:15']);
 
+    const currentDate = new Date();
+    currentDate.setHours(0);
+    currentDate.setMinutes(0);
+    currentDate.setSeconds(0);
+
+    const dateTimeRange2Shortcut = [
+        {
+          label: 'LastMonth',
+          value: 'lastMonth',
+          shortcutDate: () => [
+            new Date(cloneDeep(currentDate).setDate(currentDate.getDate() - 30)),
+            currentDate,
+          ],
+      },
+      {
+        label: 'LastWeek',
+        value: 'lastWeek',
+        shortcutDate: () => [
+          new Date(cloneDeep(currentDate).setDate(currentDate.getDate() - 6)),
+          currentDate,
+        ],
+      },
+      {
+        label: 'Weekday',
+        value: 'weekday',
+        shortcutDate: () => [
+          new Date(cloneDeep(currentDate)
+              .setDate(currentDate.getDate() - currentDate.getDay() + 1)),
+          new Date(cloneDeep(currentDate)
+              .setDate(currentDate.getDate() + (5 - currentDate.getDay()))),
+        ],
+      },
+      {
+        label: 'Today',
+        value: 'today',
+        shortcutDate: () => [currentDate, currentDate],
+      },
+    ];
+
     return {
       date1,
       dateTime1,
+      dateTime2,
       dateMulti1,
       dateMulti2,
       dateMulti3,
       dateRange1,
       dateTimeRange1,
       dateTimeRange2,
+      dateTimeRange2Shortcut,
     };
   },
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.1.42",
+  "version": "3.1.43",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",

src/components/datePicker/DatePicker.vue

@@ -23,7 +23,10 @@
       />
     </template>
     <template v-else>
-      <div class="ev-date-picker-tag-wrapper">
+      <div
+          class="ev-date-picker-tag-wrapper"
+          @click="clickSelectInput"
+      >
         <span class="ev-date-picker-prefix-icon">
           <i class="ev-icon-calendar" />
         </span>
@@ -33,7 +36,6 @@
           readonly
           :placeholder="$props.placeholder"
           :disabled="$props.disabled"
-          @click="clickSelectInput"
         />
         <template
           v-if="$props.mode === 'dateMulti'
@@ -196,6 +198,19 @@ export default {
     shortcuts: {
       type: Array,
       default: () => [],
+      validator: (value) => {
+        if (!value.length) {
+          return true;
+        }
+        return value.every(({ shortcutDate }) => {
+          if (typeof shortcutDate !== 'function') {
+            return false;
+          }
+          const date = shortcutDate();
+          return (Array.isArray(date) && date.every(d => d instanceof Date) && date[0] <= date[1])
+              || (typeof date === 'object' && date instanceof Date);
+        });
+      },
     },
   },
   emits: {
@@ -355,6 +370,7 @@ export default {
 
   &.num {
     padding-right: 8px;
+    cursor: pointer;
   }
 
   .ev-tag-suffix {

src/components/datePicker/uses.js

@@ -279,22 +279,6 @@ export const useShortcuts = (param) => {
     return `${formatDate(dateTimeValue)} ${lpadToTwoDigits(hour)}:${lpadToTwoDigits(min)}:${lpadToTwoDigits(sec)}`;
   };
 
-  /**
-   * 시, 분, 초를 원하는 값으로 변환
-   * @param targetDate
-   * @param hour
-   * @param min
-   * @param sec
-   * @returns {Date}
-   */
-  const getChangedDateTime = (targetDate, hour, min, sec) => {
-    const dateTimeValue = new Date(targetDate);
-    dateTimeValue.setHours(hour);
-    dateTimeValue.setMinutes(min);
-    dateTimeValue.setSeconds(sec);
-    return dateTimeValue;
-  };
-
   /**
    * 초기 shortcut 세팅
    * 해당하는 날짜면 active
@@ -353,13 +337,11 @@ export const useShortcuts = (param) => {
     if (isRange) {
       const [fromDate, toDate] = shortcutDate();
       if (props.mode === 'dateTimeRange') {
-        const from = getChangedDateTime(fromDate, 0, 0, 0);
-        const to = getChangedDateTime(toDate, 0, 0, 0);
         const [fromTimeFormat, toTimeFormat] = props.options?.timeFormat;
 
         mv.value = [
-          getChangedValueByTimeFormat(fromTimeFormat, formatDateTime(from)),
-          getChangedValueByTimeFormat(toTimeFormat, formatDateTime(to)),
+          getChangedValueByTimeFormat(fromTimeFormat, formatDateTime(fromDate)),
+          getChangedValueByTimeFormat(toTimeFormat, formatDateTime(toDate)),
         ];
       } else {
         mv.value = [formatDate(fromDate), formatDate(toDate)];
@@ -369,7 +351,7 @@ export const useShortcuts = (param) => {
       mv.value = props.mode === 'dateTime'
           ? getChangedValueByTimeFormat(
               props.options?.timeFormat,
-              formatDateTime(getChangedDateTime(sDate, 0, 0, 0)))
+              formatDateTime(sDate))
           : formatDate(sDate);
     }