diff --git a/examples/views/date-picker/DatePickerTest.vue b/examples/views/date-picker/DatePickerTest.vue
index a82277f4..2353b295 100644
--- a/examples/views/date-picker/DatePickerTest.vue
+++ b/examples/views/date-picker/DatePickerTest.vue
@@ -112,14 +112,17 @@
       <vxe-date-picker v-model="demo1.val6" placeholder="周选择，周五开始" type="week" :start-day="5" clearable></vxe-date-picker>
       <vxe-date-picker v-model="demo1.val7" placeholder="周选择，周六开始" type="week" :start-day="6" clearable></vxe-date-picker>
 
-      <vxe-date-picker v-model="demo1.val8" placeholder="可选日期限制" start-date="2000-01-01" end-date="2040-01-01"></vxe-date-picker>
+      <vxe-date-picker v-model="demo1.val8" placeholder="可选日期限制" start-date="2000-01-01" end-date="2040-01-01" :shortcut-config="shortcutConfig1"></vxe-date-picker>
+
+      <vxe-date-picker v-model="demo1.val828" placeholder="时:分" type="time" value-format="HH:mm" label-format="HH:mm" clearable></vxe-date-picker>
+      <vxe-date-picker v-model="demo1.val829" placeholder="时" type="time" value-format="HH" label-format="HH" clearable></vxe-date-picker>
     </p>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { reactive } from 'vue'
