[#1350] DatePicker > dateRange, dateTimeRange 모드 > 사용자 입력 가능 옵션 추가

docs/views/calendar/example/Default.vue

@@ -133,7 +133,7 @@ export default {
     const calendar2 = ref('2020-09-15');
     const calendar3 = ref(null);
     const calendar4 = ref('2020-10-14 14:38:01');
-    const calendar5 = ref(['2020-10-21', '2020-11-01']);
+    const calendar5 = ref(['2020-10-21', '2020-11-02']);
     const calendar6 = ref([]);
     const calendar7 = ref([]);
     const calendar8 = ref(['2020-10-21', '2020-11-05']);

docs/views/datePicker/api/datePicker.md

@@ -17,6 +17,7 @@
 | v-model | String, Array | '' | 컴포넌트 입력 값, String 타입인 경우는 'YYYY-MM-DD' 또는 'YYYY-MM-DD HH:MI:SS'의 형태로 작성해야하며, Array 타입인 경우는 배열 내에 'YYYY-MM-DD' 형식에 맞는 String 값을 넣어야한다.  | |
 | placeholder | String | '' | 인풋박스의 placeholder |  |
 | disabled | Boolean | false | <데이트피커> 사용여부 |  |
+| enableTextInput | Boolean | false | <데이트피커> 텍스트 입력 활성화  |  |
 | clearable | Boolean | false | <데이트피커> 내 선택된 항목을 모두 clear할 수 있는 아이콘 사용 여부 |  |
 | mode | String | 'date' | 캘린더 모드 | 'date', 'dateTime', 'dateMulti', 'dateRange', 'dateTimeRange' |
 |  |  | date(default) | 메인 캘린더에서 날짜를 선택(사용자가 인풋에 직접 입력 가능) | 'YYYY-MM-DD' |

docs/views/datePicker/example/Default.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="case">
-    <p class="case-title">Calendar date mode</p>
+    <p class="case-title">Calendar date mode (enable text input)</p>
     <ev-date-picker
       v-model="date1"
+      :enable-text-input="true"
       placeholder="Select a date."
       clearable
     />
@@ -37,13 +38,14 @@
   <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="dateTime2Shortcut"
+      v-model="dateTime2"
+      mode="dateTime"
+      clearable
+      :enable-text-input="true"
+      :options="{
+        timeFormat: 'HH:00:ss'
+      }"
+      :shortcuts="dateTime2Shortcut"
     />
     <div class="description">
       <span class="badge">
@@ -113,8 +115,23 @@
       {{ dateMulti3 }}
     </div>
   </div>
+  <div class="case ev-date-picker__date-range">
+    <p class="case-title">Calendar dateRange mode (enable text input)</p>
+    <ev-date-picker
+        v-model="dateRange2"
+        mode="dateRange"
+        :enable-text-input="true"
+        clearable
+    />
+    <div class="description">
+      <span class="badge">
+        Value
+      </span>
+      {{ dateRange2 }}
+    </div>
+  </div>
   <div class="case">
-    <p class="case-title">Calendar dateRange mode</p>
+    <p class="case-title">Calendar dateRange mode (shortcut)</p>
     <ev-date-picker
       v-model="dateRange1"
       mode="dateRange"
@@ -147,7 +164,6 @@
     <ev-date-picker
         v-model="dateTimeRange2"
         mode="dateTimeRange"
-        clearable
         :options="{
           timeFormat: ['HH:mm:00', 'HH:mm:00'],
           disabledDate: disabledDateTime,
@@ -160,6 +176,21 @@
       </span>
       {{ dateTimeRange2 }}
     </div>
+    <div class="case ev-date-picker__date-time-range">
+      <p class="case-title">Calendar dateTimeRange mode (enable text input)</p>
+      <ev-date-picker
+          v-model="dateTimeRange3"
+          mode="dateTimeRange"
+          :enable-text-input="true"
+          clearable
+      />
+      <div class="description">
+      <span class="badge">
+        Value
+      </span>
+        {{ dateTimeRange3 }}
+      </div>
+    </div>
   </div>
 </template>
 
@@ -176,8 +207,10 @@ export default {
     const dateMulti2 = ref([]);
     const dateMulti3 = ref([]);
     const dateRange1 = ref([]);
+    const dateRange2 = ref(['2023-02-12', '2023-02-13']);
     const dateTimeRange1 = ref([]);
     const dateTimeRange2 = ref(['2022-06-07 16:01:01', '2022-06-08 17:10:15']);
+    const dateTimeRange3 = ref(['2023-02-14 10:00:00', '2023-02-14 11:00:00']);
 
     const TODAY_0_O_CLOCK_DATE = new Date(dayjs()
         .format('YYYY-MM-DD 00:00:00'));
@@ -244,11 +277,28 @@ export default {
       dateMulti2,
       dateMulti3,
       dateRange1,
+      dateRange2,
       dateTimeRange1,
       dateTimeRange2,
       dateTimeRange2Shortcut,
+      dateTimeRange3,
       disabledDateTime,
     };
   },
 };
 </script>
+<style lang="scss">
+.ev-date-picker__date-range {
+  .ev-date-picker-range-input {
+    width: 100px;
+    flex: none;
+  }
+}
+.ev-date-picker__date-time-range {
+  .ev-date-picker-range-input {
+    width: 155px;
+    flex: none;
+    text-align: center;
+  }
+}
+</style>

src/components/calendar/Calendar.vue

@@ -10,10 +10,7 @@
         <span class="ev-calendar-year">{{ mainCalendarPageInfo.year }}</span>
         <span class="ev-calendar-month">{{ mainCalendarMonth }}</span>
         <div
-          :class="[
-            'move-month-arrow',
-            { disabled: isContinuousMonths }
-          ]"
+          class="move-month-arrow"
           @click="clickPrevNextBtn('main', 'next')">
           <i class="ev-icon-s-arrow-right move-month-arrow-icon"
           />
@@ -138,10 +135,7 @@
     >
       <div class="ev-calendar-header">
         <div
-            :class="[
-              'move-month-arrow',
-              { disabled: isContinuousMonths }
-            ]"
+            class="move-month-arrow"
             @click="clickPrevNextBtn('expanded', 'prev')"
         >
           <i class="ev-icon-s-arrow-left move-month-arrow-icon"/>
@@ -338,7 +332,6 @@ export default {
       mainCalendarMonth,
       expandedCalendarMonth,
       dayOfTheWeekList,
-      isContinuousMonths,
     } = useModel();
 
     const {
@@ -391,7 +384,6 @@ export default {
       mainCalendarMonth,
       expandedCalendarMonth,
       dayOfTheWeekList,
-      isContinuousMonths,
 
       mainCalendarTableInfo,
       expandedCalendarTableInfo,