diff --git a/.changeset/dry-weeks-compare.md b/.changeset/dry-weeks-compare.md
new file mode 100644
index 00000000..b6ef9195
--- /dev/null
+++ b/.changeset/dry-weeks-compare.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': minor
+---
+
+**feat**(`SDatePicker`): add custom trigger support
diff --git a/.changeset/eleven-steaks-call.md b/.changeset/eleven-steaks-call.md
new file mode 100644
index 00000000..07a6c577
--- /dev/null
+++ b/.changeset/eleven-steaks-call.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`SDatePicker`): add model value change on every pick
diff --git a/.changeset/neat-squids-pretend.md b/.changeset/neat-squids-pretend.md
new file mode 100644
index 00000000..1d3b5ac2
--- /dev/null
+++ b/.changeset/neat-squids-pretend.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': minor
+---
+
+**feat**(`SDatePicker`): add support for custom shortcuts
diff --git a/.changeset/seven-apes-fry.md b/.changeset/seven-apes-fry.md
new file mode 100644
index 00000000..1690949e
--- /dev/null
+++ b/.changeset/seven-apes-fry.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`SDatePicker`): add some prop types export
diff --git a/.changeset/sharp-ligers-cross.md b/.changeset/sharp-ligers-cross.md
new file mode 100644
index 00000000..95fd62b4
--- /dev/null
+++ b/.changeset/sharp-ligers-cross.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`SDatePicker`): add using shortcut title when selected one
diff --git a/.changeset/weak-rivers-confess.md b/.changeset/weak-rivers-confess.md
new file mode 100644
index 00000000..db3a3b35
--- /dev/null
+++ b/.changeset/weak-rivers-confess.md
@@ -0,0 +1,5 @@
+---
+'@soramitsu-ui/ui': patch
+---
+
+**fix**(`SDatePicker`): fix styles
diff --git a/packages/ui/etc/api/ui.api.md b/packages/ui/etc/api/ui.api.md
index b0101a36..92da7b2c 100644
--- a/packages/ui/etc/api/ui.api.md
+++ b/packages/ui/etc/api/ui.api.md
@@ -95,6 +95,45 @@ export type ButtonType = typeof BUTTON_TYPE_VALUES[number];
 // @public (undocumented)
 export type CheckboxState = boolean | 'mixed';
 
+// @public (undocumented)
+export interface DatePickerOptions {
+    // (undocumented)
+    day?: PresetOption<Date>[];
+    // (undocumented)
+    pick?: PresetOption<Date[]>[];
+    // (undocumented)
+    range?: PresetOption<[Date, Date]>[];
+}
+
+// @public (undocumented)
+export type DatePickerType = 'day' | 'range' | 'pick';
+
+// @public (undocumented)
+export type DateState = Date;
+
+// @public (undocumented)
+export interface DateTableCell {
+    // (undocumented)
+    day: number;
+    // (undocumented)
+    end: boolean;
+    // (undocumented)
+    inRange: boolean;
+    // (undocumented)
+    month: number;
+    // (undocumented)
+    start: boolean;
+    // (undocumented)
+    text: number;
+    // (undocumented)
+    time: string | null;
+    // (undocumented)
+    type: DateTableCellType;
+}
+
+// @public (undocumented)
+export type DateTableCellType = 'normal' | 'today' | 'prev-month' | 'next-month';
+
 // @public (undocumented)
 export function defineToastsApi(): ToastsApi;
 
@@ -128,6 +167,9 @@ export interface ModalApi {
     labelledBy: string;
 }
 
+// @public (undocumented)
+export type ModelValueType = Date[] | Date | null | undefined;
+
 // @public (undocumented)
 export const NAVIGATION_MENU_API_KEY: InjectionKey<DeepReadonly<NavigationMenuApi>>;
 
