diff --git a/.changeset/cyan-rules-sparkle.md b/.changeset/cyan-rules-sparkle.md
new file mode 100644
index 000000000..8cfb313ca
--- /dev/null
+++ b/.changeset/cyan-rules-sparkle.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/date-picker": minor
+---
+
+feat: 新增前缀后缀内容扩展
diff --git a/.changeset/funny-zebras-pretend.md b/.changeset/funny-zebras-pretend.md
new file mode 100644
index 000000000..c02b91d3a
--- /dev/null
+++ b/.changeset/funny-zebras-pretend.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(date-picker): 新增前缀后缀内容扩展
diff --git a/packages/ui/date-picker/src/DatePicker.tsx b/packages/ui/date-picker/src/DatePicker.tsx
index 6524fb284..cdda14389 100644
--- a/packages/ui/date-picker/src/DatePicker.tsx
+++ b/packages/ui/date-picker/src/DatePicker.tsx
@@ -78,6 +78,7 @@ export const DatePicker = forwardRef<HTMLDivElement | null, DatePickerProps>(
       cellRender,
       footerRender,
       strideSelectMode = 'auto',
+      prefix,
       ...otherProps
     },
     ref
@@ -441,6 +442,7 @@ export const DatePicker = forwardRef<HTMLDivElement | null, DatePickerProps>(
             setAttachEl={setAttachEl}
             dateRangeTimePanelNow={dateRangeTimePanelNow}
             invalid={invalid}
+            prefix={prefix}
           />
           <Popper
             {...(overlay || {})}
diff --git a/packages/ui/date-picker/src/components/root.tsx b/packages/ui/date-picker/src/components/root.tsx
index aeab9c552..aec04983b 100644
--- a/packages/ui/date-picker/src/components/root.tsx
+++ b/packages/ui/date-picker/src/components/root.tsx
@@ -15,6 +15,7 @@ const Root = ({
   setAttachEl,
   dateRangeTimePanelNow,
   invalid,
+  prefix,
 }: {
   onTrigger: (index: number) => void
   onClear: () => void
@@ -23,6 +24,7 @@ const Root = ({
   inputChangeEvent: InputChangeEvent
   dateRangeTimePanelNow: number
   invalid: boolean
+  prefix: React.ReactNode
 }) => {
   const {
     i18n,
@@ -136,6 +138,7 @@ const Root = ({
   return (
     <div className={_cls} ref={setAttachEl}>
       <div className={`${prefixCls}__picker__wrapper`}>
+        {prefix ? <span className={`${prefixCls}__prefix`}>{prefix}</span> : null}
         <div
           className={cx(
             `${prefixCls}__input-selector`,
diff --git a/packages/ui/date-picker/src/styles/date-picker.scss b/packages/ui/date-picker/src/styles/date-picker.scss
index ce25dac02..fc5334d02 100644
--- a/packages/ui/date-picker/src/styles/date-picker.scss
+++ b/packages/ui/date-picker/src/styles/date-picker.scss
@@ -234,6 +234,16 @@ $calendar-large-background-border-radius: $calendar-large-indicator-border-radiu
     overflow: hidden;
   }
 
+  &__prefix {
+    display: inline-flex;
+    margin-left: use-spacing(6);
+    align-items: center;
+    flex-shrink: 0;
+    color: use-color('gray', 700);
+    font-size: inherit;
+    text-align: center;
+  }
+
   &__input-selector {
     display: flex;
     border-radius: use-border-radius('normal');
diff --git a/packages/ui/date-picker/src/types.ts b/packages/ui/date-picker/src/types.ts
index 5ccfa01fa..a27bdb622 100644
--- a/packages/ui/date-picker/src/types.ts
+++ b/packages/ui/date-picker/src/types.ts
@@ -283,4 +283,8 @@ export interface DatePickerProps extends Omit<HiBaseHTMLProps<'div'>, 'placehold
    * @default 'auto'
    */
   strideSelectMode?: 'auto' | 'fixed'
+  /**
+   * 选择框前置内容
+   */
+  prefix?: React.ReactNode
 }
diff --git a/packages/ui/date-picker/stories/addon.stories.tsx b/packages/ui/date-picker/stories/addon.stories.tsx
new file mode 100644
index 000000000..eaf00b8b3
--- /dev/null
+++ b/packages/ui/date-picker/stories/addon.stories.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import DatePicker from '../src'
+import { AppStoreOutlined } from '@hi-ui/icons'
+
+/**
+ * @title 前置后置内容扩展
+ */
+export const Addon = () => {
+  return (
+    <div className="date-picker-addon__wrap">
+      <h2>Addon</h2>
+      <DatePicker
+        style={{ width: 240 }}
+        onChange={(date, dateStr) => {
+          console.log('onChange', date, dateStr)
+        }}
+        onSelect={console.log}
+        prefix={<AppStoreOutlined />}
+      />
+    </div>
+  )
+}
diff --git a/packages/ui/date-picker/stories/index.stories.tsx b/packages/ui/date-picker/stories/index.stories.tsx
index 3ec21ef85..f8695174b 100644
--- a/packages/ui/date-picker/stories/index.stories.tsx
+++ b/packages/ui/date-picker/stories/index.stories.tsx
@@ -11,6 +11,7 @@ export * from './shortcut.stories'
 export * from './lunar.stories'
 export * from './size.stories'
 export * from './footer-render.stories'
+export * from './addon.stories'
 
 export default {
   title: 'Data Input/DatePicker',