quasar-ui-sellmate-ui-kit 2.3.2 → 3.0.1

package/src/components/SDateRangePicker.vue

@@ -1,660 +1,660 @@
-<template>
-  <q-input
-    dense
-    outlined
-    :class="{
-      'text-Grey_Default bg-Grey_Lighten-5': isDisable,
-      's-date-range-picker--inside': insideLabel,
-    }"
-    readonly
-    class="q-pa-none s-date-range-picker bg-white"
-    v-model="inputDate"
-    :disable="isDisable"
-    @click="calendarOpen = true"
-    data-cy="rangeCalendar"
-  >
-    <template #before v-if="insideLabel">
-      <div class="date-picker-label">
-        {{ insideLabel }}
-      </div>
-    </template>
-    <template #prepend>
-      <q-btn
-        :icon="dateRangeIcon"
-        dense
-        :ripple="false"
-        flat
-        class="q-pa-none no-hover"
-        color="Grey_Darken-4"
-      >
-        <q-menu
-          v-model="calendarOpen"
-          fit
-          class="date-picker-range-wrapper"
-          ref="dateMenuRef"
-        >
-          <q-date
-            v-model="dateValue.from"
-            minimal
-            square
-            color="positive"
-            class="q-pa-none"
-            mask="YYYY-MM-DD"
-            :locale="lang ? locale[lang] : {}"
-            :options="optionsStartFn"
-            @range-start="getRangeStartDay"
-          />
-          <q-separator vertical />
-          <q-date
-            v-model="dateValue.to"
-            minimal
-            square
-            color="positive"
-            class="q-pa-none"
-            mask="YYYY-MM-DD"
-            :locale="lang ? locale[lang] : {}"
-            :options="optionsEndFn"
-            @range-end="getRangeEndDay"
-          >
-            <q-btn
-              class="reset-to-today-btn no-shadow no-hover"
-              unelevated
-              text-color="black"
-              :label="lang ? locale[lang].today : '오늘'"
-              @click="resetDate"
-            />
-          </q-date>
-        </q-menu>
-      </q-btn>
-    </template>
-    <template #default>
-      <div class="flex no-wrap items-center">
-        <q-input
-          v-if="useInput"
-          dense
-          borderless
-          v-model="dateValue.from"
-          autocomplete="off"
-          mask="####-##-##"
-          class="inner-input"
-        />
-        <span v-else class="text-center text-Grey_Darken-4 date-str">{{
-          dateValue.from
-        }}</span>
-        <span class="q-mx-sm" style="min-width: 0">~</span>
-        <q-input
-          v-if="useInput"
-          dense
-          borderless
-          v-model="dateValue.to"
-          autocomplete="off"
-          mask="####-##-##"
-          class="inner-input"
-        />
-        <span v-else class="text-center text-Grey_Darken-4 date-str">{{
-          dateValue.to
-        }}</span>
-      </div>
-    </template>
-    <template #append v-if="useDelete">
-      <q-icon
-        :name="closeIcon"
-        size="16px"
-        class="cursor-pointer"
-        @click="deleteDate"
-        data-cy="delete-icon"
-      />
-    </template>
-  </q-input>
-</template>
-
-<script>
-  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月',
-      ],
-    },
-  };
-  import { defineComponent, ref, watch } from 'vue';
-  import { QInput, QBtn, QDate, QMenu, QIcon, QSeparator, date } from 'quasar';
-  import { dateRangeIcon, closeIcon } from '../assets/icons.js';
-  import { useModelBinder } from '../composables/modelBinder';
-
-  export default defineComponent({
-    name: 'SDateRangePicker',
-    components: {
-      QInput,
-      QBtn,
-      QDate,
-      QMenu,
-      QIcon,
-      QSeparator,
-    },
-    props: {
-      isDisable: Boolean,
-      insideLabel: String,
-      useInput: Boolean,
-      rangeDate: {
-        type: [Number, Object, null],
-        /**
-         * 얼마 후인지 제한
-         * 기본 디폴트 month
-         * day, month, year
-        */
-        default: () => 1,
-      },
-      modelValue: {
-        type: [String, Object],
-      },
-      useDelete: {
-        type: Boolean,
-        default: false,
-      },
-      lang: {
-        type: String,
-        default: '',
-        require: false,
-      },
-      // 날짜 제한
-      dateLimit: {
-        type: Object,
-        default: () => ({ from: '', to: '' }),
-      },
-    },
-    setup(props, { emit }) {
-      const calendarOpen = ref(false);
-      const dateValue = useModelBinder(props);
-      const inputDate = ref(`${dateValue.value.from} ~ ${dateValue.value.to}`);
-      const dateMenuRef = ref(null);
-
-      function resetDate() {
-        const todayReset = date.formatDate(new Date(), 'YYYY/MM/DD');
-        dateValue.value.from = date.formatDate(todayReset, 'YYYY-MM-DD');
-        dateValue.value.to = date.formatDate(todayReset, 'YYYY-MM-DD');
-      }
-
-      function deleteDate() {
-        if (dateValue.value.from && dateValue.value.to) {
-          dateValue.value.from = null;
-          dateValue.value.to = null;
-          emit('update:modelValue', dateValue.value);
-        }
-      }
-
-      watch(
-        () => props.isDisable,
-        val => {
-          if (val) {
-            dateMenuRef.value.hide();
-          }
-        },
-      );
-
-      const startDate = date.formatDate(new Date(), 'YYYY/MM/DD');
-      const endDate = date.formatDate(new Date(), 'YYYY/MM/DD');
-
-      function getRangeStartDay(from) {
-        startDate.value = from;
-      }
-      function getRangeEndDay(to) {
-        endDate.value = to;
-      }
-
-      function optionsStartFn(day) {
-        if (props.rangeDate === null) return true;
-        let maxFromDate = date.formatDate(
-          date.subtractFromDate(
-            new Date(dateValue.value.to),
-            typeof props.rangeDate === 'number'
-              ? { month: props.rangeDate }
-              : props.rangeDate,
-          ),
-          'YYYY/MM/DD',
-        );
-
-        if (props.dateLimit.from) {
-          maxFromDate = date.formatDate(
-            new Date(
-              Math.max(new Date(maxFromDate), new Date(props.dateLimit.from)),
-            ),
-            'YYYY/MM/DD',
-          );
-        }
-
-        if (!dateValue.value.to) {
-          return true;
-        }
-
-        const dayTo = date.formatDate(dateValue.value.to, 'YYYY/MM/DD');
-        return maxFromDate <= day && day <= dayTo;
-      }
-
-      function optionsEndFn(day) {
-        const todayForat = date.formatDate(new Date(), 'YYYY/MM/DD');
-        if (props.rangeDate === null) return day <= todayForat;
-        const dayFrom = date.formatDate(dateValue.value.from, 'YYYY/MM/DD');
-        let maxToDate = date.formatDate(
-          date.addToDate(
-            new Date(dateValue.value.from),
-            typeof props.rangeDate === 'number'
-              ? { month: props.rangeDate }
-              : props.rangeDate,
-          ),
-          'YYYY/MM/DD',
-        );
-
-        if (props.dateLimit.to) {
-          maxToDate = date.formatDate(
-            new Date(
-              Math.min(new Date(maxToDate), new Date(props.dateLimit.to)),
-            ),
-            'YYYY/MM/DD',
-          );
-        }
-        if (!dateValue.value.from) {
-          return true;
-        }
-        return dayFrom <= day && day <= maxToDate;
-      }
-
-      return {
-        dateRangeIcon,
-        locale,
-        calendarOpen,
-        dateValue,
-        inputDate,
-        resetDate,
-        getRangeStartDay,
-        getRangeEndDay,
-        optionsStartFn,
-        optionsEndFn,
-        closeIcon,
-        deleteDate,
-        dateMenuRef,
-      };
-    },
-  });
-</script>
-
-<style lang="scss">
-  @import '../css/quasar.variables.scss';
-
-  .s-date-range-picker {
-    width: fit-content;
-    height: $default-height;
-
-    &.q-field--dense .q-field__before {
-      padding: 0;
-      height: 100%;
-    }
-
-    .q-field__inner {
-      font-size: 12px;
-
-      .q-field__control {
-        padding: 4px 0 4px 8px !important;
-        align-items: center;
-        height: 100%;
-
-        .q-field__prepend {
-          .q-icon {
-            width: 20px;
-            height: 20px;
-            color: $Grey_Darken-1;
-          }
-        }
-
-        &:after {
-          border: 1px solid $Grey_Lighten-1;
-          box-shadow: none;
-        }
-
-        &:hover,
-        &:active {
-          background: $Grey_Lighten-5;
-        }
-
-        .q-field__prepend {
-          height: $default-content-height;
-          padding: 0;
-
-          > div {
-            min-height: 0;
-            height: 100%;
-            display: flex !important;
-            align-items: center;
-            justify-content: center;
-
-            .q-btn {
-              width: $default-content-size;
-              height: $default-content-size;
-              min-height: $default-content-size;
-
-              .q-icon {
-                font-size: $icon-size-lg;
-              }
-            }
-          }
-        }
-
-        &-container {
-          > input {
-            display: none;
-          }
-
-          display: flex;
-          justify-content: center;
-          height: $default-content-height;
-          margin-left: 12px;
-          margin-right: 16px;
-
-          .q-field__native {
-            height: 100%;
-            line-height: $default-line-height;
-            text-align: center;
-            padding: 0 !important;
-            display: none;
-
-            font: {
-              size: $default-font;
-              weight: $default-font-weight;
-            }
-
-            input::placeholder {
-              color: $Grey_Darken-4;
-            }
-          }
-        }
-
-        .q-field__append {
-          padding: 0 6px 0 0;
-        }
-      }
-    }
-
-    .inner-input {
-      > .q-field__inner {
-        > .q-field__control {
-          width: 70px;
-          padding: 0px !important;
-
-          &::before,
-          &::after {
-            border: none;
-          }
-
-          > .q-field__control-container {
-            margin: 0px;
-
-            input {
-              display: block !important;
-            }
-          }
-        }
-      }
-    }
-
-    .date-str {
-      width: 70px;
-      line-height: $default-content-height;
-      justify-content: center;
-    }
-
-    &--inside {
-      .q-field__before {
-        height: 100%;
-        padding: 4px 12px !important;
-        border: 1px solid $Grey_Lighten-1;
-        border-right: none;
-        border-radius: $generic-border-radius 0 0 $generic-border-radius;
-        background: $Grey_Lighten-5;
-
-        .date-picker-label {
-          font-size: $default-font;
-          font-weight: $default-font-weight;
-          color: $Grey_Darken-4;
-        }
-      }
-
-      .q-field__inner {
-        .q-field__control {
-          border-radius: 0 2px 2px 0;
-          width: 220px;
-
-          .q-field__prepend {
-            .q-icon {
-              width: 20px;
-              height: 20px;
-              color: $Grey_Darken-1;
-            }
-          }
-
-          &-container {
-            > input {
-              display: none;
-            }
-
-            > div {
-              margin-left: 6.5px;
-
-              > span {
-                display: inline-flex;
-                min-width: 70px;
-                font-size: 12px !important;
-              }
-            }
-          }
-        }
-      }
-
-      &.q-field--disabled {
-        .q-field__before {
-          border: 1px solid $Grey_Lighten-2;
-          border-right: none;
-
-          .date-picker-label {
-            color: $Grey_Default;
-          }
-        }
-      }
-    }
-  }
-
-  .date-picker-range-wrapper.q-menu {
-    width: 609px;
-    height: 330px;
-    max-height: 330px;
-    overflow: hidden;
-    border-radius: 8px;
-    position: relative;
-
-    min: {
-      width: 0 !important;
-      height: 0 !important;
-    }
-
-    .q-separator {
-      position: absolute;
-      height: 244px;
-      left: 304px;
-      top: 62px;
-    }
-
-    .q-date {
-      position: absolute;
-      min-height: 330px;
-      top: 0;
-      box-shadow: none;
-      width: 304px;
-
-      &:first-of-type {
-        left: 0;
-      }
-
-      &:last-of-type {
-        right: 0;
-      }
-
-      &__main {
-        .q-date__actions {
-          padding: 0 !important;
-
-          > .reset-to-today-btn {
-            padding: 0;
-            width: 28px;
-            height: 22px;
-            min-height: 22px;
-            position: absolute;
-            background: transparent;
-            top: 20px;
-            right: 24px;
-
-            > span {
-              color: $Grey_Darken-4;
-              text-decoration: underline;
-              color: $Grey_Darken-4;
-            }
-          }
-
-          &:hover {
-            .q-btn__content {
-              text-decoration: underline;
-              color: $positive;
-            }
-          }
-        }
-
-        .q-date__content {
-          margin-top: 42px;
-
-          .q-date__view {
-            min-height: 0 !important;
-            padding-bottom: 0;
-
-            .q-date__navigation {
-              div {
-                height: 28px;
-
-                .q-btn {
-                  .q-icon {
-                    font-size: $default-font;
-                  }
-                }
-              }
-
-              .relative-position {
-                div {
-                  .q-btn--dense {
-                    padding: 0 !important;
-
-                    .q-btn__content {
-                      > span {
-                        font-size: 14px;
-                      }
-                    }
-                  }
-                }
-              }
-            }
-
-            .q-date__calendar-days-container {
-              min-height: 172px;
-
-              .q-date__calendar-days {
-                .q-date__calendar-item {
-                  .q-btn {
-                    padding: 0;
-
-                    .q-btn__content {
-                      > span {
-                        font-size: 14px;
-                      }
-                    }
-
-                    &:hover {
-                      .q-focus-helper {
-                        background: $positive;
-                        opacity: 1;
-
-                        &:before,
-                        &:after {
-                          display: none;
-                        }
-                      }
-
-                      .q-btn__content {
-                        > span {
-                          color: white;
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-</style>
+<template>
+  <q-input
+    dense
+    outlined
+    :class="{
+      'text-Grey_Default bg-Grey_Lighten-5': isDisable,
+      's-date-range-picker--inside': insideLabel,
+    }"
+    readonly
+    class="q-pa-none s-date-range-picker bg-white"
+    v-model="inputDate"
+    :disable="isDisable"
+    @click="calendarOpen = true"
+    data-cy="rangeCalendar"
+  >
+    <template #before v-if="insideLabel">
+      <div class="date-picker-label">
+        {{ insideLabel }}
+      </div>
+    </template>
+    <template #prepend>
+      <q-btn
+        :icon="dateRangeIcon"
+        dense
+        :ripple="false"
+        flat
+        class="q-pa-none no-hover"
+        color="Grey_Darken-4"
+      >
+        <q-menu
+          v-model="calendarOpen"
+          fit
+          class="date-picker-range-wrapper"
+          ref="dateMenuRef"
+        >
+          <q-date
+            v-model="dateValue.from"
+            minimal
+            square
+            color="positive"
+            class="q-pa-none"
+            mask="YYYY-MM-DD"
+            :locale="lang ? locale[lang] : {}"
+            :options="optionsStartFn"
+            @range-start="getRangeStartDay"
+          />
+          <q-separator vertical />
+          <q-date
+            v-model="dateValue.to"
+            minimal
+            square
+            color="positive"
+            class="q-pa-none"
+            mask="YYYY-MM-DD"
+            :locale="lang ? locale[lang] : {}"
+            :options="optionsEndFn"
+            @range-end="getRangeEndDay"
+          >
+            <q-btn
+              class="reset-to-today-btn no-shadow no-hover"
+              unelevated
+              text-color="black"
+              :label="lang ? locale[lang].today : '오늘'"
+              @click="resetDate"
+            />
+          </q-date>
+        </q-menu>
+      </q-btn>
+    </template>
+    <template #default>
+      <div class="flex no-wrap items-center">
+        <q-input
+          v-if="useInput"
+          dense
+          borderless
+          v-model="dateValue.from"
+          autocomplete="off"
+          mask="####-##-##"
+          class="inner-input"
+        />
+        <span v-else class="text-center text-Grey_Darken-4 date-str">{{
+          dateValue.from
+        }}</span>
+        <span class="q-mx-sm" style="min-width: 0">~</span>
+        <q-input
+          v-if="useInput"
+          dense
+          borderless
+          v-model="dateValue.to"
+          autocomplete="off"
+          mask="####-##-##"
+          class="inner-input"
+        />
+        <span v-else class="text-center text-Grey_Darken-4 date-str">{{
+          dateValue.to
+        }}</span>
+      </div>
+    </template>
+    <template #append v-if="useDelete">
+      <q-icon
+        :name="closeIcon"
+        size="16px"
+        class="cursor-pointer"
+        @click="deleteDate"
+        data-cy="delete-icon"
+      />
+    </template>
+  </q-input>
+</template>
+
+<script>
+  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月',
+      ],
+    },
+  };
+  import { defineComponent, ref, watch } from 'vue';
+  import { QInput, QBtn, QDate, QMenu, QIcon, QSeparator, date } from 'quasar';
+  import { dateRangeIcon, closeIcon } from '../assets/icons.js';
+  import { useModelBinder } from '../composables/modelBinder';
+
+  export default defineComponent({
+    name: 'SDateRangePicker',
+    components: {
+      QInput,
+      QBtn,
+      QDate,
+      QMenu,
+      QIcon,
+      QSeparator,
+    },
+    props: {
+      isDisable: Boolean,
+      insideLabel: String,
+      useInput: Boolean,
+      rangeDate: {
+        type: [Number, Object, null],
+        /**
+         * 얼마 후인지 제한
+         * 기본 디폴트 month
+         * day, month, year
+        */
+        default: () => 1,
+      },
+      modelValue: {
+        type: [String, Object],
+      },
+      useDelete: {
+        type: Boolean,
+        default: false,
+      },
+      lang: {
+        type: String,
+        default: '',
+        require: false,
+      },
+      // 날짜 제한
+      dateLimit: {
+        type: Object,
+        default: () => ({ from: '', to: '' }),
+      },
+    },
+    setup(props, { emit }) {
+      const calendarOpen = ref(false);
+      const dateValue = useModelBinder(props);
+      const inputDate = ref(`${dateValue.value.from} ~ ${dateValue.value.to}`);
+      const dateMenuRef = ref(null);
+
+      function resetDate() {
+        const todayReset = date.formatDate(new Date(), 'YYYY/MM/DD');
+        dateValue.value.from = date.formatDate(todayReset, 'YYYY-MM-DD');
+        dateValue.value.to = date.formatDate(todayReset, 'YYYY-MM-DD');
+      }
+
+      function deleteDate() {
+        if (dateValue.value.from && dateValue.value.to) {
+          dateValue.value.from = null;
+          dateValue.value.to = null;
+          emit('update:modelValue', dateValue.value);
+        }
+      }
+
+      watch(
+        () => props.isDisable,
+        val => {
+          if (val) {
+            dateMenuRef.value.hide();
+          }
+        },
+      );
+
+      const startDate = date.formatDate(new Date(), 'YYYY/MM/DD');
+      const endDate = date.formatDate(new Date(), 'YYYY/MM/DD');
+
+      function getRangeStartDay(from) {
+        startDate.value = from;
+      }
+      function getRangeEndDay(to) {
+        endDate.value = to;
+      }
+
+      function optionsStartFn(day) {
+        if (props.rangeDate === null) return true;
+        let maxFromDate = date.formatDate(
+          date.subtractFromDate(
+            new Date(dateValue.value.to),
+            typeof props.rangeDate === 'number'
+              ? { month: props.rangeDate }
+              : props.rangeDate,
+          ),
+          'YYYY/MM/DD',
+        );
+
+        if (props.dateLimit.from) {
+          maxFromDate = date.formatDate(
+            new Date(
+              Math.max(new Date(maxFromDate), new Date(props.dateLimit.from)),
+            ),
+            'YYYY/MM/DD',
+          );
+        }
+
+        if (!dateValue.value.to) {
+          return true;
+        }
+
+        const dayTo = date.formatDate(dateValue.value.to, 'YYYY/MM/DD');
+        return maxFromDate <= day && day <= dayTo;
+      }
+
+      function optionsEndFn(day) {
+        const todayForat = date.formatDate(new Date(), 'YYYY/MM/DD');
+        if (props.rangeDate === null) return day <= todayForat;
+        const dayFrom = date.formatDate(dateValue.value.from, 'YYYY/MM/DD');
+        let maxToDate = date.formatDate(
+          date.addToDate(
+            new Date(dateValue.value.from),
+            typeof props.rangeDate === 'number'
+              ? { month: props.rangeDate }
+              : props.rangeDate,
+          ),
+          'YYYY/MM/DD',
+        );
+
+        if (props.dateLimit.to) {
+          maxToDate = date.formatDate(
+            new Date(
+              Math.min(new Date(maxToDate), new Date(props.dateLimit.to)),
+            ),
+            'YYYY/MM/DD',
+          );
+        }
+        if (!dateValue.value.from) {
+          return true;
+        }
+        return dayFrom <= day && day <= maxToDate;
+      }
+
+      return {
+        dateRangeIcon,
+        locale,
+        calendarOpen,
+        dateValue,
+        inputDate,
+        resetDate,
+        getRangeStartDay,
+        getRangeEndDay,
+        optionsStartFn,
+        optionsEndFn,
+        closeIcon,
+        deleteDate,
+        dateMenuRef,
+      };
+    },
+  });
+</script>
+
+<style lang="scss">
+  @import '../css/quasar.variables.scss';
+
+  .s-date-range-picker {
+    width: fit-content;
+    height: $default-height;
+
+    &.q-field--dense .q-field__before {
+      padding: 0;
+      height: 100%;
+    }
+
+    .q-field__inner {
+      font-size: 12px;
+
+      .q-field__control {
+        padding: 4px 0 4px 8px !important;
+        align-items: center;
+        height: 100%;
+
+        .q-field__prepend {
+          .q-icon {
+            width: 20px;
+            height: 20px;
+            color: $Grey_Darken-1;
+          }
+        }
+
+        &:after {
+          border: 1px solid $Grey_Lighten-1;
+          box-shadow: none;
+        }
+
+        &:hover,
+        &:active {
+          background: $Grey_Lighten-5;
+        }
+
+        .q-field__prepend {
+          height: $default-content-height;
+          padding: 0;
+
+          > div {
+            min-height: 0;
+            height: 100%;
+            display: flex !important;
+            align-items: center;
+            justify-content: center;
+
+            .q-btn {
+              width: $default-content-size;
+              height: $default-content-size;
+              min-height: $default-content-size;
+
+              .q-icon {
+                font-size: $icon-size-lg;
+              }
+            }
+          }
+        }
+
+        &-container {
+          > input {
+            display: none;
+          }
+
+          display: flex;
+          justify-content: center;
+          height: $default-content-height;
+          margin-left: 12px;
+          margin-right: 16px;
+
+          .q-field__native {
+            height: 100%;
+            line-height: $default-line-height;
+            text-align: center;
+            padding: 0 !important;
+            display: none;
+
+            font: {
+              size: $default-font;
+              weight: $default-font-weight;
+            }
+
+            input::placeholder {
+              color: $Grey_Darken-4;
+            }
+          }
+        }
+
+        .q-field__append {
+          padding: 0 6px 0 0;
+        }
+      }
+    }
+
+    .inner-input {
+      > .q-field__inner {
+        > .q-field__control {
+          width: 70px;
+          padding: 0px !important;
+
+          &::before,
+          &::after {
+            border: none;
+          }
+
+          > .q-field__control-container {
+            margin: 0px;
+
+            input {
+              display: block !important;
+            }
+          }
+        }
+      }
+    }
+
+    .date-str {
+      width: 70px;
+      line-height: $default-content-height;
+      justify-content: center;
+    }
+
+    &--inside {
+      .q-field__before {
+        height: 100%;
+        padding: 4px 12px !important;
+        border: 1px solid $Grey_Lighten-1;
+        border-right: none;
+        border-radius: $generic-border-radius 0 0 $generic-border-radius;
+        background: $Grey_Lighten-5;
+
+        .date-picker-label {
+          font-size: $default-font;
+          font-weight: $default-font-weight;
+          color: $Grey_Darken-4;
+        }
+      }
+
+      .q-field__inner {
+        .q-field__control {
+          border-radius: 0 2px 2px 0;
+          width: 220px;
+
+          .q-field__prepend {
+            .q-icon {
+              width: 20px;
+              height: 20px;
+              color: $Grey_Darken-1;
+            }
+          }
+
+          &-container {
+            > input {
+              display: none;
+            }
+
+            > div {
+              margin-left: 6.5px;
+
+              > span {
+                display: inline-flex;
+                min-width: 70px;
+                font-size: 12px !important;
+              }
+            }
+          }
+        }
+      }
+
+      &.q-field--disabled {
+        .q-field__before {
+          border: 1px solid $Grey_Lighten-2;
+          border-right: none;
+
+          .date-picker-label {
+            color: $Grey_Default;
+          }
+        }
+      }
+    }
+  }
+
+  .date-picker-range-wrapper.q-menu {
+    width: 609px;
+    height: 330px;
+    max-height: 330px;
+    overflow: hidden;
+    border-radius: 8px;
+    position: relative;
+
+    min: {
+      width: 0 !important;
+      height: 0 !important;
+    }
+
+    .q-separator {
+      position: absolute;
+      height: 244px;
+      left: 304px;
+      top: 62px;
+    }
+
+    .q-date {
+      position: absolute;
+      min-height: 330px;
+      top: 0;
+      box-shadow: none;
+      width: 304px;
+
+      &:first-of-type {
+        left: 0;
+      }
+
+      &:last-of-type {
+        right: 0;
+      }
+
+      &__main {
+        .q-date__actions {
+          padding: 0 !important;
+
+          > .reset-to-today-btn {
+            padding: 0;
+            width: 28px;
+            height: 22px;
+            min-height: 22px;
+            position: absolute;
+            background: transparent;
+            top: 20px;
+            right: 24px;
+
+            > span {
+              color: $Grey_Darken-4;
+              text-decoration: underline;
+              color: $Grey_Darken-4;
+            }
+          }
+
+          &:hover {
+            .q-btn__content {
+              text-decoration: underline;
+              color: $positive;
+            }
+          }
+        }
+
+        .q-date__content {
+          margin-top: 42px;
+
+          .q-date__view {
+            min-height: 0 !important;
+            padding-bottom: 0;
+
+            .q-date__navigation {
+              div {
+                height: 28px;
+
+                .q-btn {
+                  .q-icon {
+                    font-size: $default-font;
+                  }
+                }
+              }
+
+              .relative-position {
+                div {
+                  .q-btn--dense {
+                    padding: 0 !important;
+
+                    .q-btn__content {
+                      > span {
+                        font-size: 14px;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+
+            .q-date__calendar-days-container {
+              min-height: 172px;
+
+              .q-date__calendar-days {
+                .q-date__calendar-item {
+                  .q-btn {
+                    padding: 0;
+
+                    .q-btn__content {
+                      > span {
+                        font-size: 14px;
+                      }
+                    }
+
+                    &:hover {
+                      .q-focus-helper {
+                        background: $positive;
+                        opacity: 1;
+
+                        &:before,
+                        &:after {
+                          display: none;
+                        }
+                      }
+
+                      .q-btn__content {
+                        > span {
+                          color: white;
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>