@@ -151,6 +193,9 @@ export interface NavigationSubmenuApi {
 // @public (undocumented)
 export const NOTIFICATIONS_API_KEY: InjectionKey<ToastsApi>;
 
+// @public (undocumented)
+export type PickState = Date[];
+
 // @public (undocumented)
 export function plugin(): Plugin_2;
 
@@ -165,6 +210,14 @@ export interface PopoverApi {
     show: boolean;
 }
 
+// @public (undocumented)
+export interface PresetOption<T> {
+    // (undocumented)
+    label: string;
+    // (undocumented)
+    value: T;
+}
+
 // @public (undocumented)
 export const RADIO_GROUP_API_KEY: InjectionKey<RadioGroupApi>;
 
@@ -201,6 +254,22 @@ type RadioType = typeof RADIO_TYPE_VALUES extends ReadonlyArray<infer T> ? T : n
 export { RadioType as CheckboxType }
 export { RadioType }
 
+// @public (undocumented)
+export interface RangeOptionValue extends RangeState {
+    // (undocumented)
+    selectedField: string;
+}
+
+// @public (undocumented)
+export interface RangeState {
+    // (undocumented)
+    endDate: Date | null;
+    // (undocumented)
+    selecting: boolean;
+    // (undocumented)
+    startDate: Date | null;
+}
+
 // @public (undocumented)
 export type RegisteredToast = ToastRegisterParams;
 
@@ -447,16 +516,19 @@ export const SDatePicker: DefineComponent<__VLS_WithDefaults_14<__VLS_TypePropsT
 type: string;
 time: boolean;
 disabled: boolean;
+shortcuts: () => DatePickerOptions;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults_14<__VLS_TypePropsToRuntimeProps_17<Props_7>, {
 type: string;
 time: boolean;
 disabled: boolean;
+shortcuts: () => DatePickerOptions;
 }>>> & {
 "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
 type: DatePickerType;
 disabled: boolean;
 time: boolean;
+shortcuts: DatePickerOptions;
 }>;
 
 // Warning: (ae-forgotten-export) The symbol "__VLS_TypePropsToRuntimeProps" needs to be exported by the entry point lib.d.ts
@@ -564,6 +636,14 @@ export interface ShowNotificationReturn {
     close: () => void;
 }
 
+// @public (undocumented)
+export interface ShowState {
+    // (undocumented)
+    month: number;
+    // (undocumented)
+    year: number;
+}
+
 // Warning: (ae-forgotten-export) The symbol "__VLS_WithDefaults" needs to be exported by the entry point lib.d.ts
 // Warning: (ae-forgotten-export) The symbol "__VLS_TypePropsToRuntimeProps" needs to be exported by the entry point lib.d.ts
 //
@@ -1506,6 +1586,16 @@ modelValue: string;
 background: TabsPanelBackgroundType;
 }>;
 
