quasar-ui-sellmate-ui-kit 2.2.33 → 2.3.1

package/src/components/SDate.vue

@@ -1,717 +1,717 @@
-<template>
-  <q-input
-    class="s-date q-pa-none bg-white"
-    :class="{ 'has-label': insideLabel, range: isRange }"
-    dense
-    outlined
-    readonly
-    :disable="isDisable"
-    ref="wrapperInputRef"
-    no-error-icon
-  >
-    <template v-slot:before v-if="insideLabel">
-      <div class="date-picker-label">
-        {{ insideLabel }}
-      </div>
-    </template>
-
-    <template #default>
-      <div class="flex no-wrap items-center" style="flex-grow: 1; justify-content: center">
-        <template v-if="isRange">
-          <q-input
-            class="inner-input"
-            v-model="dateModel.from"
-            dense
-            borderless
-            mask="####-##-##"
-            autocomplete="off"
-            @click="menuModel.from = true"
-            @keyup.enter="settingFromDate()"
-          >
-            <template #prepend>
-              <q-icon
-                :name="dateRangeIcon"
-                size="20px"
-                color="Grey_Darken-1"
-                class="cursor-pointer"
-                @click="fromMenuRef[menuModel.from ? 'hide' : 'show']()"
-              />
-            </template>
-
-            <template #default>
-              <q-menu
-                v-model="menuModel.from"
-                ref="fromMenuRef"
-                class="s-date-menu"
-                no-focus
-                no-refocus
-                :offset="[0, 6]"
-                no-parent-event
-                @hide="settingFromDate()"
-              >
-                <div class="reset-btn-area flex justify-end">
-                  <q-btn
-                    class="reset-btn no-hover"
-                    flat
-                    :label="lang ? locale[lang].today : '오늘'"
-                    text-color="Grey_Darken-4"
-                    :ripple="false"
-                    @click="resetDate('from')"
-                  />
-                </div>
-                <q-date
-                  v-model="dateModel.from"
-                  minimal
-                  square
-                  noUnset
-                  flat
-                  color="positive"
-                  class="q-pa-none"
-                  mask="YYYY-MM-DD"
-                  :locale="lang ? locale[lang] : {}"
-                  :options="optionsStartFn"
-                  @update:modelValue="menuModel.from = false"
-                >
-                </q-date>
-              </q-menu>
-            </template>
-          </q-input>
-          <span class="q-mx-sm text-Grey_Darken-4">~</span>
-          <q-input
-            v-model="dateModel.to"
-            dense
-            borderless
-            mask="####-##-##"
-            autocomplete="off"
-            class="inner-input"
-            @click="menuModel.to = true"
-            @keyup.enter="settingToDate()"
-          >
-            <template #prepend>
-              <q-icon
-                :name="dateRangeIcon"
-                size="20px"
-                color="Grey_Darken-1"
-                class="cursor-pointer"
-                @click="toMenuRef[menuModel.to ? 'hide' : 'show']()"
-              />
-            </template>
-
-            <template #default>
-              <q-menu
-                v-model="menuModel.to"
-                ref="toMenuRef"
-                class="s-date-menu"
-                no-focus
-                no-refocus
-                :offset="[0, 6]"
-                no-parent-event
-                @hide="settingToDate()"
-              >
-                <div class="reset-btn-area flex justify-end">
-                  <q-btn
-                    class="reset-btn no-hover"
-                    flat
-                    :label="lang ? locale[lang].today : '오늘'"
-                    text-color="Grey_Darken-4"
-                    :ripple="false"
-                    @click="resetDate('to')"
-                  />
-                </div>
-                <q-date
-                  v-model="dateModel.to"
-                  minimal
-                  square
-                  noUnset
-                  flat
-                  color="positive"
-                  class="q-pa-none"
-                  mask="YYYY-MM-DD"
-                  :locale="lang ? locale[lang] : {}"
-                  :options="optionsEndFn"
-                  @update:modelValue="menuModel.to = false"
-                />
-              </q-menu>
-            </template>
-          </q-input>
-        </template>
-        <template v-else>
-          <q-input
-            class="inner-input"
-            v-model="dateModel"
-            dense
-            borderless
-            mask="####-##-##"
-            autocomplete="off"
-            @click="menuModel.single = true"
-            @keyup.enter="menuModel.single = false"
-          >
-            <template #prepend>
-              <q-icon
-                :name="dateRangeIcon"
-                size="20px"
-                color="Grey_Darken-1"
-                class="cursor-pointer"
-                @click="singleMenuRef[menuModel.single ? 'hide' : 'show']()"
-              />
-            </template>
-
-            <template #default>
-              <q-menu
-                v-model="menuModel.single"
-                ref="singleMenuRef"
-                class="s-date-menu"
-                no-focus
-                no-refocus
-                :offset="[0, 6]"
-                no-parent-event
-                @hide="triggerValidation"
-              >
-                <div class="reset-btn-area flex justify-end">
-                  <q-btn
-                    class="reset-btn no-hover"
-                    flat
-                    :label="lang ? locale[lang].today : '오늘'"
-                    text-color="Grey_Darken-4"
-                    :ripple="false"
-                    @click="resetDate()"
-                  />
-                </div>
-                <q-date
-                  v-model="dateModel"
-                  minimal
-                  square
-                  noUnset
-                  flat
-                  color="positive"
-                  class="q-pa-none"
-                  mask="YYYY-MM-DD"
-                  :locale="lang ? locale[lang] : {}"
-                  :options="optionsFn"
-                  @update:modelValue="menuModel.single = false"
-                >
-                </q-date>
-              </q-menu>
-            </template>
-          </q-input>
-        </template>
-      </div>
-    </template>
-    <template v-if="useDelete" v-slot:append>
-      <q-icon :name="closeIcon" size="16px" class="cursor-pointer" @click="deleteDate" />
-    </template>
-  </q-input>
-</template>
-
-<script>
-  import { ref } from 'vue';
-  import { QIcon, QInput, QDate, QMenu, QBtn, date } from 'quasar';
-  import { dateRangeIcon, closeIcon } from '../assets/icons';
-  import { useModelBinder } from '../composables/modelBinder';
-
-  const locale = {
-    ko: {
-      today: '오늘',
-      daysShort: ['일', '월', '화', '수', '목', '금', '토'],
-      months: [
-        '1월',
-        '2월',
-        '3월',
-        '4월',
-        '5월',
-        '6월',
-        '7월',
-        '8월',
-        '9월',
-        '10월',
-        '11월',
-        '12월',
-      ],
-      monthsShort: [
-        '1월',
-        '2월',
-        '3월',
-        '4월',
-        '5월',
-        '6월',
-        '7월',
-        '8월',
-        '9월',
-        '10월',
-        '11월',
-        '12월',
-      ],
-    },
-    ja: {
-      today: '今日',
-      daysShort: ['日', '月', '火', '水', '木', '金', '土'],
-      months: [
-        '1月',
-        '2月',
-        '3月',
-        '4月',
-        '5月',
-        '6月',
-        '7月',
-        '8月',
-        '9月',
-        '10月',
-        '11月',
-        '12月',
-      ],
-      monthsShort: [
-        '1月',
-        '2月',
-        '3月',
-        '4月',
-        '5月',
-        '6月',
-        '7月',
-        '8月',
-        '9月',
-        '10月',
-        '11月',
-        '12月',
-      ],
-    },
-  };
-
-  export default {
-    name: 'SDate',
-    components: {
-      QDate,
-      QIcon,
-      QInput,
-      QMenu,
-      QBtn,
-    },
-
-    props: {
-      modelValue: {
-        type: [String, Object],
-      },
-      isRange: {
-        type: Boolean,
-        default: false,
-      },
-      isDisable: {
-        type: Boolean,
-        default: false,
-      },
-      insideLabel: {
-        type: String,
-      },
-      lang: {
-        type: String,
-        default: 'ko',
-      },
-      useDelete: {
-        type: Boolean,
-        default: false,
-      },
-      noLimit: {
-        type: Boolean,
-        default: false,
-      },
-      dateRangeLimit: { type: [Number, Object], default: 1 },
-      minMaxDate: {
-        type: Object,
-        default: () => ({ minDate: '', maxDate: '' }),
-      },
-    },
-
-    setup(props, { emit }) {
-      const dateModel = useModelBinder(props);
-      const fromMenuRef = ref(null);
-      const toMenuRef = ref(null);
-      const wrapperInputRef = ref(null);
-      const menuModel = ref({
-          single: false,
-          from: false,
-          to: false,
-        });
-
-      function resetDate(key) {
-        const todayDate = date.formatDate(new Date(), 'YYYY-MM-DD');
-
-        if (!props.isRange) {
-          dateModel.value = todayDate;
-          return;
-        }
-
-        const durationBeforeToday = date.formatDate(
-          date.subtractFromDate(new Date(), { month: props.dateRangeLimit }),
-          'YYYY-MM-DD',
-        );
-
-        if (props.noLimit && !!props.dateRangeLimit) {
-          if (typeof dateModel.value !== 'object' || !dateModel.value.from) {
-            dateModel.value = { from: durationBeforeToday, to: todayDate };
-            return;
-          }
-
-          if (key === 'from') {
-            dateModel.value.from = todayDate;
-            dateModel.value.to = todayDate; // from이 리셋되면 to도 오늘 날짜로 설정
-            return;
-          }
-
-          const fromDate = new Date(dateModel.value.from);
-          const toDate = new Date(todayDate);
-          const monthDifference = toDate.getMonth()
-            - fromDate.getMonth()
-            + 12 * (toDate.getFullYear() - fromDate.getFullYear());
-
-          if (monthDifference >= props.dateRangeLimit) {
-            dateModel.value.from = date.formatDate(
-              date.subtractFromDate(toDate, { month: props.dateRangeLimit }),
-              'YYYY-MM-DD',
-            );
-          }
-          dateModel.value.to = todayDate;
-        }
-
-        dateModel.value[key] = todayDate;
-        if (key === 'from') {
-          dateModel.value.to = todayDate; // from이 리셋되면 to도 오늘 날짜로 설정
-        }
-
-        fromMenuRef.value.hide();
-        toMenuRef.value.hide();
-      }
-
-      function optionsFn(day) {
-        if (props.noLimit) return true;
-
-        const minDate = props.minMaxDate.minDate
-          && date.formatDate(new Date(props.minMaxDate.minDate), 'YYYY/MM/DD');
-        const maxDate = props.minMaxDate.maxDate
-          && date.formatDate(new Date(props.minMaxDate.maxDate), 'YYYY/MM/DD');
-
-        if (minDate && maxDate) {
-          return minDate <= day && day <= maxDate;
-        }
-
-        if (minDate) {
-          return minDate <= day;
-        }
-
-        if (maxDate) {
-          return day <= maxDate;
-        }
-
-        return true;
-      }
-
-      function optionsStartFn(day) {
-        if (props.noLimit) {
-          return true;
-        }
-
-        const dayTo = date.formatDate(dateModel.value.to, 'YYYY/MM/DD');
-        let maxFromDate = dayTo
-          ? date.formatDate(
-              date.subtractFromDate(
-                new Date(dateModel.value.to),
-                typeof props.dateRangeLimit === 'number'
-                  ? { month: props.dateRangeLimit }
-                  : props.dateRangeLimit,
-              ),
-              'YYYY/MM/DD',
-            )
-          : null;
-
-        if (props.minMaxDate.minDate) {
-          maxFromDate = maxFromDate
-            ? date.formatDate(
-                new Date(Math.max(new Date(maxFromDate), new Date(props.minMaxDate.minDate))),
-                'YYYY/MM/DD',
-              )
-            : date.formatDate(new Date(props.minMaxDate.minDate), 'YYYY/MM/DD');
-        }
-
-        if (maxFromDate && dayTo) {
-          return maxFromDate <= day && day <= dayTo;
-        }
-
-        if (maxFromDate) {
-          return maxFromDate <= day;
-        }
-
-        if (dayTo) {
-          return day <= dayTo;
-        }
-
-        return true;
-      }
-
-      function optionsEndFn(day) {
-        const dayFrom = date.formatDate(dateModel.value.from, 'YYYY/MM/DD');
-
-        let maxToDate = dayFrom
-          ? date.formatDate(
-              date.addToDate(
-                new Date(dateModel.value.from),
-                typeof props.dateRangeLimit === 'number'
-                  ? { month: props.dateRangeLimit }
-                  : props.dateRangeLimit,
-              ),
-              'YYYY/MM/DD',
-            )
-          : null;
-
-        if (props.minMaxDate.maxDate) {
-          maxToDate = maxToDate
-            ? date.formatDate(
-                new Date(Math.min(new Date(maxToDate), new Date(props.minMaxDate.maxDate))),
-                'YYYY/MM/DD',
-              )
-            : date.formatDate(new Date(props.minMaxDate.maxDate), 'YYYY/MM/DD');
-        }
-
-        if (dayFrom && maxToDate) {
-          return dayFrom <= day && day <= maxToDate;
-        }
-
-        if (dayFrom) {
-          return dayFrom <= day;
-        }
-
-        if (maxToDate) {
-          return day <= maxToDate;
-        }
-
-        return true;
-      }
-
-      function triggerValidation() {
-        if (wrapperInputRef.value) wrapperInputRef.value.validate();
-      }
-
-      function settingFromDate() {
-        menuModel.value.from = false;
-        triggerValidation();
-
-        if (props.noLimit && !!props.dateRangeLimit) {
-          const fromDate = new Date(dateModel.value.from);
-          const monthsLater = new Date(fromDate).setMonth(
-            fromDate.getMonth() + props.dateRangeLimit,
-          );
-          const maxToDate = date.formatDate(monthsLater, 'YYYY-MM-DD'); // 최대개월 후 또는 오늘 중 더 이른 날짜
-          const toDate = new Date(dateModel.value.to);
-          if (toDate.getTime() > monthsLater || fromDate > toDate) {
-            // 선택된 'to' 날짜가 최대개월을 초과하는 경우
-            dateModel.value.to = maxToDate;
-          }
-        }
-      }
-
-      function settingToDate() {
-        menuModel.value.to = false;
-        triggerValidation();
-
-        // FIXME: 종료 일자는 보통 시작 일자에 의해 제한 되기 때문에
-        // 종료 일자가 시작 일자를 제한하는 경우는 없을 것으로 보임, 추후 확인 후 삭제
-        if (props.noLimit && !!props.dateRangeLimit) {
-          const toDate = new Date(dateModel.value.to);
-          const fromDate = new Date(dateModel.value.from);
-          const monthsBefore = new Date(toDate).setMonth(toDate.getMonth() - props.dateRangeLimit);
-          const minFromDate = date.formatDate(monthsBefore, 'YYYY-MM-DD'); // 'to' 날짜로부터 최대개월 이전
-          if (fromDate.getTime() < monthsBefore) {
-            // 선택된 'from' 날짜가 'to' 날짜로부터 최대개월을 미만인 경우
-            dateModel.value.from = minFromDate;
-          }
-        }
-      }
-
-      function deleteDate() {
-        if (!props.isRange) {
-          dateModel.value = '';
-          emit('update:modelValue', dateModel.value);
-          return;
-        }
-
-        dateModel.value.from = '';
-        dateModel.value.to = '';
-        emit('update:modelValue', dateModel.value);
-      }
-
-      return {
-        locale,
-        menuModel,
-        dateModel,
-        singleMenuRef: ref(null),
-        fromMenuRef,
-        toMenuRef,
-        wrapperInputRef,
-        dateRangeIcon,
-        closeIcon,
-
-        resetDate,
-        optionsFn,
-        optionsStartFn,
-        optionsEndFn,
-        settingFromDate,
-        settingToDate,
-        deleteDate,
-        triggerValidation,
-      };
-    },
-  };
-</script>
-
-<style lang="scss">
-  @import '../css/quasar.variables.scss';
-
-  .s-date {
-    width: fit-content;
-    height: $default-height;
-    border-radius: 4px;
-
-    &.has-label {
-      .q-field__inner {
-        .q-field__control {
-          border-radius: 0 2px 2px 0 !important;
-        }
-      }
-
-      .q-field__before {
-        height: 100%;
-        padding: 4px 12px !important;
-        border: 1px solid $Grey_Lighten-1;
-        border-right: none;
-        border-radius: 2px 0 0 2px;
-        background: $Grey_Lighten-5;
-
-        .date-picker-label {
-          font-size: $default-font;
-          font-weight: $default-font-weight;
-          color: $Grey_Darken-4;
-        }
-      }
-    }
-
-    &.q-field--disabled {
-      .q-field__before {
-        border: 1px solid $Grey_Lighten-2;
-        border-right: none;
-      }
-
-      .q-field__inner {
-        .q-field__control {
-          &:after {
-            border: 1px solid $Grey_Lighten-2;
-          }
-        }
-      }
-    }
-
-    &.q-field--error {
-      .q-field__control {
-        &::after {
-          border-color: red !important;
-        }
-      }
-
-      &.q-field--highlighted {
-        .q-field__control {
-          &:after {
-            box-shadow: 0 0 2px red;
-          }
-        }
-      }
-    }
-
-    .q-field__bottom {
-      display: none;
-    }
-
-    .q-field__inner {
-      font-size: 12px;
-      text-align: center;
-
-      .q-field__control {
-        padding: 4px 16px 4px 8px !important;
-        height: 100%;
-
-        &:after {
-          border: 1px solid $Grey_Lighten-1;
-          box-shadow: none;
-        }
-
-        .q-field__prepend {
-          height: 20px;
-        }
-
-        .q-field__append {
-          height: 20px;
-
-          .q-icon {
-            margin-right: -8px;
-          }
-        }
-
-        &-container {
-          > input {
-            display: none;
-          }
-
-          .inner-input {
-            width: 100%;
-
-            // flex-grow: 1;
-            > .q-field__inner {
-              > .q-field__control {
-                width: 100%;
-                min-width: 72px;
-                height: 20px;
-                padding: 0px !important;
-
-                &::before,
-                &::after {
-                  border: none;
-                }
-
-                .q-field__control-container {
-                  justify-content: center;
-
-                  input {
-                    width: 72px;
-                    display: block;
-                    text-align: center;
-                  }
-                }
-
-                &:after {
-                  box-shadow: none !important;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .s-date-menu {
-    .reset-btn-area {
-      padding: 20px 24px 0px;
-
-      .reset-btn {
-        width: 28px;
-        height: 22px;
-        min-height: 22px;
-        padding: 0;
-        text-decoration: underline;
-        font-weight: 400;
-
-        &:hover {
-          .q-btn__content {
-            text-decoration: underline;
-            color: $positive;
-          }
-        }
-      }
-    }
-  }
-</style>
+<template>
+  <q-input
+    class="s-date q-pa-none bg-white"
+    :class="{ 'has-label': insideLabel, range: isRange }"
+    dense
+    outlined
+    readonly
+    :disable="isDisable"
+    ref="wrapperInputRef"
+    no-error-icon
+  >
+    <template v-slot:before v-if="insideLabel">
+      <div class="date-picker-label">
+        {{ insideLabel }}
+      </div>
+    </template>
+
+    <template #default>
+      <div class="flex no-wrap items-center" style="flex-grow: 1; justify-content: center">
+        <template v-if="isRange">
+          <q-input
+            class="inner-input"
+            v-model="dateModel.from"
+            dense
+            borderless
+            mask="####-##-##"
+            autocomplete="off"
+            @click="menuModel.from = true"
+            @keyup.enter="settingFromDate()"
+          >
+            <template #prepend>
+              <q-icon
+                :name="dateRangeIcon"
+                size="20px"
+                color="Grey_Darken-1"
+                class="cursor-pointer"
+                @click="fromMenuRef[menuModel.from ? 'hide' : 'show']()"
+              />
+            </template>
+
+            <template #default>
+              <q-menu
+                v-model="menuModel.from"
+                ref="fromMenuRef"
+                class="s-date-menu"
+                no-focus
+                no-refocus
+                :offset="[0, 6]"
+                no-parent-event
+                @hide="settingFromDate()"
+              >
+                <div class="reset-btn-area flex justify-end">
+                  <q-btn
+                    class="reset-btn no-hover"
+                    flat
+                    :label="lang ? locale[lang].today : '오늘'"
+                    text-color="Grey_Darken-4"
+                    :ripple="false"
+                    @click="resetDate('from')"
+                  />
+                </div>
+                <q-date
+                  v-model="dateModel.from"
+                  minimal
+                  square
+                  noUnset
+                  flat
+                  color="positive"
+                  class="q-pa-none"
+                  mask="YYYY-MM-DD"
+                  :locale="lang ? locale[lang] : {}"
+                  :options="optionsStartFn"
+                  @update:modelValue="menuModel.from = false"
+                >
+                </q-date>
+              </q-menu>
+            </template>
+          </q-input>
+          <span class="q-mx-sm text-Grey_Darken-4">~</span>
+          <q-input
+            v-model="dateModel.to"
+            dense
+            borderless
+            mask="####-##-##"
+            autocomplete="off"
+            class="inner-input"
+            @click="menuModel.to = true"
+            @keyup.enter="settingToDate()"
+          >
+            <template #prepend>
+              <q-icon
+                :name="dateRangeIcon"
+                size="20px"
+                color="Grey_Darken-1"
+                class="cursor-pointer"
+                @click="toMenuRef[menuModel.to ? 'hide' : 'show']()"
+              />
+            </template>
+
+            <template #default>
+              <q-menu
+                v-model="menuModel.to"
+                ref="toMenuRef"
+                class="s-date-menu"
+                no-focus
+                no-refocus
+                :offset="[0, 6]"
+                no-parent-event
+                @hide="settingToDate()"
+              >
+                <div class="reset-btn-area flex justify-end">
+                  <q-btn
+                    class="reset-btn no-hover"
+                    flat
+                    :label="lang ? locale[lang].today : '오늘'"
+                    text-color="Grey_Darken-4"
+                    :ripple="false"
+                    @click="resetDate('to')"
+                  />
+                </div>
+                <q-date
+                  v-model="dateModel.to"
+                  minimal
+                  square
+                  noUnset
+                  flat
+                  color="positive"
+                  class="q-pa-none"
+                  mask="YYYY-MM-DD"
+                  :locale="lang ? locale[lang] : {}"
+                  :options="optionsEndFn"
+                  @update:modelValue="menuModel.to = false"
+                />
+              </q-menu>
+            </template>
+          </q-input>
+        </template>
+        <template v-else>
+          <q-input
+            class="inner-input"
+            v-model="dateModel"
+            dense
+            borderless
+            mask="####-##-##"
+            autocomplete="off"
+            @click="menuModel.single = true"
+            @keyup.enter="menuModel.single = false"
+          >
+            <template #prepend>
+              <q-icon
+                :name="dateRangeIcon"
+                size="20px"
+                color="Grey_Darken-1"
+                class="cursor-pointer"
+                @click="singleMenuRef[menuModel.single ? 'hide' : 'show']()"
+              />
+            </template>
+
+            <template #default>
+              <q-menu
+                v-model="menuModel.single"
+                ref="singleMenuRef"
+                class="s-date-menu"
+                no-focus
+                no-refocus
+                :offset="[0, 6]"
+                no-parent-event
+                @hide="triggerValidation"
+              >
+                <div class="reset-btn-area flex justify-end">
+                  <q-btn
+                    class="reset-btn no-hover"
+                    flat
+                    :label="lang ? locale[lang].today : '오늘'"
+                    text-color="Grey_Darken-4"
+                    :ripple="false"
+                    @click="resetDate()"
+                  />
+                </div>
+                <q-date
+                  v-model="dateModel"
+                  minimal
+                  square
+                  noUnset
+                  flat
+                  color="positive"
+                  class="q-pa-none"
+                  mask="YYYY-MM-DD"
+                  :locale="lang ? locale[lang] : {}"
+                  :options="optionsFn"
+                  @update:modelValue="menuModel.single = false"
+                >
+                </q-date>
+              </q-menu>
+            </template>
+          </q-input>
+        </template>
+      </div>
+    </template>
+    <template v-if="useDelete" v-slot:append>
+      <q-icon :name="closeIcon" size="16px" class="cursor-pointer" @click="deleteDate" />
+    </template>
+  </q-input>
+</template>
+
+<script>
+  import { ref } from 'vue';
+  import { QIcon, QInput, QDate, QMenu, QBtn, date } from 'quasar';
+  import { dateRangeIcon, closeIcon } from '../assets/icons';
+  import { useModelBinder } from '../composables/modelBinder';
+
+  const locale = {
+    ko: {
+      today: '오늘',
+      daysShort: ['일', '월', '화', '수', '목', '금', '토'],
+      months: [
+        '1월',
+        '2월',
+        '3월',
+        '4월',
+        '5월',
+        '6월',
+        '7월',
+        '8월',
+        '9월',
+        '10월',
+        '11월',
+        '12월',
+      ],
+      monthsShort: [
+        '1월',
+        '2월',
+        '3월',
+        '4월',
+        '5월',
+        '6월',
+        '7월',
+        '8월',
+        '9월',
+        '10월',
+        '11월',
+        '12월',
+      ],
+    },
+    ja: {
+      today: '今日',
+      daysShort: ['日', '月', '火', '水', '木', '金', '土'],
+      months: [
+        '1月',
+        '2月',
+        '3月',
+        '4月',
+        '5月',
+        '6月',
+        '7月',
+        '8月',
+        '9月',
+        '10月',
+        '11月',
+        '12月',
+      ],
+      monthsShort: [
+        '1月',
+        '2月',
+        '3月',
+        '4月',
+        '5月',
+        '6月',
+        '7月',
+        '8月',
+        '9月',
+        '10月',
+        '11月',
+        '12月',
+      ],
+    },
+  };
+
+  export default {
+    name: 'SDate',
+    components: {
+      QDate,
+      QIcon,
+      QInput,
+      QMenu,
+      QBtn,
+    },
+
+    props: {
+      modelValue: {
+        type: [String, Object],
+      },
+      isRange: {
+        type: Boolean,
+        default: false,
+      },
+      isDisable: {
+        type: Boolean,
+        default: false,
+      },
+      insideLabel: {
+        type: String,
+      },
+      lang: {
+        type: String,
+        default: 'ko',
+      },
+      useDelete: {
+        type: Boolean,
+        default: false,
+      },
+      noLimit: {
+        type: Boolean,
+        default: false,
+      },
+      dateRangeLimit: { type: [Number, Object], default: 1 },
+      minMaxDate: {
+        type: Object,
+        default: () => ({ minDate: '', maxDate: '' }),
+      },
+    },
+
+    setup(props, { emit }) {
+      const dateModel = useModelBinder(props);
+      const fromMenuRef = ref(null);
+      const toMenuRef = ref(null);
+      const wrapperInputRef = ref(null);
+      const menuModel = ref({
+          single: false,
+          from: false,
+          to: false,
+        });
+
+      function resetDate(key) {
+        const todayDate = date.formatDate(new Date(), 'YYYY-MM-DD');
+
+        if (!props.isRange) {
+          dateModel.value = todayDate;
+          return;
+        }
+
+        const durationBeforeToday = date.formatDate(
+          date.subtractFromDate(new Date(), { month: props.dateRangeLimit }),
+          'YYYY-MM-DD',
+        );
+
+        if (props.noLimit && !!props.dateRangeLimit) {
+          if (typeof dateModel.value !== 'object' || !dateModel.value.from) {
+            dateModel.value = { from: durationBeforeToday, to: todayDate };
+            return;
+          }
+
+          if (key === 'from') {
+            dateModel.value.from = todayDate;
+            dateModel.value.to = todayDate; // from이 리셋되면 to도 오늘 날짜로 설정
+            return;
+          }
+
+          const fromDate = new Date(dateModel.value.from);
+          const toDate = new Date(todayDate);
+          const monthDifference = toDate.getMonth()
+            - fromDate.getMonth()
+            + 12 * (toDate.getFullYear() - fromDate.getFullYear());
+
+          if (monthDifference >= props.dateRangeLimit) {
+            dateModel.value.from = date.formatDate(
+              date.subtractFromDate(toDate, { month: props.dateRangeLimit }),
+              'YYYY-MM-DD',
+            );
+          }
+          dateModel.value.to = todayDate;
+        }
+
+        dateModel.value[key] = todayDate;
+        if (key === 'from') {
+          dateModel.value.to = todayDate; // from이 리셋되면 to도 오늘 날짜로 설정
+        }
+
+        fromMenuRef.value.hide();
+        toMenuRef.value.hide();
+      }
+
+      function optionsFn(day) {
+        if (props.noLimit) return true;
+
+        const minDate = props.minMaxDate.minDate
+          && date.formatDate(new Date(props.minMaxDate.minDate), 'YYYY/MM/DD');
+        const maxDate = props.minMaxDate.maxDate
+          && date.formatDate(new Date(props.minMaxDate.maxDate), 'YYYY/MM/DD');
+
+        if (minDate && maxDate) {
+          return minDate <= day && day <= maxDate;
+        }
+
+        if (minDate) {
+          return minDate <= day;
+        }
+
+        if (maxDate) {
+          return day <= maxDate;
+        }
+
+        return true;
+      }
+
+      function optionsStartFn(day) {
+        if (props.noLimit) {
+          return true;
+        }
+
+        const dayTo = date.formatDate(dateModel.value.to, 'YYYY/MM/DD');
+        let maxFromDate = dayTo
+          ? date.formatDate(
+              date.subtractFromDate(
+                new Date(dateModel.value.to),
+                typeof props.dateRangeLimit === 'number'
+                  ? { month: props.dateRangeLimit }
+                  : props.dateRangeLimit,
+              ),
+              'YYYY/MM/DD',
+            )
+          : null;
+
+        if (props.minMaxDate.minDate) {
+          maxFromDate = maxFromDate
+            ? date.formatDate(
+                new Date(Math.max(new Date(maxFromDate), new Date(props.minMaxDate.minDate))),
+                'YYYY/MM/DD',
+              )
+            : date.formatDate(new Date(props.minMaxDate.minDate), 'YYYY/MM/DD');
+        }
+
+        if (maxFromDate && dayTo) {
+          return maxFromDate <= day && day <= dayTo;
+        }
+
+        if (maxFromDate) {
+          return maxFromDate <= day;
+        }
+
+        if (dayTo) {
+          return day <= dayTo;
+        }
+
+        return true;
+      }
+
+      function optionsEndFn(day) {
+        const dayFrom = date.formatDate(dateModel.value.from, 'YYYY/MM/DD');
+
+        let maxToDate = dayFrom
+          ? date.formatDate(
+              date.addToDate(
+                new Date(dateModel.value.from),
+                typeof props.dateRangeLimit === 'number'
+                  ? { month: props.dateRangeLimit }
+                  : props.dateRangeLimit,
+              ),
+              'YYYY/MM/DD',
+            )
+          : null;
+
+        if (props.minMaxDate.maxDate) {
+          maxToDate = maxToDate
+            ? date.formatDate(
+                new Date(Math.min(new Date(maxToDate), new Date(props.minMaxDate.maxDate))),
+                'YYYY/MM/DD',
+              )
+            : date.formatDate(new Date(props.minMaxDate.maxDate), 'YYYY/MM/DD');
+        }
+
+        if (dayFrom && maxToDate) {
+          return dayFrom <= day && day <= maxToDate;
+        }
+
+        if (dayFrom) {
+          return dayFrom <= day;
+        }
+
+        if (maxToDate) {
+          return day <= maxToDate;
+        }
+
+        return true;
+      }
+
+      function triggerValidation() {
+        if (wrapperInputRef.value) wrapperInputRef.value.validate();
+      }
+
+      function settingFromDate() {
+        menuModel.value.from = false;
+        triggerValidation();
+
+        if (props.noLimit && !!props.dateRangeLimit) {
+          const fromDate = new Date(dateModel.value.from);
+          const monthsLater = new Date(fromDate).setMonth(
+            fromDate.getMonth() + props.dateRangeLimit,
+          );
+          const maxToDate = date.formatDate(monthsLater, 'YYYY-MM-DD'); // 최대개월 후 또는 오늘 중 더 이른 날짜
+          const toDate = new Date(dateModel.value.to);
+          if (toDate.getTime() > monthsLater || fromDate > toDate) {
+            // 선택된 'to' 날짜가 최대개월을 초과하는 경우
+            dateModel.value.to = maxToDate;
+          }
+        }
+      }
+
+      function settingToDate() {
+        menuModel.value.to = false;
+        triggerValidation();
+
+        // FIXME: 종료 일자는 보통 시작 일자에 의해 제한 되기 때문에
+        // 종료 일자가 시작 일자를 제한하는 경우는 없을 것으로 보임, 추후 확인 후 삭제
+        if (props.noLimit && !!props.dateRangeLimit) {
+          const toDate = new Date(dateModel.value.to);
+          const fromDate = new Date(dateModel.value.from);
+          const monthsBefore = new Date(toDate).setMonth(toDate.getMonth() - props.dateRangeLimit);
+          const minFromDate = date.formatDate(monthsBefore, 'YYYY-MM-DD'); // 'to' 날짜로부터 최대개월 이전
+          if (fromDate.getTime() < monthsBefore) {
+            // 선택된 'from' 날짜가 'to' 날짜로부터 최대개월을 미만인 경우
+            dateModel.value.from = minFromDate;
+          }
+        }
+      }
+
+      function deleteDate() {
+        if (!props.isRange) {
+          dateModel.value = '';
+          emit('update:modelValue', dateModel.value);
+          return;
+        }
+
+        dateModel.value.from = '';
+        dateModel.value.to = '';
+        emit('update:modelValue', dateModel.value);
+      }
+
+      return {
+        locale,
+        menuModel,
+        dateModel,
+        singleMenuRef: ref(null),
+        fromMenuRef,
+        toMenuRef,
+        wrapperInputRef,
+        dateRangeIcon,
+        closeIcon,
+
+        resetDate,
+        optionsFn,
+        optionsStartFn,
+        optionsEndFn,
+        settingFromDate,
+        settingToDate,
+        deleteDate,
+        triggerValidation,
+      };
+    },
+  };
+</script>
+
+<style lang="scss">
+  @import '../css/quasar.variables.scss';
+
+  .s-date {
+    width: fit-content;
+    height: $default-height;
+    border-radius: 4px;
+
+    &.has-label {
+      .q-field__inner {
+        .q-field__control {
+          border-radius: 0 2px 2px 0 !important;
+        }
+      }
+
+      .q-field__before {
+        height: 100%;
+        padding: 4px 12px !important;
+        border: 1px solid $Grey_Lighten-1;
+        border-right: none;
+        border-radius: 2px 0 0 2px;
+        background: $Grey_Lighten-5;
+
+        .date-picker-label {
+          font-size: $default-font;
+          font-weight: $default-font-weight;
+          color: $Grey_Darken-4;
+        }
+      }
+    }
+
+    &.q-field--disabled {
+      .q-field__before {
+        border: 1px solid $Grey_Lighten-2;
+        border-right: none;
+      }
+
+      .q-field__inner {
+        .q-field__control {
+          &:after {
+            border: 1px solid $Grey_Lighten-2;
+          }
+        }
+      }
+    }
+
+    &.q-field--error {
+      .q-field__control {
+        &::after {
+          border-color: red !important;
+        }
+      }
+
+      &.q-field--highlighted {
+        .q-field__control {
+          &:after {
+            box-shadow: 0 0 2px red;
+          }
+        }
+      }
+    }
+
+    .q-field__bottom {
+      display: none;
+    }
+
+    .q-field__inner {
+      font-size: 12px;
+      text-align: center;
+
+      .q-field__control {
+        padding: 4px 16px 4px 8px !important;
+        height: 100%;
+
+        &:after {
+          border: 1px solid $Grey_Lighten-1;
+          box-shadow: none;
+        }
+
+        .q-field__prepend {
+          height: 20px;
+        }
+
+        .q-field__append {
+          height: 20px;
+
+          .q-icon {
+            margin-right: -8px;
+          }
+        }
+
+        &-container {
+          > input {
+            display: none;
+          }
+
+          .inner-input {
+            width: 100%;
+
+            // flex-grow: 1;
+            > .q-field__inner {
+              > .q-field__control {
+                width: 100%;
+                min-width: 72px;
+                height: 20px;
+                padding: 0px !important;
+
+                &::before,
+                &::after {
+                  border: none;
+                }
+
+                .q-field__control-container {
+                  justify-content: center;
+
+                  input {
+                    width: 72px;
+                    display: block;
+                    text-align: center;
+                  }
+                }
+
+                &:after {
+                  box-shadow: none !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .s-date-menu {
+    .reset-btn-area {
+      padding: 20px 24px 0px;
+
+      .reset-btn {
+        width: 28px;
+        height: 22px;
+        min-height: 22px;
+        padding: 0;
+        text-decoration: underline;
+        font-weight: 400;
+
+        &:hover {
+          .q-btn__content {
+            text-decoration: underline;
+            color: $positive;
+          }
+        }
+      }
+    }
+  }
+</style>