From 55d8249506b98fa63f40bc597c42cb1cc73bdb82 Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Sun, 24 Dec 2023 20:50:03 +0800
Subject: [PATCH 1/5] =?UTF-8?q?feat(date-picker):=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=AD=A3=E5=BA=A6=E9=80=89=E6=8B=A9=20(#2695)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/date-picker/src/DatePicker.tsx    |  6 +-
 .../date-picker/src/components/calendar.tsx   |  6 +-
 .../ui/date-picker/src/components/header.tsx  |  6 +-
 .../ui/date-picker/src/components/input.tsx   |  4 ++
 .../ui/date-picker/src/components/panel.tsx   |  9 +++
 .../src/components/range-panel.tsx            |  3 +
 .../date-picker/src/hooks/useCalenderData.tsx | 62 ++++++++++++++++++-
 .../ui/date-picker/src/hooks/useFormat.ts     |  2 +-
 .../src/hooks/useTimePickerFormat.ts          |  2 +-
 .../date-picker/src/styles/date-picker.scss   |  8 +++
 packages/ui/date-picker/src/types.ts          |  4 +-
 .../ui/date-picker/src/utils/constants.ts     |  7 +++
 packages/ui/date-picker/src/utils/index.tsx   |  5 +-
 .../ui/date-picker/stories/range.stories.tsx  | 10 +++
 .../stories/year-month-week.stories.tsx       | 10 +++
 15 files changed, 131 insertions(+), 13 deletions(-)

diff --git a/packages/ui/date-picker/src/DatePicker.tsx b/packages/ui/date-picker/src/DatePicker.tsx
index 45a651365..4900daa4c 100644
--- a/packages/ui/date-picker/src/DatePicker.tsx
+++ b/packages/ui/date-picker/src/DatePicker.tsx
@@ -229,8 +229,8 @@ export const DatePicker = forwardRef<HTMLDivElement | null, DatePickerProps>(
             end: _dates[1]?.toDate(),
           }
           returnDateStr = {
-            start: _dates[0]?.format(realFormat),
-            end: _dates[1]?.format(realFormat),
+            start: _dates[0]?.format(realFormat).toLocaleUpperCase(),
+            end: _dates[1]?.format(realFormat).toLocaleUpperCase(),
           }
           compareNumber = 2
         } else if (type.includes('week')) {
@@ -259,7 +259,7 @@ export const DatePicker = forwardRef<HTMLDivElement | null, DatePickerProps>(
             : getWeekString(_dates[0])
         } else {
           returnDate = _dates[0]?.toDate()
-          returnDateStr = _dates[0]?.format(realFormat)
+          returnDateStr = _dates[0]?.format(realFormat).toLocaleUpperCase()
         }
 
         // 只有发生了改变，才会去通知外部
diff --git a/packages/ui/date-picker/src/components/calendar.tsx b/packages/ui/date-picker/src/components/calendar.tsx
index 729afca3c..28796d89d 100644
--- a/packages/ui/date-picker/src/components/calendar.tsx
+++ b/packages/ui/date-picker/src/components/calendar.tsx
@@ -135,6 +135,10 @@ const Calendar = ({
         _date.add(1, 'months')
       }
 
+      if (type.includes('quarter')) {
+        _date.quarter(clickVal)
+      }
+
       _date[view](clickVal)
     } else {
       // 点击的上个月的部分，鼠标还在本月的panel上，则视作，鼠标正在本月第一天
@@ -213,7 +217,7 @@ const Calendar = ({
     }, 2000) as any
   }
   const renderAltCalendar = (cell: CalendarColInfo, isBelongFullOutOfRange: string) => {
-    if (view.includes('year') || view.includes('month')) return
+    if (view.includes('year') || view.includes('month') || view.includes('quarter')) return
     if (
       Object.keys(altCalendarPresetData).length > 0 ||
       Object.keys(dateMarkPresetData).length > 0 ||
diff --git a/packages/ui/date-picker/src/components/header.tsx b/packages/ui/date-picker/src/components/header.tsx
index de2514ab7..9583a3307 100644
--- a/packages/ui/date-picker/src/components/header.tsx
+++ b/packages/ui/date-picker/src/components/header.tsx
@@ -20,7 +20,7 @@ const getHeaderCenterContent = (
   if (view === 'year') {
     return year - 4 + '~' + (year + 7)
   }
-  if (view === 'month') {
+  if (view === 'month' || view === 'quarter') {
     return year
   }
 
@@ -71,7 +71,7 @@ const Header = ({
           >
             <DirectionLeftOutlined />
           </span>
-          {view !== 'year' && view !== 'month' && (
+          {view !== 'year' && view !== 'month' && view !== 'quarter' && (
             <span
               className={`${prefixCls}__header-icon`}
               onClick={() => headerChangeDateEvent('months', -1)}
@@ -91,7 +91,7 @@ const Header = ({
       </span>
       {
         <div className={`${prefixCls}__header-btns`}>
-          {view !== 'year' && view !== 'month' && (
+          {view !== 'year' && view !== 'month' && view !== 'quarter' && (
             <span
               onClick={() => headerChangeDateEvent('months', 1)}
               className={`${prefixCls}__header-icon`}
diff --git a/packages/ui/date-picker/src/components/input.tsx b/packages/ui/date-picker/src/components/input.tsx
index 35418ab35..d6b5dc635 100644
--- a/packages/ui/date-picker/src/components/input.tsx
+++ b/packages/ui/date-picker/src/components/input.tsx
@@ -64,6 +64,10 @@ const Input = ({
       }
     }
 
+    if (type.includes('quarter') && vals) {
+      vals = vals?.toLocaleUpperCase()
+    }
+
     setValue(vals)
 
     cacheValues.current = vals
diff --git a/packages/ui/date-picker/src/components/panel.tsx b/packages/ui/date-picker/src/components/panel.tsx
index 75e075966..f9573dc55 100644
--- a/packages/ui/date-picker/src/components/panel.tsx
+++ b/packages/ui/date-picker/src/components/panel.tsx
@@ -74,6 +74,12 @@ const Panel = (props: PanelProps) => {
         )
         return
       }
+
+      if (type === 'quarter') {
+        onPick([date], false)
+        return
+      }
+
       if (type === 'week' && view === 'date') {
         // week picker
         // 根据偏移判断当前使用的周格式
@@ -87,6 +93,9 @@ const Panel = (props: PanelProps) => {
       if (view === 'year') {
         _view = 'month'
       }
+      if (view === 'quarter') {
+        _view = 'quarter'
+      }
       if (view === 'month') {
         _view = 'date'
       }
diff --git a/packages/ui/date-picker/src/components/range-panel.tsx b/packages/ui/date-picker/src/components/range-panel.tsx
index 417217bb8..13eae0de6 100644
--- a/packages/ui/date-picker/src/components/range-panel.tsx
+++ b/packages/ui/date-picker/src/components/range-panel.tsx
@@ -173,6 +173,9 @@ const RangePanel = () => {
     if (views[uIndex] === 'year' && !type.includes('year')) {
       _views[uIndex] = 'month'
     }
+    if (views[uIndex] === 'quarter' && !type.includes('quarter')) {
+      _views[uIndex] = 'quarter'
+    }
     setViews(_views)
   }
 
diff --git a/packages/ui/date-picker/src/hooks/useCalenderData.tsx b/packages/ui/date-picker/src/hooks/useCalenderData.tsx
index a74f12dee..1a66b5fa6 100644
--- a/packages/ui/date-picker/src/hooks/useCalenderData.tsx
+++ b/packages/ui/date-picker/src/hooks/useCalenderData.tsx
@@ -40,6 +40,63 @@ const getYearOrMonthRows = ({
     formatRange.end = temp
   }
 
+  if (type.includes('quarter')) {
+    const quarterColData: CalendarColInfo[] = []
+    for (let i = 0; i < 4; i++) {
+      const value = i + 1
+      const col = {
+        type: 'normal',
+        text: `Q${i + 1}`,
+        range: false,
+        value,
+      } as CalendarColInfo
+
+      if (current.year() === renderDate?.year() && originDate?.quarter() === value) {
+        col.type = 'selected'
+      }
+
+      if (current.year() === renderDate?.year() && current.quarter() === value) {
+        col.type = 'today'
+      }
+
+      if (disabledDate?.(_date.quarter(value).toDate(), 'quarter')) {
+        col.type = 'disabled'
+      }
+
+      const currentYM = (_date as any)[view](value)
+
+      if (
+        range?.start &&
+        range?.end &&
+        (currentYM.isBetween(formatRange.start, formatRange.end) ||
+          currentYM.isBetween(formatRange.end, formatRange.start))
+      ) {
+        col.range = true
+      }
+      if (formatRange?.start && currentYM.isSame(formatRange.start, view)) {
+        col.type = 'selected'
+        col.range = false
+        col.rangeStart = true
+        // 当前，存在开始，结束不存在，范围选择现在只选择了一个值，视作，开始结束为同一个
+        if (!formatRange.end) {
+          col.rangeEnd = true
+        }
+      }
+      if (formatRange?.end && currentYM.isSame(formatRange.end, view)) {
+        col.type = 'selected'
+        col.range = false
+        col.rangeEnd = true
+        // 当前，存在结束，开始不存在，范围选择现在只选择了一个值，视作，开始结束为同一个
+        if (!formatRange.start) {
+          col.rangeEnd = true
+        }
+      }
+
+      quarterColData.push(col)
+    }
+    return [quarterColData] as CalendarRowInfo[]
+  }
+
   const monthText = i18n.get('datePicker.month')
 
   for (let i = 0; i < 4; i++) {
@@ -188,6 +245,7 @@ const getYearOrMonthRows = ({
       }
     }
   }
+
   return trs
 }
 const getTime = (week: number, y: number, m: number) => {
@@ -422,9 +480,10 @@ const useDate = ({
   range?: CalenderSelectedRange
 }) => {
   const [rows, setRows] = useState<CalendarRowInfo[]>([])
+
   useEffect(() => {
     const _rows =
-      view.includes('month') || view.includes('year')
+      view.includes('month') || view.includes('year') || view.includes('quarter')
         ? getYearOrMonthRows({
             originDate,
             renderDate,
@@ -446,6 +505,7 @@ const useDate = ({
             renderDate,
             disabledDate,
           })
+
     setRows(_rows)
   }, [renderDate, view, range, type, disabledDate, i18n, max, min, weekOffset, originDate])
 
diff --git a/packages/ui/date-picker/src/hooks/useFormat.ts b/packages/ui/date-picker/src/hooks/useFormat.ts
index 79b2a787a..3d21e415f 100644
--- a/packages/ui/date-picker/src/hooks/useFormat.ts
+++ b/packages/ui/date-picker/src/hooks/useFormat.ts
@@ -17,7 +17,7 @@ const useFormat = (config: UseFormatConfig) => {
   const { type, showTime, format, locale = 'zh-CN' } = config
 
   return useMemo(() => {
-    let realFormat = format || getLocaleTypeFormatMap(locale)[type]
+    let realFormat = format || getLocaleTypeFormatMap(locale)[type] || ''
     if (showTime && !/[H|h|m|s]/.test(realFormat)) {
       realFormat += ' HH:mm:ss'
     }
diff --git a/packages/ui/date-picker/src/hooks/useTimePickerFormat.ts b/packages/ui/date-picker/src/hooks/useTimePickerFormat.ts
index 205999a4e..8c36c2989 100644
--- a/packages/ui/date-picker/src/hooks/useTimePickerFormat.ts
+++ b/packages/ui/date-picker/src/hooks/useTimePickerFormat.ts
@@ -2,7 +2,7 @@ import { useMemo } from 'react'
 import { TimePickerFormat } from '@hi-ui/time-picker'
 
 export const useTimePickerFormat = (original: string) => {
-  const timeFormat = original.split(' ')[1] ?? ''
+  const timeFormat = original?.split(' ')[1] ?? ''
 
   return useMemo(() => {
     let result = ''
diff --git a/packages/ui/date-picker/src/styles/date-picker.scss b/packages/ui/date-picker/src/styles/date-picker.scss
index 720a605ff..ce25dac02 100644
--- a/packages/ui/date-picker/src/styles/date-picker.scss
+++ b/packages/ui/date-picker/src/styles/date-picker.scss
@@ -378,6 +378,14 @@ $calendar-large-background-border-radius: $calendar-large-indicator-border-radiu
         }
       }
     }
+
+    &--quarter {
+      .#{$prefix}__cell {
+        &-text {
+          width: 52px;
+        }
+      }
+    }
   }
 
   &__cell {
diff --git a/packages/ui/date-picker/src/types.ts b/packages/ui/date-picker/src/types.ts
index 3d6bdd7b4..5281c1d37 100644
--- a/packages/ui/date-picker/src/types.ts
+++ b/packages/ui/date-picker/src/types.ts
@@ -5,7 +5,7 @@ import { TimePickerPanelType } from '@hi-ui/time-picker'
 import { CalendarColInfo } from './hooks/useCalenderData'
 import { Moment } from 'moment'
 
-export type CalendarViewEnum = 'date' | 'year' | 'month'
+export type CalendarViewEnum = 'date' | 'year' | 'month' | 'quarter'
 
 export interface DateRange {
   start: Date | string | number | undefined | null
@@ -93,10 +93,12 @@ export type DatePickerTypeEnum =
   | 'year'
   | 'month'
   | 'week'
+  | 'quarter'
   | 'weekrange'
   | 'timeperiod'
   | 'yearrange'
   | 'monthrange'
+  | 'quarterrange'
 
 export type DatePickerAltCalendarPresetEnum = 'zh-CN' | 'id-ID'
 
diff --git a/packages/ui/date-picker/src/utils/constants.ts b/packages/ui/date-picker/src/utils/constants.ts
index f666b9da9..eaf04dd9b 100644
--- a/packages/ui/date-picker/src/utils/constants.ts
+++ b/packages/ui/date-picker/src/utils/constants.ts
@@ -15,6 +15,8 @@ export const GranularityMap: {
   weekrange: 'date',
   month: 'month',
   monthrange: 'month',
+  quarter: 'quarter',
+  quarterrange: 'quarter',
   timeperiod: 'second',
 }
 /**
@@ -26,6 +28,7 @@ export const getLocaleTypeFormatMap = (locale: string) => {
     ? {
         date: 'YYYY-MM-DD',
         month: 'YYYY-MM',
+        quarter: 'YYYY-qQ',
         year: 'YYYY',
         time: 'HH:mm:ss',
         timerange: 'HH:mm:ss',
@@ -34,6 +37,7 @@ export const getLocaleTypeFormatMap = (locale: string) => {
         weekrange: 'YYYY-WW',
         timeperiod: 'YYYY-MM-DD HH:mm:ss',
         monthrange: 'YYYY-MM',
+        quarterrange: 'YYYY-qQ',
         yearrange: 'YYYY',
       }
     : {
@@ -47,6 +51,7 @@ export const getLocaleTypeFormatMap = (locale: string) => {
         weekrange: 'wo/YYYY',
         timeperiod: 'MM/DD/YYYY HH:mm:ss',
         monthrange: 'MM/YYYY',
+        quarterrange: 'qQ/YYYY',
         yearrange: 'YYYY',
       }
 }
@@ -54,6 +59,7 @@ export const getLocaleTypeFormatMap = (locale: string) => {
 export const INPUTTYPES = {
   date: 'normal',
   month: 'normal',
+  quarter: 'normal',
   year: 'normal',
   time: 'normal',
   timerange: 'range',
@@ -62,5 +68,6 @@ export const INPUTTYPES = {
   weekrange: 'range',
   timeperiod: 'range',
   monthrange: 'range',
+  quarterrange: 'range',
   yearrange: 'range',
 }
diff --git a/packages/ui/date-picker/src/utils/index.tsx b/packages/ui/date-picker/src/utils/index.tsx
index 6f498e798..e6d7f1fca 100644
--- a/packages/ui/date-picker/src/utils/index.tsx
+++ b/packages/ui/date-picker/src/utils/index.tsx
@@ -45,7 +45,7 @@ export const deconstructDate = (original: Date | string | number | null) => {
  * @param {String} type
  */
 export const getView = (type: DatePickerTypeEnum) => {
-  return (type.includes('year') || type.includes('month')
+  return (type.includes('year') || type.includes('month') || type.includes('quarter')
     ? type.split('range')[0]
     : 'date') as CalendarViewEnum
 }
@@ -69,6 +69,7 @@ export const genNewDates = (currentDates: moment.Moment[], newDate: moment.Momen
  */
 export const parseRenderDates = (dates: (moment.Moment | null)[], type: DatePickerTypeEnum) => {
   let [leftDate, rightDate] = cloneDeep(dates)
+
   const getRightDate = () => {
     if (type === 'yearrange') {
       if (!rightDate) {
@@ -89,7 +90,7 @@ export const parseRenderDates = (dates: (moment.Moment | null)[], type: DatePick
 
       return moment(leftDate).add(12 * crossingPanelNumber, 'year')
     }
-    if (type === 'monthrange') {
+    if (type === 'monthrange' || type === 'quarterrange') {
       return moment(leftDate).add(1, 'year')
     }
     if (!rightDate || leftDate?.isSame(rightDate, 'month')) {
diff --git a/packages/ui/date-picker/stories/range.stories.tsx b/packages/ui/date-picker/stories/range.stories.tsx
index baf8f1ba5..2973e26ec 100644
--- a/packages/ui/date-picker/stories/range.stories.tsx
+++ b/packages/ui/date-picker/stories/range.stories.tsx
@@ -47,6 +47,16 @@ export const Range = () => {
           }}
         />
 
+        <h2>季度</h2>
+        <DatePicker
+          style={{ width: 480 }}
+          type="quarterrange"
+          defaultValue={[new Date(), new Date()]}
+          onChange={(date, dateStr) => {
+            console.log('onChange', date, dateStr)
+          }}
+        />
+
         <h2>月份</h2>
         <DatePicker
           style={{ width: 480 }}
diff --git a/packages/ui/date-picker/stories/year-month-week.stories.tsx b/packages/ui/date-picker/stories/year-month-week.stories.tsx
index 126631f5f..a638445c8 100644
--- a/packages/ui/date-picker/stories/year-month-week.stories.tsx
+++ b/packages/ui/date-picker/stories/year-month-week.stories.tsx
@@ -18,6 +18,16 @@ export const YearMonthWeek = () => {
             console.log('onChange', date, dateStr)
           }}
         />
+
+        <h2>季度</h2>
+        <DatePicker
+          style={{ width: 238 }}
+          type="quarter"
+          onChange={(date, dateStr) => {
+            console.log('onChange', date, dateStr)
+          }}
+        />
+
         <h2>月份</h2>
         <DatePicker
           style={{ width: 238 }}

From 3fbbded0499bd297eb8eefcb5537aadf4516164a Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Tue, 26 Dec 2023 15:52:53 +0800
Subject: [PATCH 2/5] feat(date-picker):  add onPanelChange api

---
 packages/ui/date-picker/src/DatePicker.tsx             | 2 ++
 packages/ui/date-picker/src/components/panel.tsx       | 4 ++--
 packages/ui/date-picker/src/components/range-panel.tsx | 3 ++-
 packages/ui/date-picker/src/context.ts                 | 1 +
 packages/ui/date-picker/src/types.ts                   | 4 ++++
 5 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/ui/date-picker/src/DatePicker.tsx b/packages/ui/date-picker/src/DatePicker.tsx
index 4900daa4c..054f10120 100644
--- a/packages/ui/date-picker/src/DatePicker.tsx
+++ b/packages/ui/date-picker/src/DatePicker.tsx
@@ -64,6 +64,7 @@ export const DatePicker = forwardRef<HTMLDivElement | null, DatePickerProps>(
       maxDate: max = null,
       minDate: min = null,
       onSelect: propsOnSelectOriginal,
+      onPanelChange,
       theme,
       disabledHours = DEFAULT_DISABLED_FUNCTION,
       disabledMinutes = DEFAULT_DISABLED_FUNCTION,
@@ -416,6 +417,7 @@ export const DatePicker = forwardRef<HTMLDivElement | null, DatePickerProps>(
           value,
           disabledDate,
           onSelect,
+          onPanelChange,
           prefixCls,
           showPanel,
           isInDateRangeTimeMode,
diff --git a/packages/ui/date-picker/src/components/panel.tsx b/packages/ui/date-picker/src/components/panel.tsx
index f9573dc55..6382ad146 100644
--- a/packages/ui/date-picker/src/components/panel.tsx
+++ b/packages/ui/date-picker/src/components/panel.tsx
@@ -30,6 +30,7 @@ const Panel = (props: PanelProps) => {
     weekOffset,
     locale,
     onSelect,
+    onPanelChange,
     hourStep,
     minuteStep,
     secondStep,
@@ -144,8 +145,7 @@ const Panel = (props: PanelProps) => {
     const _innerDates = genNewDates(calRenderDates, date)
     if (type.includes('range') && _innerDates[0] >= _innerDates[1]) return
     setCalRenderDates(_innerDates)
-    // 左右切换年或月时触发 onSelect 回调
-    onSelect(date.toDate(), true)
+    onPanelChange?.(date.toDate())
   }
 
   return (
diff --git a/packages/ui/date-picker/src/components/range-panel.tsx b/packages/ui/date-picker/src/components/range-panel.tsx
index 13eae0de6..180b6bfa5 100644
--- a/packages/ui/date-picker/src/components/range-panel.tsx
+++ b/packages/ui/date-picker/src/components/range-panel.tsx
@@ -27,6 +27,7 @@ const RangePanel = () => {
     theme,
     locale,
     onSelect,
+    onPanelChange,
     hourStep,
     minuteStep,
     secondStep,
@@ -220,7 +221,7 @@ const RangePanel = () => {
       return
     }
     setCalRenderDates(_innerDates)
-    onSelect(date as any, !calendarClickIsEnd.current)
+    onPanelChange?.(date.toDate())
   }
   const onTimePeriodPick = useCallback(
     (ts1: string, ts2: string) => {
diff --git a/packages/ui/date-picker/src/context.ts b/packages/ui/date-picker/src/context.ts
index 2248dcc9c..28045689f 100644
--- a/packages/ui/date-picker/src/context.ts
+++ b/packages/ui/date-picker/src/context.ts
@@ -60,5 +60,6 @@ export interface DPContextData extends ExtendsType {
   value: DatePickerValueV3
   // 内部现在暂时使用 v3 的数据格式
   altCalendar?: CalendarItemV3[]
+  onPanelChange?: (data: Date) => void
 }
 export default DPContext
diff --git a/packages/ui/date-picker/src/types.ts b/packages/ui/date-picker/src/types.ts
index 5281c1d37..337b6a18b 100644
--- a/packages/ui/date-picker/src/types.ts
+++ b/packages/ui/date-picker/src/types.ts
@@ -237,6 +237,10 @@ export interface DatePickerProps extends Omit<HiBaseHTMLProps<'div'>, 'placehold
    * 选择后的回调，(date: 选中的日期，dateStr: 选中的日期字符串) => void
    */
   onChange?: (date: Date | Date[] | null, dateStr: string | string[] | null) => void
+  /**
+   * 日期面板改变时的回调函数
+   */
+  onPanelChange?: (data: Date) => void
   /**
    * 不同 UI 外观
    * @default 'line'

From a597ab217045066ea33375aac0fcff5a7287ecd0 Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Tue, 26 Dec 2023 16:23:09 +0800
Subject: [PATCH 3/5] =?UTF-8?q?feat(locale-context):=20=E8=A1=A5=E5=85=85?=
 =?UTF-8?q?=E6=97=A5=E6=9C=9F=E8=AF=AD=E8=A8=80=E5=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/locale-context/src/locale/en-US.ts | 13 +++++++++----
 packages/ui/locale-context/src/locale/zh-CN.ts | 12 ++++++++----
 packages/ui/locale-context/src/locale/zh-HK.ts | 12 ++++++++----
 packages/ui/locale-context/src/locale/zh-TW.ts | 12 ++++++++----
 4 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/packages/ui/locale-context/src/locale/en-US.ts b/packages/ui/locale-context/src/locale/en-US.ts
index f0ef4f43b..9808a852d 100644
--- a/packages/ui/locale-context/src/locale/en-US.ts
+++ b/packages/ui/locale-context/src/locale/en-US.ts
@@ -33,14 +33,19 @@ export default {
     ],
     week: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
     placeholders: {
-      date: ['Select Date'],
-      month: ['Select Month'],
       year: ['Select Year'],
-      time: ['Select Time'],
-      daterange: ['Select Start Date', 'Select End Date'],
+      quarter: ['Select Quarter'],
+      month: ['Select Month'],
       week: ['Select Week'],
+      date: ['Select Date'],
+      time: ['Select Time'],
+      yearrange: ['Select Start Year', 'Select End Year'],
+      quarterrange: ['Select Start Quarter', 'Select End Quarter'],
+      monthrange: ['Select Start Month', 'Select End Month'],
       weekrange: ['Select Start Week', 'Select End Week'],
+      daterange: ['Select Start Date', 'Select End Date'],
       timeperiod: ['Select Start Date Time', 'Select Start End Time'],
+      timerange: ['Select Start Date Time', 'Select Start End Time'],
     },
     timePeriod: 'Period',
     hours: 'H',
diff --git a/packages/ui/locale-context/src/locale/zh-CN.ts b/packages/ui/locale-context/src/locale/zh-CN.ts
index db86cedb7..b4d66a85e 100644
--- a/packages/ui/locale-context/src/locale/zh-CN.ts
+++ b/packages/ui/locale-context/src/locale/zh-CN.ts
@@ -46,13 +46,17 @@ export default {
     ],
     week: ['日', '一', '二', '三', '四', '五', '六'],
     placeholders: {
-      date: ['请选择日期'],
-      month: ['请选择月'],
       year: ['请选择年'],
-      time: ['请选择时间'],
-      daterange: ['开始日期', '结束日期'],
+      quarter: ['请选择季度'],
+      month: ['请选择月'],
       week: ['请选择周'],
+      date: ['请选择日期'],
+      time: ['请选择时间'],
+      yearrange: ['开始年', '结束年'],
+      quarterrange: ['开始季度', '结束季度'],
+      monthrange: ['开始月', '结束月'],
       weekrange: ['开始周', '结束周'],
+      daterange: ['开始日期', '结束日期'],
       timeperiod: ['开始时间', '结束时间'],
       timerange: ['请选择开始时间', '请选择结束时间'],
     },
diff --git a/packages/ui/locale-context/src/locale/zh-HK.ts b/packages/ui/locale-context/src/locale/zh-HK.ts
index 997470eb1..51d41e2aa 100644
--- a/packages/ui/locale-context/src/locale/zh-HK.ts
+++ b/packages/ui/locale-context/src/locale/zh-HK.ts
@@ -46,13 +46,17 @@ export default {
     ],
     week: ['日', '壹', '二', '三', '四', '五', '六'],
     placeholders: {
-      date: ['請選擇日期'],
-      month: ['請選擇月'],
       year: ['請選擇年'],
-      time: ['請選擇時間'],
-      daterange: ['開始日期', '結束日期'],
+      quarter: ['請選擇季度'],
+      month: ['請選擇月'],
       week: ['請選擇周'],
+      date: ['請選擇日期'],
+      time: ['請選擇時間'],
+      yearrange: ['開始年', '結束年'],
+      quarterrange: ['開始季度', '結束季度'],
+      monthrange: ['開始月', '結束月'],
       weekrange: ['開始周', '結束周'],
+      daterange: ['開始日期', '結束日期'],
       timeperiod: ['開始時間', '結束時間'],
       timerange: ['請選擇開始時間', '請選擇結束時間'],
     },
diff --git a/packages/ui/locale-context/src/locale/zh-TW.ts b/packages/ui/locale-context/src/locale/zh-TW.ts
index 997470eb1..51d41e2aa 100644
--- a/packages/ui/locale-context/src/locale/zh-TW.ts
+++ b/packages/ui/locale-context/src/locale/zh-TW.ts
@@ -46,13 +46,17 @@ export default {
     ],
     week: ['日', '壹', '二', '三', '四', '五', '六'],
     placeholders: {
-      date: ['請選擇日期'],
-      month: ['請選擇月'],
       year: ['請選擇年'],
-      time: ['請選擇時間'],
-      daterange: ['開始日期', '結束日期'],
+      quarter: ['請選擇季度'],
+      month: ['請選擇月'],
       week: ['請選擇周'],
+      date: ['請選擇日期'],
+      time: ['請選擇時間'],
+      yearrange: ['開始年', '結束年'],
+      quarterrange: ['開始季度', '結束季度'],
+      monthrange: ['開始月', '結束月'],
       weekrange: ['開始周', '結束周'],
+      daterange: ['開始日期', '結束日期'],
       timeperiod: ['開始時間', '結束時間'],
       timerange: ['請選擇開始時間', '請選擇結束時間'],
     },

From 51267eb2408ee50970e2d354eaa554a34df00878 Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Tue, 26 Dec 2023 16:28:46 +0800
Subject: [PATCH 4/5] =?UTF-8?q?chore(date-picker&locale-context):=20?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=8F=98=E6=9B=B4=E8=AE=B0=E5=BD=95=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/shaggy-rules-own.md | 5 +++++
 .changeset/small-mangos-cry.md | 7 +++++++
 .changeset/sour-apples-look.md | 6 ++++++
 3 files changed, 18 insertions(+)
 create mode 100644 .changeset/shaggy-rules-own.md
 create mode 100644 .changeset/small-mangos-cry.md
 create mode 100644 .changeset/sour-apples-look.md

diff --git a/.changeset/shaggy-rules-own.md b/.changeset/shaggy-rules-own.md
new file mode 100644
index 000000000..d7949d32b
--- /dev/null
+++ b/.changeset/shaggy-rules-own.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/locale-context": patch
+---
+
+chore: 补充日期语言包
diff --git a/.changeset/small-mangos-cry.md b/.changeset/small-mangos-cry.md
new file mode 100644
index 000000000..a698ddb6c
--- /dev/null
+++ b/.changeset/small-mangos-cry.md
@@ -0,0 +1,7 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(date-picker): 支持季度选择
+feat(date-picker): add onPanelChange api
+chore(locale-context): 补充日期语言包
diff --git a/.changeset/sour-apples-look.md b/.changeset/sour-apples-look.md
new file mode 100644
index 000000000..4f39f5a81
--- /dev/null
+++ b/.changeset/sour-apples-look.md
@@ -0,0 +1,6 @@
+---
+"@hi-ui/date-picker": minor
+---
+
+feat: 支持季度选择
+feat: add onPanelChange api

From 5451cd2c248fc8a1931efad7eee0ef0ca786453d Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Tue, 26 Dec 2023 16:36:38 +0800
Subject: [PATCH 5/5] =?UTF-8?q?chore(date-picker):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/date-picker/stories/range.stories.tsx           | 2 +-
 packages/ui/date-picker/stories/year-month-week.stories.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/ui/date-picker/stories/range.stories.tsx b/packages/ui/date-picker/stories/range.stories.tsx
index 2973e26ec..460187822 100644
--- a/packages/ui/date-picker/stories/range.stories.tsx
+++ b/packages/ui/date-picker/stories/range.stories.tsx
@@ -4,7 +4,7 @@ import DayJs from 'dayjs'
 
 /**
  * @title 范围
- * @desc 以天、周、月、年等粒度展示一个时间的范围
+ * @desc 以天、周、月、季度、年等粒度展示一个时间的范围
  */
 export const Range = () => {
   const [dynamicSelectedValue, setDynamicSelectedValue] = useState<any>('')
diff --git a/packages/ui/date-picker/stories/year-month-week.stories.tsx b/packages/ui/date-picker/stories/year-month-week.stories.tsx
index a638445c8..11096dd2a 100644
--- a/packages/ui/date-picker/stories/year-month-week.stories.tsx
+++ b/packages/ui/date-picker/stories/year-month-week.stories.tsx
@@ -2,13 +2,13 @@ import React from 'react'
 import DatePicker from '../src'
 
 /**
- * @title 年份 / 月份 / 周
- * @desc 以年份 / 月份 / 周为展示粒度
+ * @title 年份 / 季度 / 月份 / 周
+ * @desc 以年份 / 季度 / 月份 / 周为展示粒度
  */
 export const YearMonthWeek = () => {
   return (
     <>
-      <h1>年份 / 月份 / 周</h1>
+      <h1>年份 / 季度 / 月份 / 周</h1>
       <div className="date-picker-ymw__wrap">
         <h2>年份</h2>
         <DatePicker