-import { VxeInputPropTypes, VxeInputDefines } from '../../../types'
+import { ref, reactive } from 'vue'
+import { VxeDatePickerPropTypes, VxeInputDefines } from '../../../types'
 import XEUtils from 'xe-utils'
 
 const demo1 = reactive({
@@ -183,10 +186,20 @@ const demo1 = reactive({
   value803: '',
   value804: '',
   value805: '',
-  value900: '11111111'
+  value900: '11111111',
+  val828: '',
+  val829: ''
+})
+
+const shortcutConfig1 = ref<VxeDatePickerPropTypes.ShortcutConfig>({
+  options: [
+    { content: '上一周' },
+    { content: '本周' },
+    { content: '下一周' }
+  ]
 })
 
-const disabledDateMethod: VxeInputPropTypes.DisabledMethod = (params) => {
+const disabledDateMethod: VxeDatePickerPropTypes.DisabledMethod = (params) => {
   const { date } = params
   const dd = date.getDate()
   return dd > 15
@@ -213,7 +226,7 @@ const noticeMaps: { [key: string]: VxeInputDefines.DateFestivalInfo } = {
     label: '游泳'
   }
 }
-const festivalNoticeMethod: VxeInputPropTypes.FestivalMethod = (params) => {
+const festivalNoticeMethod: VxeDatePickerPropTypes.FestivalMethod = (params) => {
   const { date, viewType } = params
   if (viewType === 'day') {
     const ymd = XEUtils.toDateString(date, 'yyyyMMdd')
@@ -271,7 +284,7 @@ const calendarMaps: { [key: string]: VxeInputDefines.DateFestivalInfo } = {
     }
   }
 }
-const festivalCalendarMethod: VxeInputPropTypes.FestivalMethod = (params) => {
+const festivalCalendarMethod: VxeDatePickerPropTypes.FestivalMethod = (params) => {
   const { date, viewType } = params
   if (viewType === 'day') {
     const ymd = XEUtils.toDateString(date, 'yyyyMMdd')
diff --git a/package.json b/package.json
index 33d64ea6..2a36e0ab 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.3.63",
+  "version": "4.3.64",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
diff --git a/packages/button/src/button-group.ts b/packages/button/src/button-group.ts
index 8440b5fa..7c7072df 100644
--- a/packages/button/src/button-group.ts
+++ b/packages/button/src/button-group.ts
@@ -14,6 +14,7 @@ export default defineComponent({
     round: Boolean as PropType<VxeButtonGroupPropTypes.Round>,
     vertical: Boolean as PropType<VxeButtonGroupPropTypes.Vertical>,
     circle: Boolean as PropType<VxeButtonGroupPropTypes.Circle>,
+    align: String as PropType<VxeButtonGroupPropTypes.Align>,
     className: [String, Function] as PropType<VxeButtonGroupPropTypes.ClassName>,
     disabled: Boolean as PropType<VxeButtonGroupPropTypes.Disabled>,
     permissionCode: [String, Number] as PropType<VxeButtonGroupPropTypes.PermissionCode>,
diff --git a/packages/button/src/button.ts b/packages/button/src/button.ts
index 86d235ff..bc0a75a8 100644
--- a/packages/button/src/button.ts
+++ b/packages/button/src/button.ts
@@ -195,6 +195,17 @@ export default defineComponent({
       return ''
     })
 
+    const computeBtnAlign = computed(() => {
+      const { align } = props
+      if (align) {
+        return align
+      }
+      if ($xeButtonGroup) {
+        return $xeButtonGroup.props.align
+      }
+      return false
+    })
+
     const computeBtnRound = computed(() => {
       const { round } = props
       if (round) {
@@ -551,12 +562,13 @@ export default defineComponent({
     Object.assign($xeButton, buttonMethods)
 
     const renderVN = () => {
-      const { className, popupClassName, align, trigger, title, routerLink, type, destroyOnClose, name, loading } = props
+      const { className, popupClassName, trigger, title, routerLink, type, destroyOnClose, name, loading } = props
       const { initialized, isAniVisible, visiblePanel } = reactData
       const isFormBtn = computeIsFormBtn.value
       const btnMode = computeBtnMode.value
       const btnStatus = computeBtnStatus.value
       const btnRound = computeBtnRound.value
+      const btnAlign = computeBtnAlign.value
       const btnCircle = computeBtnCircle.value
       const btnTransfer = computeBtnTransfer.value
       const btnDisabled = computeBtnDisabled.value
@@ -588,7 +600,7 @@ export default defineComponent({
           routerLink
             ? h(resolveComponent('router-link'), {
               ref: refButton,
-              class: ['vxe-button', 'vxe-button--link', `type--${btnMode}`, align ? `align--${align}` : '', className ? (XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className) : '', {
+              class: ['vxe-button', 'vxe-button--link', `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : '', className ? (XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className) : '', {
                 [`size--${vSize}`]: vSize,
                 [`theme--${btnStatus}`]: btnStatus,
                 'is--round': btnRound,
@@ -614,7 +626,7 @@ export default defineComponent({
             })
             : h('button', {
               ref: refButton,
-              class: ['vxe-button', `type--${btnMode}`, align ? `align--${align}` : '', className ? (XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className) : '', {
+              class: ['vxe-button', `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : '', className ? (XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className) : '', {
                 [`size--${vSize}`]: vSize,
                 [`theme--${btnStatus}`]: btnStatus,
                 'is--round': btnRound,
@@ -662,7 +674,7 @@ export default defineComponent({
       if (routerLink) {
         return h(resolveComponent('router-link'), {
           ref: refButton,
-          class: ['vxe-button', 'vxe-button--link', `type--${btnMode}`, align ? `align--${align}` : '', className ? (XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className) : '', {
+          class: ['vxe-button', 'vxe-button--link', `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : '', className ? (XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className) : '', {
             [`size--${vSize}`]: vSize,
             [`theme--${btnStatus}`]: btnStatus,
             'is--round': btnRound,
@@ -686,7 +698,7 @@ export default defineComponent({
       }
       return h('button', {
         ref: refButton,
-        class: ['vxe-button', `type--${btnMode}`, align ? `align--${align}` : '', className ? (XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className) : '', {
+        class: ['vxe-button', `type--${btnMode}`, btnAlign ? `align--${btnAlign}` : '', className ? (XEUtils.isFunction(className) ? className({ $button: $xeButton }) : className) : '', {
           [`size--${vSize}`]: vSize,
           [`theme--${btnStatus}`]: btnStatus,
           'is--round': btnRound,
diff --git a/packages/date-picker/src/date-picker.ts b/packages/date-picker/src/date-picker.ts
index 63bb22ba..c6900aa3 100644
--- a/packages/date-picker/src/date-picker.ts
+++ b/packages/date-picker/src/date-picker.ts
@@ -1,12 +1,13 @@
 import { defineComponent, h, Teleport, ref, Ref, computed, reactive, inject, nextTick, watch, onUnmounted, PropType, createCommentVNode } from 'vue'
 import XEUtils from 'xe-utils'
 import { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize, renderEmptyElement } from '../../ui'
-import { getFuncText, getLastZIndex, nextZIndex } from '../../ui/src/utils'
+import { getFuncText, getLastZIndex, nextZIndex, isEnableConf } from '../../ui/src/utils'
 import { getAbsolutePos, getEventTargetNode } from '../../ui/src/dom'
 import { toStringTimeDate, getDateQuarter } from './util'
 import { getSlotVNs } from '../..//ui/src/vn'
+import VxeButtonGroupComponent from '../../button/src/button-group'
 
-import type { VxeDatePickerConstructor, VxeDatePickerEmits, DatePickerInternalData, DatePickerReactData, VxeComponentStyleType, DatePickerMethods, VxeDatePickerPropTypes, DatePickerPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, ValueOf, VxeModalConstructor, VxeDrawerConstructor, VxeModalMethods, VxeDrawerMethods, VxeDatePickerDefines } from '../../../types'
+import type { VxeDatePickerConstructor, VxeDatePickerEmits, DatePickerInternalData, DatePickerReactData, VxeComponentStyleType, DatePickerMethods, VxeDatePickerPropTypes, DatePickerPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, ValueOf, VxeModalConstructor, VxeDrawerConstructor, VxeModalMethods, VxeDrawerMethods, VxeDatePickerDefines, VxeButtonGroupEvents } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
 
 export default defineComponent({
@@ -93,6 +94,8 @@ export default defineComponent({
       default: null
     },
 
+    shortcutConfig: Object as PropType<VxeDatePickerPropTypes.ShortcutConfig>,
+
     // 已废弃 startWeek，被 startDay 替换
     startWeek: Number as PropType<VxeDatePickerPropTypes.StartDay>,
     // 已废弃
@@ -115,7 +118,8 @@ export default defineComponent({
     'suffix-click',
     'date-prev',
     'date-today',
-    'date-next'
+    'date-next',
+    'shortcut-click'
   ] as VxeDatePickerEmits,
   setup (props, context) {
     const { slots, emit } = context
@@ -623,6 +627,10 @@ export default defineComponent({
       return immediate
     })
 
+    const computeShortcutOpts = computed(() => {
+      return Object.assign({}, getConfig().datePicker.shortcutConfig, props.shortcutConfig)
+    })
+
     const updateModelValue = (modelValue: VxeDatePickerPropTypes.ModelValue | undefined) => {
       const { isActivated, visiblePanel } = reactData
       let val: any = ''
@@ -640,23 +648,29 @@ export default defineComponent({
     }
 
     const parseDate = (value: VxeDatePickerPropTypes.ModelValue, format: string) => {
-      const { type } = props
+      const { type, multiple } = props
       if (type === 'time') {
         return toStringTimeDate(value)
       }
+      if (XEUtils.isArray(value)) {
+        return XEUtils.toStringDate(value[0], format)
+      }
+      if (XEUtils.isString(value)) {
+        return XEUtils.toStringDate(multiple ? XEUtils.last(value.split(',')) : value, format)
+      }
       return XEUtils.toStringDate(value, format)
     }
 
     const triggerEvent = (evnt: Event & { type: 'input' | 'change' | 'keydown' | 'keyup' | 'wheel' | 'click' | 'focus' | 'blur' }) => {
       const { inputValue } = reactData
-      datePickerMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt)
+      dispatchEvent(evnt.type, { value: inputValue }, evnt)
     }
 
     const handleChange = (value: string, evnt: Event | { type: string }) => {
       reactData.inputValue = value
       emit('update:modelValue', value)
       if (XEUtils.toValueString(props.modelValue) !== value) {
-        datePickerMethods.dispatchEvent('change', { value }, evnt as any)
+        dispatchEvent('change', { value }, evnt as any)
         // 自动更新校验状态
         if ($xeForm && formItemInfo) {
           $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value)
@@ -674,7 +688,7 @@ export default defineComponent({
         if (inpImmediate) {
           handleChange(value, evnt)
         } else {
-          datePickerMethods.dispatchEvent('input', { value }, evnt)
+          dispatchEvent('input', { value }, evnt)
         }
       }
     }
@@ -699,7 +713,7 @@ export default defineComponent({
       const isDisabled = computeIsDisabled.value
       if (!isDisabled) {
         const { inputValue } = reactData
-        datePickerMethods.dispatchEvent('prefix-click', { value: inputValue }, evnt)
+        dispatchEvent('prefix-click', { value: inputValue }, evnt)
       }
     }
 
@@ -719,14 +733,14 @@ export default defineComponent({
         hidePanel()
       }
       handleChange('', evnt)
-      datePickerMethods.dispatchEvent('clear', { value }, evnt)
+      dispatchEvent('clear', { value }, evnt)
     }
 
     const clickSuffixEvent = (evnt: Event) => {
       const isDisabled = computeIsDisabled.value
       if (!isDisabled) {
         const { inputValue } = reactData
-        datePickerMethods.dispatchEvent('suffix-click', { value: inputValue }, evnt)
+        dispatchEvent('suffix-click', { value: inputValue }, evnt)
       }
     }
 
@@ -803,7 +817,7 @@ export default defineComponent({
       }
     }
 
-    const dateChange = (date: Date) => {
+    const dateChange = (date: Date, isReload?: boolean) => {
       const { modelValue, multiple } = props
       const { datetimePanelValue } = reactData
       const isDateTimeType = computeIsDateTimeType.value
@@ -823,10 +837,9 @@ export default defineComponent({
       dateCheckMonth(date)
       if (multiple) {
         // 如果为多选
-        const dateMultipleValue = computeDateMultipleValue.value
         if (isDateTimeType) {
           // 如果是datetime特殊类型
-          const dateListValue = [...computeDateListValue.value]
+          const dateListValue = isReload ? [] : [...computeDateListValue.value]
           const datetimeRest: Date[] = []
           const eqIndex = XEUtils.findIndexOf(dateListValue, val => XEUtils.isDateSame(date, val, 'yyyyMMdd'))
           if (eqIndex === -1) {
@@ -846,6 +859,7 @@ export default defineComponent({
           })
           handleChange(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' })
         } else {
+          const dateMultipleValue = isReload ? [] : computeDateMultipleValue.value
           // 如果是日期类型
           if (dateMultipleValue.some(val => XEUtils.isEqual(val, inpVal))) {
             handleChange(dateMultipleValue.filter(val => !XEUtils.isEqual(val, inpVal)).join(','), { type: 'update' })
@@ -917,7 +931,7 @@ export default defineComponent({
       if (!reactData.visiblePanel) {
         reactData.isActivated = false
       }
-      datePickerMethods.dispatchEvent('blur', { value }, evnt)
+      dispatchEvent('blur', { value }, evnt)
       // 自动更新校验状态
       if ($xeForm && formItemInfo) {
         $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value)
@@ -949,7 +963,21 @@ export default defineComponent({
     }
 
     const dateNowHandle = () => {
-      const currentDate = XEUtils.getWhatDay(Date.now(), 0, 'first')
+      const { type } = props
+      const firstDayOfWeek = computeFirstDayOfWeek.value
+      let currentDate = new Date()
+      switch (type) {
+        case 'week':
+          currentDate = XEUtils.getWhatWeek(currentDate, 0, firstDayOfWeek)
+          break
+        case 'datetime':
+          currentDate = new Date()
+          reactData.datetimePanelValue = new Date()
+          break
+        default:
+          currentDate = XEUtils.getWhatDay(Date.now(), 0, 'first')
+          break
+      }
       reactData.currentDate = currentDate
       dateMonthHandle(currentDate, 0)
     }
@@ -990,17 +1018,17 @@ export default defineComponent({
           }
         }
         reactData.selectMonth = viewDate
-        datePickerMethods.dispatchEvent('date-prev', { viewType: datePanelType, viewDate, value, type }, evnt)
+        dispatchEvent('date-prev', { viewType: datePanelType, viewDate, value, type }, evnt)
       }
     }
 
     const dateTodayMonthEvent = (evnt: Event) => {
       dateNowHandle()
+      dateChange(reactData.currentDate, true)
       if (!props.multiple) {
-        dateChange(reactData.currentDate)
         hidePanel()
       }
-      datePickerMethods.dispatchEvent('date-today', { type: props.type }, evnt)
+      dispatchEvent('date-today', { type: props.type }, evnt)
     }
 
     const dateNextEvent = (evnt: Event) => {
@@ -1029,7 +1057,7 @@ export default defineComponent({
           }
         }
         reactData.selectMonth = viewDate
-        datePickerMethods.dispatchEvent('date-next', { viewType: datePanelType, value, type }, evnt)
+        dispatchEvent('date-next', { viewType: datePanelType, value, type }, evnt)
       }
     }
 
@@ -1278,17 +1306,25 @@ export default defineComponent({
             offsetMonth = XEUtils.getWhatMonth(offsetMonth, 4)
           }
           dateMoveMonth(offsetMonth)
-        } else {
+        } else if (datePanelType === 'week') {
           let offsetDay = datePanelValue || XEUtils.getWhatDay(Date.now(), 0, 'first')
           const firstDayOfWeek = computeFirstDayOfWeek.value
+          if (isUpArrow) {
+            offsetDay = XEUtils.getWhatWeek(offsetDay, -1, firstDayOfWeek)
+          } else if (isDwArrow) {
+            offsetDay = XEUtils.getWhatWeek(offsetDay, 1, firstDayOfWeek)
+          }
+          dateMoveDay(offsetDay)
+        } else {
+          let offsetDay = datePanelValue || XEUtils.getWhatDay(Date.now(), 0, 'first')
           if (isLeftArrow) {
             offsetDay = XEUtils.getWhatDay(offsetDay, -1)
           } else if (isUpArrow) {
-            offsetDay = XEUtils.getWhatWeek(offsetDay, -1, firstDayOfWeek)
+            offsetDay = XEUtils.getWhatWeek(offsetDay, -1, offsetDay.getDay() as VxeDatePickerPropTypes.StartDay)
           } else if (isRightArrow) {
             offsetDay = XEUtils.getWhatDay(offsetDay, 1)
           } else if (isDwArrow) {
-            offsetDay = XEUtils.getWhatWeek(offsetDay, 1, firstDayOfWeek)
+            offsetDay = XEUtils.getWhatWeek(offsetDay, 1, offsetDay.getDay() as VxeDatePickerPropTypes.StartDay)
           }
           dateMoveDay(offsetDay)
         }
@@ -1455,7 +1491,22 @@ export default defineComponent({
       triggerEvent(evnt)
     }
 
-    // 弹出面板
+    const handleShortcutEvent: VxeButtonGroupEvents.Click = ({ option, $event }) => {
+      const shortcutOpts = computeShortcutOpts.value
+      const { autoClose } = shortcutOpts
+      const clickMethod = (option as VxeDatePickerDefines.ShortcutOption).clickMethod || shortcutOpts.clickMethod
+      const shortcutParams = {
+        $datePicker: $xeDatePicker,
+        option: option as VxeDatePickerDefines.ShortcutOption
+      }
+      if (clickMethod) {
+        clickMethod(shortcutParams)
+      }
+      if (autoClose) {
+        hidePanel()
+      }
+      dispatchEvent('shortcut-click', shortcutParams, $event)
+    }
 
     // 全局事件
     const handleGlobalMousedownEvent = (evnt: Event) => {
@@ -1998,17 +2049,39 @@ export default defineComponent({
       ]
     }
 
+    const renderShortcutBtn = (pos: 'top' | 'bottom' | 'left' | 'right' | 'header' | 'footer', isVertical?: boolean) => {
+      const shortcutOpts = computeShortcutOpts.value
+      const { options, position, align, mode } = shortcutOpts
+      if (isEnableConf(shortcutOpts) && options && options.length && (position || 'left') === pos) {
+        return h('div', {
+          class: `vxe-date-picker--panel-${pos}-wrapper`
+        }, [
+          h(VxeButtonGroupComponent, {
+            options,
+            mode,
+            align,
+            vertical: isVertical,
+            onClick: handleShortcutEvent
+          })
+        ])
+      }
+      return renderEmptyElement($xeDatePicker)
+    }
+
     const renderPanel = () => {
       const { type } = props
       const { initialized, isAniVisible, visiblePanel, panelPlacement, panelStyle } = reactData
       const vSize = computeSize.value
       const btnTransfer = computeBtnTransfer.value
+      const shortcutOpts = computeShortcutOpts.value
+      const { options, position } = shortcutOpts
       const headerSlot = slots.header
       const footerSlot = slots.footer
       const topSlot = slots.top
       const bottomSlot = slots.bottom
       const leftSlot = slots.left
       const rightSlot = slots.right
+      const hasShortcutBtn = options && options.length
       const renders = []
       if (type === 'datetime') {
         renders.push(
@@ -2053,10 +2126,10 @@ export default defineComponent({
             'is--transfer': btnTransfer,
             'ani--leave': isAniVisible,
             'ani--enter': visiblePanel,
-            'show--top': !!(topSlot || headerSlot),
-            'show--bottom': !!(bottomSlot || footerSlot),
-            'show--left': !!leftSlot,
-            'show--right': !!rightSlot
+            'show--top': !!(topSlot || headerSlot || (hasShortcutBtn && (position === 'top' || position === 'header'))),
+            'show--bottom': !!(bottomSlot || footerSlot || (hasShortcutBtn && (position === 'bottom' || position === 'footer'))),
+            'show--left': !!(leftSlot || (hasShortcutBtn && position === 'left')),
+            'show--right': !!(rightSlot || (hasShortcutBtn && position === 'right'))
           }],
           placement: panelPlacement,
           style: panelStyle
@@ -2069,7 +2142,7 @@ export default defineComponent({
                   ? h('div', {
                     class: 'vxe-date-picker--panel-top-wrapper'
                   }, topSlot({}))
-                  : renderEmptyElement($xeDatePicker),
+                  : renderShortcutBtn('top'),
                 h('div', {
                   class: 'vxe-date-picker--panel-body-layout-wrapper'
                 }, [
@@ -2077,7 +2150,7 @@ export default defineComponent({
                     ? h('div', {
                       class: 'vxe-date-picker--panel-left-wrapper'
                     }, leftSlot({}))
-                    : renderEmptyElement($xeDatePicker),
+                    : renderShortcutBtn('left', true),
                   h('div', {
                     class: 'vxe-date-picker--panel-body-content-wrapper'
                   }, [
@@ -2085,7 +2158,7 @@ export default defineComponent({
                       ? h('div', {
                         class: 'vxe-date-picker--panel-header-wrapper'
                       }, headerSlot({}))
-                      : renderEmptyElement($xeDatePicker),
+                      : renderShortcutBtn('header'),
                     h('div', {
                       class: 'vxe-date-picker--panel-body-wrapper'
                     }, renders),
@@ -2093,19 +2166,19 @@ export default defineComponent({
                       ? h('div', {
                         class: 'vxe-date-picker--panel-footer-wrapper'
                       }, footerSlot({}))
-                      : renderEmptyElement($xeDatePicker)
+                      : renderShortcutBtn('footer')
                   ]),
                   rightSlot
                     ? h('div', {
                       class: 'vxe-date-picker--panel-right-wrapper'
                     }, rightSlot({}))
-                    : renderEmptyElement($xeDatePicker)
+                    : renderShortcutBtn('right', true)
                 ]),
                 bottomSlot
                   ? h('div', {
                     class: 'vxe-date-picker--panel-bottom-wrapper'
                   }, bottomSlot({}))
-                  : renderEmptyElement($xeDatePicker)
+                  : renderShortcutBtn('bottom')
               ])
             ]
           : [])
diff --git a/packages/ui/index.ts b/packages/ui/index.ts
index eecb3aa3..3a6471c9 100644
--- a/packages/ui/index.ts
+++ b/packages/ui/index.ts
@@ -91,7 +91,13 @@ setConfig({
     startDate: new Date(1900, 0, 1),
     endDate: new Date(2100, 0, 1),
     startDay: 1,
-    selectDay: 1
+    selectDay: 1,
+    shortcutConfig: {
+      // position: 'left',
+      align: 'left',
+      mode: 'text',
+      autoClose: true
+    }
   },
   drawer: {
     // size: null,
diff --git a/styles/components/button-group.scss b/styles/components/button-group.scss
index f047a38d..52ea97e4 100644
--- a/styles/components/button-group.scss
+++ b/styles/components/button-group.scss
@@ -2,8 +2,20 @@
   display: inline-flex;
   &.is--vertical {
     flex-direction: column;
-    .vxe-button {
-      margin: 0;
+    .vxe-button,
+    .vxe-button-wrapper {
+      &+.vxe-button-wrapper,
+      &+.vxe-button,
+      &+.vxe-button--dropdown {
+        margin-top: 0.5em;
+      }
+    }
+    .vxe-button--dropdown {
+      &+.vxe-button-wrapper,
+      &+.vxe-button,
+      &+.vxe-button--dropdown {
+        margin-top: 0.5em;
+      }
     }
   }
 }
diff --git a/styles/components/button.scss b/styles/components/button.scss
index b031ba80..b4cccb06 100644
--- a/styles/components/button.scss
+++ b/styles/components/button.scss
@@ -274,6 +274,13 @@ $btnThemeList: (
     margin-left: 0.72em;
   }
 }
+.vxe-button--dropdown {
+  &+.vxe-button-wrapper,
+  &+.vxe-button.type--button,
+  &+.vxe-button--dropdown {
+    margin-left: 0.72em;
+  }
+}
 .vxe-button--loading-icon,
 .vxe-button--icon {
   min-width: var(--vxe-ui-font-size-default);
@@ -300,11 +307,6 @@ $btnThemeList: (
 .vxe-button--dropdown {
   position: relative;
   outline: 0;
-  &+.vxe-button-wrapper,
-  &+.vxe-button.type--button,
-  &+.vxe-button--dropdown {
-    margin-left: 12px;
-  }
   & > .vxe-button {
     &.type--button {
       @for $index from 0 to list.length($btnThemeList) {
diff --git a/styles/components/date-picker.scss b/styles/components/date-picker.scss
index 0fcf9ec2..c9ced03d 100644
--- a/styles/components/date-picker.scss
+++ b/styles/components/date-picker.scss
@@ -418,6 +418,8 @@
     box-shadow: inset 0 -1px 0 0 var(--vxe-ui-base-popup-border-color);
   }
   td {
+    border: 1px solid transparent;
+    border-radius: 1em;
     &.is--prev,
     &.is--next {
       color: var(--vxe-ui-font-disabled-color);
@@ -427,7 +429,7 @@
       }
     }
     &.is--now {
-      box-shadow: inset 0 0 0 1px var(--vxe-ui-base-popup-border-color);
+      color: var(--vxe-ui-base-popup-border-color);
       &:not(.is--selected) {
         &.is--current {
           color: var(--vxe-ui-font-primary-color);
@@ -439,14 +441,21 @@
       }
     }
     &.is--hover {
-      background-color: var(--vxe-ui-input-date-picker-hover-background-color);
+      border-color: var(--vxe-ui-font-primary-color);
+      background-color: var(--vxe-ui-font-primary-tinge-color);
     }
     &.is--selected {
       color: var(--vxe-ui-input-date-picker-selected-color);
       background-color: var(--vxe-ui-font-primary-color);
+      &.is--hover {
+        box-shadow: 0 0px 6px 1px var(--vxe-ui-font-primary-color);
+      }
       &.is--prev,
       &.is--next {
-        background-color: var(--vxe-ui-font-primary-lighten-color);
+        .vxe-date-picker--date-label,
+        .vxe-date-picker--date-festival {
+          color: var(--vxe-ui-base-popup-border-color);
+        }
       }
       .vxe-date-picker--date-label,
       .vxe-date-picker--date-festival {
@@ -482,8 +491,23 @@
     }
   }
   td {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-left-width: 0;
+    border-right-width: 0;
     &:first-child {
-      box-shadow: inset -1px 0 0 0 var(--vxe-ui-base-popup-border-color);
+      border-bottom-left-radius: 1em;
+      border-top-left-radius: 1em;
+      border-left-width: 1px;
+      border-right-width: 1px;
+      border-right-color: var(--vxe-ui-base-popup-border-color);
+    }
+    &:last-child {
+      border-top-right-radius: 1em;
+      border-bottom-right-radius: 1em;
+      border-right-width: 1px;
     }
   }
 }
@@ -514,9 +538,8 @@
   position: absolute;
   right: 0.1em;
   top: -0.2em;
-  font-size: 12px;
-  line-height: 12px;
-  transform: scale(0.7);
+  font-size: 0.86em;
+  transform: scale(0.85);
   color: var(--vxe-ui-input-date-extra-color);
   &.is-important {
     color: var(--vxe-ui-input-date-extra-important-color);
@@ -526,7 +549,6 @@
 .vxe-date-picker--date-festival {
   color: var(--vxe-ui-input-date-festival-color);
   height: 14px;
-  line-height: 1;
   overflow: hidden;
   &.is-important {
     color: var(--vxe-ui-input-date-festival-important-color);
@@ -534,8 +556,8 @@
 }
 .vxe-date-picker--date-festival--label {
   display: block;
-  font-size: 12px;
-  transform: scale(0.8);
+  font-size: 0.86em;
+  transform: scale(0.9);
 }
 
 @keyframes festivalOverlap2 {
@@ -561,7 +583,7 @@
 
 .vxe-date-picker--date-festival--overlap {
   display: block;
-  font-size: 12px;
+  font-size: 0.86em;
   &.overlap--2 {
     animation: festivalOverlap2 6s infinite ease-in-out;
   }
diff --git a/types/components/button-group.d.ts b/types/components/button-group.d.ts
index 913d60c2..b1ec7797 100644
--- a/types/components/button-group.d.ts
+++ b/types/components/button-group.d.ts
@@ -1,5 +1,5 @@
 import { RenderFunction, SetupContext, Ref } from 'vue'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentSizeType, VxeComponentEventParams, VxeComponentPermissionCodeType, ValueOf } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentAlignType, VxeComponentSizeType, VxeComponentEventParams, VxeComponentPermissionCodeType, ValueOf } from '@vxe-ui/core'
 import { VxeButtonProps, VxeButtonPropTypes } from './button'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
@@ -30,6 +30,7 @@ export namespace VxeButtonGroupPropTypes {
   export type Round = boolean
   export type Vertical = boolean
   export type Circle = boolean
+  export type Align = VxeComponentAlignType
   export type Disabled = boolean
   export type Mode = VxeButtonPropTypes.Mode
   export type Status = VxeButtonPropTypes.Status
@@ -43,6 +44,7 @@ export type VxeButtonGroupProps = {
   mode?: VxeButtonGroupPropTypes.Mode
   status?: VxeButtonGroupPropTypes.Status
   round?: VxeButtonGroupPropTypes.Round
+  align?: VxeButtonGroupPropTypes.Align
   vertical?: VxeButtonGroupPropTypes.Vertical
   circle?: VxeButtonGroupPropTypes.Circle
   /**
diff --git a/types/components/button.d.ts b/types/components/button.d.ts
index 804dd421..2c6f5439 100644
--- a/types/components/button.d.ts
+++ b/types/components/button.d.ts
@@ -1,5 +1,5 @@
 import { RenderFunction, SetupContext, Ref } from 'vue'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, VxeComponentBaseOptions, DefineVxeComponentInstance, VxeComponentEventParams, VxeComponentPermissionCodeType, VxeComponentStatusType, VxeComponentSizeType, VxeComponentStyleType, ValueOf } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, VxeComponentBaseOptions, DefineVxeComponentInstance, VxeComponentAlignType, VxeComponentEventParams, VxeComponentPermissionCodeType, VxeComponentStatusType, VxeComponentSizeType, VxeComponentStyleType, ValueOf } from '@vxe-ui/core'
 import { VxeTooltipDefines } from './tooltip'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
@@ -49,7 +49,7 @@ export namespace VxeButtonPropTypes {
   export type Disabled = boolean
   export type Loading = boolean
   export type Trigger = 'manual' | 'hover' | 'click' | '' | null
-  export type Align = 'left' | 'center' | 'right' | '' | null
+  export type Align = VxeComponentAlignType
 
   export type PrefixTooltip = VxeTooltipDefines.TooltipHelperOption
   export type SuffixTooltip = VxeTooltipDefines.TooltipHelperOption
diff --git a/types/components/date-picker.d.ts b/types/components/date-picker.d.ts
index 96e52f5e..81475da8 100644
--- a/types/components/date-picker.d.ts
+++ b/types/components/date-picker.d.ts
@@ -1,5 +1,7 @@
 import { RenderFunction, SetupContext, Ref } from 'vue'
 import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentStyleType, VxeComponentSizeType } from '@vxe-ui/core'
+import { VxeButtonGroupPropTypes } from './button-group'
+import { VxeButtonProps } from './button'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
@@ -65,6 +67,19 @@ export namespace VxeDatePickerPropTypes {
   export type Placement = 'top' | 'bottom' | '' | null
   export type Transfer = boolean
 
+  export interface ShortcutConfig {
+    enabled?: boolean
+    position?: 'top' | 'bottom' | 'left' | 'right' | 'header' | 'footer' | null
+    align?: VxeButtonGroupPropTypes.Align
+    mode?: VxeButtonGroupPropTypes.Mode
+    options?: VxeDatePickerDefines.ShortcutOption[]
+    /**
+     * 点击按钮后自动关闭弹窗面板
+     */
+    autoClose?: boolean
+    clickMethod?: (params: VxeDatePickerDefines.ShortcutClickParams) => void
+  }
+
   /**
    * 请使用 AutoComplete
    * @deprecated
@@ -124,6 +139,8 @@ export interface VxeDatePickerProps {
   festivalMethod?: VxeDatePickerPropTypes.FestivalMethod
   disabledMethod?: VxeDatePickerPropTypes.DisabledMethod
 
+  shortcutConfig?: VxeDatePickerPropTypes.ShortcutConfig
+
   // week
   selectDay?: VxeDatePickerPropTypes.SelectDay
 
@@ -205,7 +222,8 @@ export type VxeDatePickerEmits = [
   'suffix-click',
   'date-prev',
   'date-today',
-  'date-next'
+  'date-next',
+  'shortcut-click'
 ]
 
 export namespace VxeDatePickerDefines {
@@ -257,6 +275,10 @@ export namespace VxeDatePickerDefines {
 
   export type DatePanelType = 'year' | 'quarter' | 'month' | 'week' | 'day'
 
+  export interface ShortcutOption extends VxeButtonProps {
+    clickMethod?: (params: VxeDatePickerDefines.ShortcutClickParams) => void
+  }
+
   interface DateFestivalItem {
     /**
      * 显示名称
@@ -305,21 +327,30 @@ export namespace VxeDatePickerDefines {
 
   export interface ChangeParams extends DatePickerParams {}
   export interface ChangeEventParams extends DatePickerEventParams, ChangeParams { }
+
+  export interface ShortcutClickParams {
+    $datePicker: VxeDatePickerConstructor
+    option: VxeDatePickerDefines.ShortcutOption
+  }
+  export interface ShortcutClickEventParams extends DatePickerEventParams, ShortcutClickParams {}
 }
 
 export type VxeDatePickerEventProps = {
   onInput?: VxeDatePickerEvents.Input
   onChange?: VxeDatePickerEvents.Change
+  onShortcutClick?: VxeDatePickerEvents.ShortcutClick
 }
 
 export interface VxeDatePickerListeners {
   input?: VxeDatePickerEvents.Input
   change?: VxeDatePickerEvents.Change
+  shortcutClick?: VxeDatePickerEvents.ShortcutClick
 }
 
 export namespace VxeDatePickerEvents {
   export type Input = (params: VxeDatePickerDefines.InputEventParams) => void
   export type Change = (params: VxeDatePickerDefines.ChangeEventParams) => void
+  export type ShortcutClick = (params: VxeDatePickerDefines.ShortcutClickEventParams) => void
 }
 
 export namespace VxeDatePickerSlotTypes {