+// @public (undocumented)
+export interface StateStore {
+    // (undocumented)
+    dayState: DateState;
+    // (undocumented)
+    pickState: PickState;
+    // (undocumented)
+    rangeState: RangeState;
+}
+
 // @public
 export const Status: {
     readonly Info: "info";
@@ -1962,7 +2052,6 @@ export function useTabsPanelApi(): TabsPanelApi;
 
 // Warnings were encountered during analysis:
 //
-// dist-ts/components/DatePicker/SDatePicker.vue.d.ts:19:5 - (ae-forgotten-export) The symbol "DatePickerType" needs to be exported by the entry point lib.d.ts
 // dist-ts/components/Table/STable.vue.d.ts:61:5 - (ae-forgotten-export) The symbol "CSSObject" needs to be exported by the entry point lib.d.ts
 // dist-ts/components/Table/STable.vue.d.ts:150:5 - (ae-forgotten-export) The symbol "manualClearSelection" needs to be exported by the entry point lib.d.ts
 // dist-ts/components/Table/STable.vue.d.ts:155:5 - (ae-forgotten-export) The symbol "manualToggleRowSelection" needs to be exported by the entry point lib.d.ts
diff --git a/packages/ui/src/components/DatePicker/SDatePicker.vue b/packages/ui/src/components/DatePicker/SDatePicker.vue
index d64bf4a0..d492b6b8 100644
--- a/packages/ui/src/components/DatePicker/SDatePicker.vue
+++ b/packages/ui/src/components/DatePicker/SDatePicker.vue
@@ -18,19 +18,23 @@ import {
   ShowState,
   RangeOptionValue,
   ModelValueType,
+  DatePickerOptions,
 } from './types'
 import { DatePickerApi, DATE_PICKER_API_KEY } from './api'
+import { DEFAULT_SHORTCUTS } from './consts'
 
 interface Props {
   modelValue: ModelValueType
   type?: DatePickerType
   time?: boolean
   disabled?: boolean
+  shortcuts?: DatePickerOptions
 }
 const props = withDefaults(defineProps<Props>(), {
   type: 'day',
   time: false,
   disabled: false,
+  shortcuts: () => DEFAULT_SHORTCUTS,
 })
 
 const innerModelValue = ref<ModelValueType>(props.modelValue)
@@ -83,10 +87,16 @@ const init = () => {
 const updateModelValue = () => {
   if (props.type === 'day') {
     innerModelValue.value = dayState.value
+    save()
   } else if (props.type === 'pick') {
     innerModelValue.value = pickState.value
+    save()
   } else {
     innerModelValue.value = [rangeState.startDate as Date, rangeState.endDate as Date]
+
+    if (rangeState.endDate) {
+      save()
+    }
   }
 }
 
@@ -150,8 +160,19 @@ const showStateView = computed(() => {
 // #endregion
 
 // #region OPTIONS_PANEL
-const onMenuClick = (data: Date | RangeOptionValue, label: string) => {
-  onDatePick(data)
+const onMenuClick = (data: Date | [Date, Date] | Date[], label: string) => {
+  let processedData: RangeOptionValue | Date | Date[] = data
+
+  if (Array.isArray(data) && data.length === 2) {
+    processedData = {
+      startDate: data[0],
+      endDate: data[1],
+      selecting: false,
+      selectedField: 'endDate',
+    }
+  }
+
+  onDatePick(processedData)
   updateShowedMonths()
   menuState.value = label
 }
@@ -176,6 +197,10 @@ const changeView = (viewName: string) => {
 }
 
 const headTitle = computed(() => {
+  if (menuState.value !== 'Custom') {
+    return menuState.value
+  }
+
   try {
     switch (props.type) {
       case 'day':
@@ -324,6 +349,9 @@ const updateShow = () => {
 
 const save = () => {
   emit('update:modelValue', innerModelValue.value)
+}
+const saveAndClose = () => {
+  save()
   togglePopper(false)
 }
 
@@ -345,19 +373,30 @@ else updateModelValue()
       @click-outside="togglePopper(false)"
     >
       <template #trigger>
-        <div
-          class="s-date-picker__header p-2 sora-tpg-ch2 relative pr-6"
-          :class="disabled ? 'cursor-default' : 'cursor-pointer'"
-          @keydown="updateShow"
-          @click="updateShow"
-        >
-          {{ headTitle || 'Date' }}
-          <div
-            class="arrow"
-            :class="arrowState"
+        <div>
+          <slot
+            v-bind="{
+              disabled,
+              updateShow,
+              'isPopperShown': showPopper,
+              'label': headTitle,
+            }"
           >
-            <IconArrowsChevronBottom24 />
-          </div>
+            <div
+              class="s-date-picker__header p-2 sora-tpg-ch2 relative pr-6"
+              :class="disabled ? 'cursor-default' : 'cursor-pointer'"
+              @keydown="updateShow"
+              @click="updateShow"
+            >
+              {{ headTitle || 'Date' }}
+              <div
+                class="arrow"
+                :class="arrowState"
+              >
+                <IconArrowsChevronBottom24 />
+              </div>
+            </div>
+          </slot>
         </div>
       </template>
       <template #popper>
@@ -373,6 +412,7 @@ else updateModelValue()
             <OptionsPanel
               :type="type"
               :menu-state="menuState"
+              :options="shortcuts"
               @click:option="onMenuClick"
             />
             <CalendarsPanel
@@ -395,7 +435,7 @@ else updateModelValue()
               :format-date="formatDate"
               :format-pattern="formatPattern"
               @update:custom-input="updateCustomInput"
-              @click:done="save"
+              @click:done="saveAndClose"
             />
           </div>
         </SPopoverWrappedTransition>
diff --git a/packages/ui/src/components/DatePicker/SDatePickerOptionsWrapper.vue b/packages/ui/src/components/DatePicker/SDatePickerOptionsWrapper.vue
deleted file mode 100644
index 5f67ac22..00000000
--- a/packages/ui/src/components/DatePicker/SDatePickerOptionsWrapper.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<script lang="ts">
-import {
-  addDays,
-  addMonths,
-  addYears,
-  startOfDay,
-  startOfMonth,
-  endOfMonth,
-  startOfToday,
-  startOfTomorrow,
-  startOfYear,
-  endOfYear,
-  startOfYesterday,
-  startOfWeek,
-  endOfWeek,
-} from 'date-fns'
-import { Options } from './types'
-
-export default /* @__PURE__ */ defineComponent({
-  setup(props, { slots }) {
-    function getDate(deltaDay = 0, deltaMonth = 0, deltaYear = 0) {
-      let date = startOfToday()
-      if (deltaDay) date = addDays(date, deltaDay)
-      if (deltaMonth) date = addMonths(date, deltaMonth)
-      if (deltaYear) date = addYears(date, deltaYear)
-      return date
-    }
-
-    function getRange(dateFrom: Date, dateTo: Date) {
-      return {
-        startDate: dateFrom,
-        endDate: dateTo,
-        selecting: false,
-        selectedField: 'endDate',
-      }
-    }
-
-    const options: Options = {
-      day: [
-        {
-          label: 'Today',
-          value: getDate(),
-        },
-        {
-          label: 'Yesterday',
-          value: startOfYesterday(),
-        },
-        {
-          label: 'Tomorrow',
-          value: startOfTomorrow(),
-        },
-        {
-          label: 'Next week',
-          value: startOfDay(getDate(7)),
-        },
-        {
-          label: 'Next month',
-          value: startOfDay(getDate(0, 1)),
-        },
-        {
-          label: 'Custom',
-          value: getDate(),
-        },
-      ],
-
-      range: [
-        {
-          label: 'This week',
-          value: getRange(startOfWeek(getDate(), { weekStartsOn: 1 }), endOfWeek(getDate(), { weekStartsOn: 1 })),
-        },
-        {
-          label: 'Last week',
-          value: getRange(startOfWeek(getDate(-7), { weekStartsOn: 1 }), endOfWeek(getDate(-7), { weekStartsOn: 1 })),
-        },
-        {
-          label: 'Next week',
-          value: getRange(startOfWeek(getDate(7), { weekStartsOn: 1 }), endOfWeek(getDate(7), { weekStartsOn: 1 })),
-        },
-        {
-          label: 'This month',
-          value: getRange(startOfMonth(getDate()), endOfMonth(getDate())),
-        },
-        {
-          label: 'Last month',
-          value: getRange(startOfMonth(getDate(0, -1)), endOfMonth(getDate(0, -1))),
-        },
-        {
-          label: 'Next month',
-          value: getRange(startOfMonth(getDate(0, 1)), endOfMonth(getDate(0, 1))),
-        },
-        {
-          label: 'This year',
-          value: getRange(startOfYear(getDate()), endOfYear(getDate())),
-        },
-        {
-          label: 'Custom',
-          value: getRange(startOfWeek(getDate()), endOfWeek(getDate())),
-        },
-      ],
-    }
-    return () =>
-      slots.default?.({
-        options: options,
-      })
-  },
-})
-</script>
diff --git a/packages/ui/src/components/DatePicker/SDatePickerPanelCalendars.vue b/packages/ui/src/components/DatePicker/SDatePickerPanelCalendars.vue
index 0cf1efc4..07dc3d70 100644
--- a/packages/ui/src/components/DatePicker/SDatePickerPanelCalendars.vue
+++ b/packages/ui/src/components/DatePicker/SDatePickerPanelCalendars.vue
@@ -107,7 +107,6 @@ const updateHoveredDate = (date: Date) => {
         :show-state="nextMonthShowState"
         :value="calendarToModelValue"
         :state-store="stateStore"
-        :hide-arrows="true"
         :hovered-date="hoveredDate"
         @change-view="changeView"
         @update:showed-state="updateShowedState"
diff --git a/packages/ui/src/components/DatePicker/SDatePickerPanelCustom.vue b/packages/ui/src/components/DatePicker/SDatePickerPanelCustom.vue
index 14fb6f6d..1fea6f86 100644
--- a/packages/ui/src/components/DatePicker/SDatePickerPanelCustom.vue
+++ b/packages/ui/src/components/DatePicker/SDatePickerPanelCustom.vue
@@ -124,62 +124,60 @@ const onDoneClick = () => {
 </script>
 
 <template>
-  <div class="s-date-picker-custom-panel">
-    <div>
-      <div
-        v-if="showInputs"
-        class="flex justify-center items-center"
-      >
-        <template v-if="state.type === 'range'">
-          <input
-            :maxlength="customInputLength"
-            class="s-date-picker-custom-panel__input"
-            :class="customInputCssClass"
-            :value="customInputValueStartDate"
-            @input="handleInput"
-            @change="updateCustomInput($event, 'startDate')"
-          >
-          <div class="mx-2">
-            -
-          </div>
-          <input
-            :maxlength="customInputLength"
-            class="s-date-picker-custom-panel__input"
-            :class="customInputCssClass"
-            :value="customInputValueEndDate"
-            @input="handleInput"
-            @change="updateCustomInput($event, 'endDate')"
-          >
-        </template>
-        <template v-if="state.type === 'day'">
-          <input
-            :maxlength="customInputLength"
-            class="s-date-picker-custom-panel__input"
-            :class="customInputCssClass"
-            :value="customInputValueDay"
-            @input="handleInput"
-            @change="updateCustomInputDay($event)"
-          >
-        </template>
-        <template v-if="state.type === 'pick' && pickState.length > 0">
-          <input
-            :maxlength="customInputLength"
-            class="s-date-picker-custom-panel__input"
-            :class="customInputCssClass"
-            :value="customInputValuePick"
-            @input="handleInput"
-            @change="updateCustomInputPick($event)"
-          >
-        </template>
-      </div>
-      <button
-        class="s-date-picker-custom-panel__save-button"
-        data-testid="date-picker-done-button"
-        @click="onDoneClick"
-      >
-        Done
-      </button>
+  <div class="s-date-picker-custom-panel flex items-center relative px-16px">
+    <div
+      v-if="showInputs"
+      class="flex justify-center items-center"
+    >
+      <template v-if="state.type === 'range'">
+        <input
+          :maxlength="customInputLength"
+          class="s-date-picker-custom-panel__input"
+          :class="customInputCssClass"
+          :value="customInputValueStartDate"
+          @input="handleInput"
+          @change="updateCustomInput($event, 'startDate')"
+        >
+        <div class="mx-2">
+          -
+        </div>
+        <input
+          :maxlength="customInputLength"
+          class="s-date-picker-custom-panel__input"
+          :class="customInputCssClass"
+          :value="customInputValueEndDate"
+          @input="handleInput"
+          @change="updateCustomInput($event, 'endDate')"
+        >
+      </template>
+      <template v-if="state.type === 'day'">
+        <input
+          :maxlength="customInputLength"
+          class="s-date-picker-custom-panel__input"
+          :class="customInputCssClass"
+          :value="customInputValueDay"
+          @input="handleInput"
+          @change="updateCustomInputDay($event)"
+        >
+      </template>
+      <template v-if="state.type === 'pick' && pickState.length > 0">
+        <input
+          :maxlength="customInputLength"
+          class="s-date-picker-custom-panel__input"
+          :class="customInputCssClass"
+          :value="customInputValuePick"
+          @input="handleInput"
+          @change="updateCustomInputPick($event)"
+        >
+      </template>
     </div>
+    <button
+      class="s-date-picker-custom-panel__save-button ml-auto"
+      data-testid="date-picker-done-button"
+      @click="onDoneClick"
+    >
+      Done
+    </button>
   </div>
 </template>
 
@@ -187,7 +185,6 @@ const onDoneClick = () => {
 @use '@/theme';
 
 .s-date-picker-custom-panel {
-  @apply flex justify-center items-center relative;
   grid-area: custom;
   border-top: 1px solid theme.token-as-var('sys.color.border-primary');
   height: 52px;
@@ -210,10 +207,6 @@ const onDoneClick = () => {
     font-size: 10px;
     width: 44px;
     height: 24px;
-    position: absolute;
-    top: 50%;
-    right: 16px;
-    transform: translateY(-50%);
     background: theme.token-as-var('sys.color.primary');
     border-radius: 2px;
     color: theme.token-as-var('sys.color.util.surface');
diff --git a/packages/ui/src/components/DatePicker/SDatePickerPanelOptions.vue b/packages/ui/src/components/DatePicker/SDatePickerPanelOptions.vue
index b760ae27..cd2df781 100644
--- a/packages/ui/src/components/DatePicker/SDatePickerPanelOptions.vue
+++ b/packages/ui/src/components/DatePicker/SDatePickerPanelOptions.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { RangeOptionValue } from './types'
+import { DatePickerOptions } from './types'
 import { IconBasicCheckMark24 } from '@/components/icons'
-import OptionsWrapper from './SDatePickerOptionsWrapper.vue'
 import { DatePickerApi, useDatePickerApi } from './api'
 
 interface Props {
   menuState: string
+  options: DatePickerOptions
 }
 
 const props = defineProps<Props>()
@@ -14,9 +14,17 @@ const emit = defineEmits(['click:option'])
 
 const state: DatePickerApi = useDatePickerApi()
 
-const onMenuClick = (data: Date | RangeOptionValue, label: string) => {
+const onMenuClick = (data: Date | [Date, Date] | Date[], label: string) => {
   emit('click:option', data, label)
 }
+
+const finalOptions = computed((): Required<DatePickerOptions> => {
+  return {
+    day: props.options.day ?? [],
+    range: props.options.range ?? [],
+    pick: props.options.pick ?? [],
+  }
+})
 </script>
 
 <template>
@@ -24,22 +32,20 @@ const onMenuClick = (data: Date | RangeOptionValue, label: string) => {
     v-if="state.type !== 'pick'"
     class="s-date-picker-options-panel sora-tpg-p3"
   >
-    <OptionsWrapper v-slot="{ options }">
-      <p
-        v-for="(item, idx) in options[state.type]"
-        :key="idx"
-        class="s-date-picker-options-panel__item"
-        :class="menuState === item.label ? 'active' : ''"
-        @click="onMenuClick(item.value, item.label)"
-        @keydown="onMenuClick(item.value, item.label)"
-      >
-        {{ item.label }}
-        <span
-          v-show="menuState === item.label"
-          class="s-date-picker-options-panel__checkmark"
-        ><IconBasicCheckMark24 /></span>
-      </p>
-    </OptionsWrapper>
+    <p
+      v-for="(item, idx) in finalOptions[state.type]"
+      :key="idx"
+      class="s-date-picker-options-panel__item"
+      :class="menuState === item.label ? 'active' : ''"
+      @click="onMenuClick(item.value, item.label)"
+      @keydown="onMenuClick(item.value, item.label)"
+    >
+      {{ item.label }}
+      <span
+        v-show="menuState === item.label"
+        class="s-date-picker-options-panel__checkmark"
+      ><IconBasicCheckMark24 /></span>
+    </p>
   </div>
 </template>
 
diff --git a/packages/ui/src/components/DatePicker/SDatePickerTableDate.vue b/packages/ui/src/components/DatePicker/SDatePickerTableDate.vue
index c94bf671..4c7bb63a 100644
--- a/packages/ui/src/components/DatePicker/SDatePickerTableDate.vue
+++ b/packages/ui/src/components/DatePicker/SDatePickerTableDate.vue
@@ -205,8 +205,6 @@ const getCellClasses = (cell: types.DateTableCell) => {
   return classes.join(' ')
 }
 
-const lastField = ref('')
-
 const handleMouseMove = (event: any) => {
   if (!props.stateStore.rangeState.selecting) return
   let target = event.target
@@ -240,7 +238,6 @@ const handleClick = (ev: any) => {
         selecting: true,
         selectedField: 'startDate',
       })
-      lastField.value = 'startDate'
     } else {
       const dat = props.stateStore.rangeState.startDate || props.stateStore.rangeState.endDate
       if (dat && newDate >= dat) {
@@ -250,7 +247,6 @@ const handleClick = (ev: any) => {
           selecting: false,
           selectedField: 'endDate',
         })
-        lastField.value = 'endDate'
       } else {
         emit('pick', {
           startDate: newDate,
@@ -258,7 +254,6 @@ const handleClick = (ev: any) => {
           selecting: false,
           selectedField: 'startDate',
         })
-        lastField.value = 'startDate'
       }
     }
   } else if (state.type === 'day') {
diff --git a/packages/ui/src/components/DatePicker/consts.ts b/packages/ui/src/components/DatePicker/consts.ts
index 0f157ae9..1333ff10 100644
--- a/packages/ui/src/components/DatePicker/consts.ts
+++ b/packages/ui/src/components/DatePicker/consts.ts
@@ -1,3 +1,20 @@
+import {
+  addMonths,
+  addWeeks,
+  endOfMonth,
+  endOfWeek,
+  endOfYear,
+  startOfMonth,
+  startOfToday,
+  startOfTomorrow,
+  startOfWeek,
+  startOfYear,
+  startOfYesterday,
+  subMonths,
+  subWeeks,
+} from 'date-fns'
+import { DatePickerOptions } from '@/components/DatePicker/types'
+
 export const months = [
   'January',
   'February',
@@ -28,3 +45,89 @@ export const TIME_POINTS: string[] = (() => {
 
   return res
 })()
+
+export const DEFAULT_SHORTCUTS: DatePickerOptions = /* @__PURE__ */ (() => {
+  const START_OF_TODAY = startOfToday()
+  const START_OF_YESTERDAY = startOfYesterday()
+  const START_OF_TOMORROW = startOfTomorrow()
+
+  const START_OF_WEEK = startOfWeek(START_OF_TODAY, { weekStartsOn: 1 })
+  const END_OF_WEEK = endOfWeek(START_OF_TODAY, { weekStartsOn: 1 })
+  const START_OF_LAST_WEEK = subWeeks(START_OF_WEEK, 1)
+  const END_OF_LAST_WEEK = subWeeks(END_OF_WEEK, 1)
+  const START_OF_NEXT_WEEK = addWeeks(START_OF_WEEK, 1)
+  const END_OF_NEXT_WEEK = addWeeks(END_OF_WEEK, 1)
+
+  const START_OF_MONTH = startOfMonth(START_OF_TODAY)
+  const END_OF_MONTH = endOfMonth(START_OF_TODAY)
+  const START_OF_LAST_MONTH = subMonths(START_OF_MONTH, 1)
+  const END_OF_LAST_MONTH = subMonths(END_OF_MONTH, 1)
+  const START_OF_NEXT_MONTH = addMonths(START_OF_MONTH, 1)
+  const END_OF_NEXT_MONTH = addMonths(END_OF_MONTH, 1)
+
+  const START_OF_YEAR = startOfYear(START_OF_TODAY)
+  const END_OF_YEAR = endOfYear(START_OF_TODAY)
+
+  return {
+    day: [
+      {
+        label: 'Today',
+        value: START_OF_TODAY,
+      },
+      {
+        label: 'Yesterday',
+        value: START_OF_YESTERDAY,
+      },
+      {
+        label: 'Tomorrow',
+        value: START_OF_TOMORROW,
+      },
+      {
+        label: 'Next week',
+        value: START_OF_NEXT_WEEK,
+      },
+      {
+        label: 'Next month',
+        value: START_OF_NEXT_MONTH,
+      },
+      {
+        label: 'Custom',
+        value: START_OF_TODAY,
+      },
+    ],
+    range: [
+      {
+        label: 'This week',
+        value: [START_OF_WEEK, END_OF_WEEK],
+      },
+      {
+        label: 'Last week',
+        value: [START_OF_LAST_WEEK, END_OF_LAST_WEEK],
+      },
+      {
+        label: 'Next week',
+        value: [START_OF_NEXT_WEEK, END_OF_NEXT_WEEK],
+      },
+      {
+        label: 'This month',
+        value: [START_OF_MONTH, END_OF_MONTH],
+      },
+      {
+        label: 'Last month',
+        value: [START_OF_LAST_MONTH, END_OF_LAST_MONTH],
+      },
+      {
+        label: 'Next month',
+        value: [START_OF_NEXT_MONTH, END_OF_NEXT_MONTH],
+      },
+      {
+        label: 'This year',
+        value: [START_OF_YEAR, END_OF_YEAR],
+      },
+      {
+        label: 'Custom',
+        value: [START_OF_TODAY, START_OF_TODAY],
+      },
+    ],
+  }
+})()
diff --git a/packages/ui/src/components/DatePicker/index.ts b/packages/ui/src/components/DatePicker/index.ts
index a3bc49de..3fad14ba 100644
--- a/packages/ui/src/components/DatePicker/index.ts
+++ b/packages/ui/src/components/DatePicker/index.ts
@@ -1 +1,3 @@
 export { default as SDatePicker } from './SDatePicker.vue'
+
+export * from './types'
diff --git a/packages/ui/src/components/DatePicker/types.ts b/packages/ui/src/components/DatePicker/types.ts
index 5decd5d0..717d45a1 100644
--- a/packages/ui/src/components/DatePicker/types.ts
+++ b/packages/ui/src/components/DatePicker/types.ts
@@ -22,15 +22,15 @@ export interface StateStore {
   rangeState: RangeState
 }
 
-export interface PresetOption {
+export interface PresetOption<T> {
   label: string
-  value: RangeOptionValue | Date
+  value: T
 }
 
-export interface Options {
-  range: PresetOption[]
-  day: PresetOption[]
-  pick?: PresetOption[]
+export interface DatePickerOptions {
+  day?: PresetOption<Date>[]
+  range?: PresetOption<[Date, Date]>[]
+  pick?: PresetOption<Date[]>[]
 }
 
 export interface ShowState {