feat(date-picker): month, quarter, year format

2025-03-31 14:20:53 +08:00 · 2024-01-01 17:52:35 +08:00 · 2024-01-01 17:52:35 +08:00 · b5a72a0cd8
commit b5a72a0cd8
parent bc789c788b
26 changed files with 216 additions and 112 deletions
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -45,7 +45,7 @@
 - `n-cascader` adds `ellipsis-tag-popover-props` prop.
 - `n-select` adds `ellipsis-tag-popover-props` prop.
 - `n-tree-select` adds `ellipsis-tag-popover-props` prop.
- `n-date-picker` adds `month-string-type` prop, closes [#4891](https://github.com/tusen-ai/naive-ui/issues/4891)
+- `n-date-picker` adds `month-format`, `year-format` and `quarter-format` props, closes [#4891](https://github.com/tusen-ai/naive-ui/issues/4891)
 - `n-avatar-group` adds `expand-on-hover` prop.
 - `n-data-table` adds `downloadCsv` method, closes [#4260](https://github.com/tusen-ai/naive-ui/issues/4260)
 - `n-tabs` adds `tab-class`, `add-tab-style` and `add-tab-class` props.
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -46,7 +46,7 @@
 - `n-cascader` 新增 `ellipsis-tag-popover-props` 属性
 - `n-select` 新增 `ellipsis-tag-popover-props` 属性
 - `n-tree-select` 新增 `ellipsis-tag-popover-props` 属性
- `n-date-picker` 新增 `month-string-type` 属性，关闭 [#4891](https://github.com/tusen-ai/naive-ui/issues/4891)
+- `n-date-picker` 新增 `month-format`、`year-format` 和 `quarter-format` 属性，关闭 [#4891](https://github.com/tusen-ai/naive-ui/issues/4891)
 - `n-avatar-group` 新增 `expand-on-hover` 属性
 - `n-data-table` 新增 `downloadCsv` 方法，关闭 [#4260](https://github.com/tusen-ai/naive-ui/issues/4260)
 - `n-tabs` 新增 `tab-class`、`add-tab-style`、`add-tab-class` 属性
--- a/demo/styles/demo.css
+++ b/demo/styles/demo.css
@ -53,7 +53,13 @@ body {
 }

 .md-table td {
-  word-break: break-word;
+  word-break: normal;
+}
+
+@media only screen and (max-width: 1280px) {
+  .md-table td {
+    word-break: break-word;
+  }
 }

@media only screen and (max-width: 639px) {
--- a/src/avatar-group/src/styles/avatar-group.cssr.ts
+++ b/src/avatar-group/src/styles/avatar-group.cssr.ts
@ -29,18 +29,18 @@ export default cB('avatar-group', `
      ])
    ])
  ]),
-  cNotM('vertical', {
-    flexDirection: 'row'
-  }, [
+  cNotM('vertical', `
+    flex-direction: row;
+  `, [
    cB('avatar', [
      c('&:not(:first-child)', `
         margin-left: var(--n-gap);
      `)
    ])
  ]),
-  cM('vertical', {
-    flexDirection: 'column'
-  }, [
+  cM('vertical', `
+    flex-direction: column;
+  `, [
    cB('avatar', [
      c('&:not(:first-child)', `
         margin-top: var(--n-gap);
--- a/src/avatar/demos/enUS/group.demo.vue
+++ b/src/avatar/demos/enUS/group.demo.vue
@ -5,7 +5,6 @@ Crowded people.
 </markdown>

 <template>
-  <n-avatar-group expand-on-hover :options="options" :size="40" :max="3" />
  <n-avatar-group :options="options" :size="40" :max="3">
    <template #avatar="{ option: { name, src } }">
      <n-tooltip>
--- a/src/avatar/demos/zhCN/group.demo.vue
+++ b/src/avatar/demos/zhCN/group.demo.vue
@ -5,7 +5,6 @@
 </markdown>

 <template>
-  <n-avatar-group expand-on-hover :options="options" :size="40" :max="3" />
  <n-avatar-group :options="options" :size="40" :max="3">
    <template #avatar="{ option: { name, src } }">
      <n-tooltip>
--- a/src/avatar/demos/zhCN/lazy.demo.vue
+++ b/src/avatar/demos/zhCN/lazy.demo.vue
@ -1,7 +1,7 @@
 <markdown>
 # 懒加载

-让图片进入视口再加载，两种使用方式：一种是单独使用 `lazy` 属性，则将设置为原生[HTMLImageElement.loading](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLImageElement/loading) 的属性值；
+让图片进入视口再加载，两种使用方式：一种是单独使用 `lazy` 属性，则将设置为原生 [HTMLImageElement.loading](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLImageElement/loading) 的属性值；
 另一种方式是配合 `intersection-observer-options` 配置，将采用 [IntersectionObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver) API 实现懒加载。
 </markdown>

--- a/src/data-table/demos/enUS/export-csv.demo.vue
+++ b/src/data-table/demos/enUS/export-csv.demo.vue
@ -1,15 +1,15 @@
 <markdown>
-# Export Csv
+# Export CSV
 </markdown>

 <template>
  <n-space vertical :size="12">
    <n-space>
      <n-button @click="downloadCsv">
-        Export Csv
+        Export CSV (original data)
      </n-button>
      <n-button @click="exportSorterAndFilterCsv">
-        Export Sorter & Filter Csv
+        Export CSV (displayed data)
      </n-button>
    </n-space>
    <n-data-table
--- a/src/data-table/demos/enUS/index.demo-entry.md
+++ b/src/data-table/demos/enUS/index.demo-entry.md
@ -208,7 +208,7 @@ These methods can help you control table in an uncontrolled manner. However, it'
 | --- | --- | --- | --- |
 | clearFilters | `() => void` | Clear all filter state. |  |
 | clearSorter | `() => void` | Clear all sort state. |  |
-| downloadCsv | `(options?: { fileName?: string, keepOriginalData?: boolean }) => void` | Export CSV. | NEXT_VERSION |
+| downloadCsv | `(options?: { fileName?: string, keepOriginalData?: boolean }) => void` | Download CSV. | NEXT_VERSION |
 | filters | `(filters: DataTableFilterState \| null) => void` | Set the active filters of the table. |  |
 | page | `(page: number) => void` | Manually set the page. |  |
 | scrollTo | `(options: { left?: number, top?: number, behavior?: ScrollBehavior }): void & (x: number, y: number) => void` | Scroll content. | 2.30.4 |
--- a/src/data-table/demos/zhCN/export-csv.demo.vue
+++ b/src/data-table/demos/zhCN/export-csv.demo.vue
@ -1,15 +1,15 @@
 <markdown>
-# 导出 Csv
+# 导出 CSV
 </markdown>

 <template>
  <n-space vertical :size="12">
    <n-space>
      <n-button @click="downloadCsv">
-        导出 Csv
+        导出 CSV（原始数据）
      </n-button>
      <n-button @click="exportSorterAndFilterCsv">
-        导出 Sorter & Filter Csv
+        导出 CSV（展示的数据）
      </n-button>
    </n-space>
    <n-data-table
--- a/src/data-table/demos/zhCN/index.demo-entry.md
+++ b/src/data-table/demos/zhCN/index.demo-entry.md
@ -219,7 +219,7 @@ type DataTableCreateSummary = (pageData: RowData[]) =>
 | --- | --- | --- | --- |
 | clearFilters | `() => void` | 清空所有的 filter 状态 |  |
 | clearSorter | `() => void` | 清空所有的 sort 状态 |  |
-| downloadCsv | `(options?: { fileName?: string, keepOriginalData?: boolean }) => void` | 导出 CSV | NEXT_VERSION |
+| downloadCsv | `(options?: { fileName?: string, keepOriginalData?: boolean }) => void` | 下载 CSV | NEXT_VERSION |
 | filters | `(filters: DataTableFilterState \| null) => void` | 设定表格当前的过滤器 |  |
 | page | `(page: number) => void` | 手动设置 page |  |
 | scrollTo | `(options: { left?: number, top?: number, behavior?: ScrollBehavior }): void & (x: number, y: number) => void` | 滚动内容 | 2.30.4 |
--- a/src/date-picker/demos/enUS/index.demo-entry.md
+++ b/src/date-picker/demos/enUS/index.demo-entry.md
@ -45,9 +45,10 @@ panel.vue
 | disabled | `boolean` | `false` | Whether the date picker is disabled. |  |
 | first-day-of-week | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | The first day of a week on calendar, 0 means Monday. |  |
 | input-readonly | `boolean` | `false` | Set the `readonly` attribute of the input (avoids virtual keyboard on touch devices). |  |
-| month-string-type | `'numeric' \| '2-digit' \| 'long' \| 'short' \| 'narrow'` | `'numeric'` | Display type of month in the panel. | NEXT_VERSION |
+| month-format | `string` | `'M'` | Format of month item in the panel. See [format](https://date-fns.org/v2.23.0/docs/format). | NEXT_VERSION |
 | panel | `boolean` | `false` | Whether to use date-picker as panel. | 2.29.1 |
 | placement | `'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end'` | `'bottom-start'` | Panel's placement. | 2.25.0 |
+| quarter-format | `string` | `'Q'Q` | Format of quarter item in the panel. See [format](https://date-fns.org/v2.23.0/docs/format). | NEXT_VERSION |
 | shortcuts | `Record<string, number \| (() => number)> \| Record<string, [number, number] \| (() => [number, number])>` | `undefined` | Shortcut button customizations. |  |
 | show | `boolean` | `undefined` | Whether to show panel. | 2.28.3 |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | Date picker size. |  |
@ -55,7 +56,8 @@ panel.vue
 | to | `string \| HTMLElement \| false` | `body` | Container node of the panel. `false` will keep it not detached. |  |
 | type | `'date' \| 'datetime' \| 'daterange' \| 'datetimerange' \| 'month' \| 'monthrange' \| 'year' \| 'quarter'` | `'date'` | Date picker type. | `'quarter'` v2.22.0, `'monthrange'` 2.28.3 |
 | value | `number \| [number, number] \| null` | `undefined` | Value of the date picker when being manually set. |  |
-| value-format | `string` | Follow `format` prop | Format of the binding value. see [format](https://date-fns.org/v2.23.0/docs/format). | 2.24.0 |
+| value-format | `string` | Follow `format` prop | Format of the binding value. See [format](https://date-fns.org/v2.23.0/docs/format). | 2.24.0 |
+| year-format | `string` | `'y'` | Format of year item in the panel. See [format](https://date-fns.org/v2.23.0/docs/format). | NEXT_VERSION |
 | on-clear | `() => void` | `undefined` | On clear callback. | 2.28.3 |
 | on-confirm | `(value: number \| [number, number] \| null, formattedValue: string \| [string, string] \| null) => void` | `undefined` | On confirm callback. | 2.28.3 |
 | on-blur | `() => void` | `undefined` | On blur callback. |  |
--- a/src/date-picker/demos/enUS/month.demo.vue
+++ b/src/date-picker/demos/enUS/month.demo.vue
@ -1,7 +1,7 @@
 <markdown>
 # Month

-You can set the display type of month in the panel.
+Use `month-format` to format month item inside panel.
 </markdown>

 <template>
@ -10,7 +10,8 @@ You can set the display type of month in the panel.
    <n-date-picker
      v-model:value="timestamp"
      type="month"
-      :month-string-type="'short'"
+      format="y MMM"
+      month-format="MMM"
      clearable
    />
    <pre>{{ JSON.stringify(timestamp) }}</pre>
--- a/src/date-picker/demos/zhCN/index.demo-entry.md
+++ b/src/date-picker/demos/zhCN/index.demo-entry.md
@ -46,9 +46,10 @@ form-debug.vue
 | first-day-of-week | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | 日历上一周的开始，0 代表周一 |  |
 | formatted-value | `string \| [string, string] \| null` | `undefined` | 格式化之后的值 | 2.24.0 |
 | input-readonly | `boolean` | `false` | 设置输入框为只读（避免在移动设备上打开虚拟键盘） |  |
-| month-string-type | `'numeric' \| '2-digit' \| 'long' \| 'short' \| 'narrow'` | `'numeric'` | 设置面板中月份的显示方式 | NEXT_VERSION |
+| month-format | `string` | `'M'` | 设置面板中月份的显示方式，详情见 [format](https://date-fns.org/v2.23.0/docs/format) | NEXT_VERSION |
 | panel | `boolean` | `false` | 是否只使用面板 | 2.29.1 |
 | placement | `'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end'` | `'bottom-start'` | 面板的弹出位置 | 2.25.0 |
+| quarter-format | `string` | `'Q'Q` | 设置面板中季度的显示方式，详情见 [format](https://date-fns.org/v2.23.0/docs/format) | NEXT_VERSION |
 | shortcuts | `Record<string, number \| (() => number)> \| Record<string, [number, number] \| (() => [number, number])>` | `undefined` | 自定义快捷按钮 |  |
 | show | `boolean` | `undefined` | 是否展示面板 | 2.28.3 |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 |  |
@ -57,6 +58,7 @@ form-debug.vue
 | type | `'date' \| 'datetime' \| 'daterange' \| 'datetimerange' \| 'month' \| 'monthrange' \| 'year' \| 'quarter'` | `'date'` | Date Picker 的类型 | `'quarter'` v2.22.0, `'monthrange'` 2.28.3 |
 | value | `number \| [number, number] \| null` | `undefined` | Date Picker 的值 |  |
 | value-format | `string` | 跟随 `format` 属性 | 绑定值的格式，详情见 [format](https://date-fns.org/v2.23.0/docs/format) |
+| year-format | `string` | `'y'` | 设置面板中年的显示方式，详情见 [format](https://date-fns.org/v2.23.0/docs/format) | NEXT_VERSION |
 | on-clear | `() => void` | `undefined` | 用户 clear 时执行的回调 | 2.28.3 |
 | on-confirm | `(value: number \| [number, number] \| null, formattedValue: string \| [string, string] \| null) => void` | `undefined` | 用户 confirm 时执行的回调 | 2.28.3 |
 | on-blur | `() => void` | `undefined` | 用户 blur 时执行的回调 |  |
--- a/src/date-picker/demos/zhCN/month.demo.vue
+++ b/src/date-picker/demos/zhCN/month.demo.vue
@ -1,7 +1,7 @@
 <markdown>
 # 月份

-可以指定面板中月份的显示方式
+可以使用 `month-format` 属性指定面板中月份的显示方式。
 </markdown>

 <template>
@ -10,7 +10,9 @@
    <n-date-picker
      v-model:value="timestamp"
      type="month"
-      :month-string-type="'short'"
+      format="y年 M月"
+      year-format="y年"
+      month-format="M月"
      clearable
    />
    <pre>{{ JSON.stringify(timestamp) }}</pre>
--- a/src/date-picker/src/DatePicker.tsx
+++ b/src/date-picker/src/DatePicker.tsx
@ -68,8 +68,7 @@ import type {
  OnUpdateFormattedValueImpl,
  DatePickerInst,
  OnConfirmImpl,
-  OnConfirm,
-  MonthStringType
+  OnConfirm
 } from './interface'
 import { datePickerInjectionKey } from './interface'
 import DatetimePanel from './panel/datetime'
@ -137,6 +136,9 @@ export const datePickerProps = {
  defaultCalendarStartTime: Number,
  defaultCalendarEndTime: Number,
  bindCalendarMonths: Boolean,
+  monthFormat: { type: String, default: 'M' },
+  yearFormat: { type: String, default: 'y' },
+  quarterFormat: { type: String, default: "'Q'Q" },
  'onUpdate:show': [Function, Array] as PropType<
  MaybeArray<(show: boolean) => void>
  >,
@ -158,11 +160,7 @@ export const datePickerProps = {
  onNextYear: Function as PropType<() => void>,
  onPrevYear: Function as PropType<() => void>,
  // deprecated
-  onChange: [Function, Array] as PropType<MaybeArray<OnUpdateValue>>,
-  monthStringType: {
-    type: String as PropType<MonthStringType>,
-    default: 'numeric'
-  }
+  onChange: [Function, Array] as PropType<MaybeArray<OnUpdateValue>>
 } as const

 export type DatePickerSetupProps = ExtractPropTypes<typeof datePickerProps>
@ -775,7 +773,9 @@ export default defineComponent({
      timePickerPropsRef: toRef(props, 'timePickerProps'),
      closeOnSelectRef: toRef(props, 'closeOnSelect'),
      updateValueOnCloseRef: toRef(props, 'updateValueOnClose'),
-      monthStringTypeRef: toRef(props, 'monthStringType'),
+      monthFormatRef: toRef(props, 'monthFormat'),
+      yearFormatRef: toRef(props, 'yearFormat'),
+      quarterFormatRef: toRef(props, 'quarterFormat'),
      ...uniVaidation,
      ...dualValidation,
      datePickerSlots: slots
--- a/src/date-picker/src/interface.ts
+++ b/src/date-picker/src/interface.ts
@ -108,14 +108,6 @@ export interface PanelRef
 // 0 is Monday
 export type FirstDayOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6

-// identical to Intl.DateTimeFormatOptions.month
-export type MonthStringType =
-  | 'numeric'
-  | '2-digit'
-  | 'long'
-  | 'short'
-  | 'narrow'
-
 export type DatePickerInjection = {
  mergedClsPrefixRef: Ref<string>
  mergedThemeRef: Ref<MergedTheme<DatePickerTheme>>
@ -130,7 +122,9 @@ export type DatePickerInjection = {
  closeOnSelectRef: Ref<boolean>
  updateValueOnCloseRef: Ref<boolean>
  firstDayOfWeekRef: Ref<FirstDayOfWeek | undefined>
-  monthStringTypeRef: Ref<MonthStringType>
+  monthFormatRef: Ref<string>
+  yearFormatRef: Ref<string>
+  quarterFormatRef: Ref<string>
  datePickerSlots: Slots
 } & ReturnType<typeof uniCalendarValidation> &
 ReturnType<typeof dualCalendarValidation>
--- a/src/date-picker/src/panel/month.tsx
+++ b/src/date-picker/src/panel/month.tsx
@ -1,12 +1,15 @@
 import { h, defineComponent, type VNode, type PropType, onMounted } from 'vue'
 import { VirtualList } from 'vueuc'
+import { useLocale } from '../../../_mixins'
 import { NButton, NxButton } from '../../../button'
 import { NBaseFocusDetector, NScrollbar } from '../../../_internal'
 import {
  type MonthItem,
  type YearItem,
  type QuarterItem,
-  getMonthString
+  getMonthString,
+  getQuarterString,
+  getYearString
 } from '../utils'
 import { MONTH_ITEM_HEIGHT } from '../config'
 import { useCalendar, useCalendarProps } from './use-calendar'
@ -31,16 +34,29 @@ export default defineComponent({
  },
  setup (props) {
    const useCalendarRef = useCalendar(props, props.type)
+    const { dateLocaleRef } = useLocale('DatePicker')
    const getRenderContent = (
      item: YearItem | MonthItem | QuarterItem
    ): number | string => {
      switch (item.type) {
        case 'year':
-          return item.dateObject.year
+          return getYearString(
+            item.dateObject.year,
+            item.yearFormat,
+            dateLocaleRef.value.locale
+          )
        case 'month':
-          return getMonthString(item.dateObject.month, item.monthStringType)
+          return getMonthString(
+            item.dateObject.month,
+            item.monthFormat,
+            dateLocaleRef.value.locale
+          )
        case 'quarter':
-          return `Q${item.dateObject.quarter}`
+          return getQuarterString(
+            item.dateObject.quarter,
+            item.quarterFormat,
+            dateLocaleRef.value.locale
+          )
      }
    }
    const { useAsQuickJump } = props
@ -57,14 +73,13 @@ export default defineComponent({
          key={i}
          class={[
            `${mergedClsPrefix}-date-panel-month-calendar__picker-col-item`,
-            {
-              [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--current`]:
-                item.isCurrent,
-              [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--selected`]:
-                item.selected,
-              [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--disabled`]:
-                !useAsQuickJump && mergedIsDateDisabled(item.ts)
-            }
+            item.isCurrent &&
+              `${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--current`,
+            item.selected &&
+              `${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--selected`,
+            !useAsQuickJump &&
+              mergedIsDateDisabled(item.ts) &&
+              `${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--disabled`
          ]}
          onClick={() => {
            useAsQuickJump
--- a/src/date-picker/src/panel/monthrange.tsx
+++ b/src/date-picker/src/panel/monthrange.tsx
@ -8,6 +8,7 @@ import {
  onMounted
 } from 'vue'
 import { VirtualList } from 'vueuc'
+import { useLocale } from '../../../_mixins'
 import { NxButton } from '../../../button'
 import { NBaseFocusDetector, NScrollbar } from '../../../_internal'
 import { warnOnce } from '../../../_utils'
@ -15,7 +16,9 @@ import {
  type MonthItem,
  type QuarterItem,
  type YearItem,
-  getMonthString
+  getMonthString,
+  getQuarterString,
+  getYearString
 } from '../utils'
 import { MONTH_ITEM_HEIGHT } from '../config'
 import { useDualCalendar, useDualCalendarProps } from './use-dual-calendar'
@ -43,6 +46,7 @@ export default defineComponent({
      })
    }
    const useCalendarRef = useDualCalendar(props, props.type)
+    const { dateLocaleRef } = useLocale('DatePicker')
    const renderItem = (
      item: YearItem | MonthItem | QuarterItem,
      i: number,
@ -58,14 +62,12 @@ export default defineComponent({
          key={i}
          class={[
            `${mergedClsPrefix}-date-panel-month-calendar__picker-col-item`,
-            {
-              [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--current`]:
-                item.isCurrent,
-              [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--selected`]:
-                item.selected,
-              [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--disabled`]:
-                disabled
-            }
+            item.isCurrent &&
+              `${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--current`,
+            item.selected &&
+              `${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--selected`,
+            disabled &&
+              `${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--disabled`
          ]}
          onClick={
            disabled
@ -76,10 +78,22 @@ export default defineComponent({
          }
        >
          {item.type === 'month'
-            ? getMonthString(item.dateObject.month, item.monthStringType)
+            ? getMonthString(
+              item.dateObject.month,
+              item.monthFormat,
+              dateLocaleRef.value.locale
+            )
            : item.type === 'quarter'
-              ? `Q${item.dateObject.quarter}`
-              : item.dateObject.year}
+              ? getQuarterString(
+                item.dateObject.quarter,
+                item.quarterFormat,
+                dateLocaleRef.value.locale
+              )
+              : getYearString(
+                item.dateObject.year,
+                item.yearFormat,
+                dateLocaleRef.value.locale
+              )}
        </div>
      )
    }
--- a/src/date-picker/src/panel/use-calendar.ts
+++ b/src/date-picker/src/panel/use-calendar.ts
@ -74,7 +74,9 @@ function useCalendar (
    localeRef,
    firstDayOfWeekRef,
    datePickerSlots,
-    monthStringTypeRef
+    yearFormatRef,
+    monthFormatRef,
+    quarterFormatRef
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  } = inject(datePickerInjectionKey)!
  const validation = {
@ -120,19 +122,26 @@ function useCalendar (
      calendarValueRef.value,
      Array.isArray(value) ? null : value,
      nowRef.value,
-      monthStringTypeRef.value
+      {
+        monthFormat: monthFormatRef.value
+      }
    )
  })
  const yearArrayRef = computed(() => {
    const { value } = props
-    return yearArray(Array.isArray(value) ? null : value, nowRef.value)
+    return yearArray(Array.isArray(value) ? null : value, nowRef.value, {
+      yearFormat: yearFormatRef.value
+    })
  })
  const quarterArrayRef = computed(() => {
    const { value } = props
    return quarterArray(
      calendarValueRef.value,
      Array.isArray(value) ? null : value,
-      nowRef.value
+      nowRef.value,
+      {
+        quarterFormat: quarterFormatRef.value
+      }
    )
  })
  const weekdaysRef = computed(() => {
--- a/src/date-picker/src/panel/use-dual-calendar.ts
+++ b/src/date-picker/src/panel/use-dual-calendar.ts
@ -78,7 +78,9 @@ function useDualCalendar (
    updateValueOnCloseRef,
    firstDayOfWeekRef,
    datePickerSlots,
-    monthStringTypeRef
+    monthFormatRef,
+    yearFormatRef,
+    quarterFormatRef
    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  } = inject(datePickerInjectionKey)!
  const validation = {
@ -221,36 +223,38 @@ function useDualCalendar (
    return shortcuts || rangesRef.value
  })
  const startYearArrayRef = computed(() => {
-    return yearArray(pluckValueFromRange(props.value, 'start'), nowRef.value)
+    return yearArray(pluckValueFromRange(props.value, 'start'), nowRef.value, {
+      yearFormat: yearFormatRef.value
+    })
  })
  const endYearArrayRef = computed(() => {
-    return yearArray(pluckValueFromRange(props.value, 'end'), nowRef.value)
+    return yearArray(pluckValueFromRange(props.value, 'end'), nowRef.value, {
+      yearFormat: yearFormatRef.value
+    })
  })
  const startQuarterArrayRef = computed(() => {
    const startValue = pluckValueFromRange(props.value, 'start')
-    return quarterArray(startValue ?? Date.now(), startValue, nowRef.value)
+    return quarterArray(startValue ?? Date.now(), startValue, nowRef.value, {
+      quarterFormat: quarterFormatRef.value
+    })
  })
  const endQuarterArrayRef = computed(() => {
    const endValue = pluckValueFromRange(props.value, 'end')
-    return quarterArray(endValue ?? Date.now(), endValue, nowRef.value)
+    return quarterArray(endValue ?? Date.now(), endValue, nowRef.value, {
+      quarterFormat: quarterFormatRef.value
+    })
  })
  const startMonthArrayRef = computed(() => {
    const startValue = pluckValueFromRange(props.value, 'start')
-    return monthArray(
-      startValue ?? Date.now(),
-      startValue,
-      nowRef.value,
-      monthStringTypeRef.value
-    )
+    return monthArray(startValue ?? Date.now(), startValue, nowRef.value, {
+      monthFormat: monthFormatRef.value
+    })
  })
  const endMonthArrayRef = computed(() => {
    const endValue = pluckValueFromRange(props.value, 'end')
-    return monthArray(
-      endValue ?? Date.now(),
-      endValue,
-      nowRef.value,
-      monthStringTypeRef.value
-    )
+    return monthArray(endValue ?? Date.now(), endValue, nowRef.value, {
+      monthFormat: monthFormatRef.value
+    })
  })
  watch(
    computed(() => props.value),
--- a/src/date-picker/src/utils.ts
+++ b/src/date-picker/src/utils.ts
@ -22,7 +22,7 @@ import {
 } from 'date-fns/esm'
 import type { NDateLocale } from '../../locales'
 import { START_YEAR } from './config'
-import type { FirstDayOfWeek, MonthStringType, Value } from './interface'
+import type { FirstDayOfWeek, Value } from './interface'

 function getDerivedTimeFromKeyboardEvent (
  prevValue: number | null,
@ -100,7 +100,7 @@ export interface DateItem {

 export interface MonthItem {
  type: 'month'
-  monthStringType: MonthStringType
+  monthFormat: string
  dateObject: {
    month: number
    year: number
@ -112,6 +112,7 @@ export interface MonthItem {

 export interface YearItem {
  type: 'year'
+  yearFormat: string
  dateObject: {
    year: number
  }
@ -122,6 +123,7 @@ export interface YearItem {

 export interface QuarterItem {
  type: 'quarter'
+  quarterFormat: string
  dateObject: {
    quarter: number
    year: number
@ -188,9 +190,31 @@ function dateItem (
  }
 }

-function getMonthString (month: number, type: MonthStringType): string {
-  const date = new Date(Date.UTC(2000, month, 1))
-  return date.toLocaleString('UTC', { month: type })
+function getMonthString (
+  month: number,
+  monthFormat: string,
+  locale: NDateLocale['locale']
+): string {
+  const date = Date.UTC(2000, month, 1)
+  return format(date, monthFormat, { locale })
+}
+
+function getYearString (
+  year: number,
+  yearFormat: string,
+  locale: NDateLocale['locale']
+): string {
+  const date = Date.UTC(year, 1, 1)
+  return format(date, yearFormat, { locale })
+}
+
+function getQuarterString (
+  quarter: number,
+  quarterFormat: string,
+  locale: NDateLocale['locale']
+): string {
+  const date = Date.UTC(2000, quarter * 3 - 2, 1)
+  return format(date, quarterFormat, { locale })
 }

 function weekItem (
@ -238,11 +262,15 @@ function monthItem (
  monthTs: number,
  valueTs: number | null,
  currentTs: number,
-  monthStringType: MonthStringType
+  {
+    monthFormat
+  }: {
+    monthFormat: string
+  }
 ): MonthItem {
  return {
    type: 'month',
-    monthStringType,
+    monthFormat,
    dateObject: {
      month: getMonth(monthTs),
      year: getYear(monthTs)
@ -256,10 +284,16 @@ function monthItem (
 function yearItem (
  yearTs: number,
  valueTs: number | null,
-  currentTs: number
+  currentTs: number,
+  {
+    yearFormat
+  }: {
+    yearFormat: string
+  }
 ): YearItem {
  return {
    type: 'year',
+    yearFormat,
    dateObject: {
      year: getYear(yearTs)
    },
@ -272,10 +306,16 @@ function yearItem (
 function quarterItem (
  quarterTs: number,
  valueTs: number | null,
-  currentTs: number
+  currentTs: number,
+  {
+    quarterFormat
+  }: {
+    quarterFormat: string
+  }
 ): QuarterItem {
  return {
    type: 'quarter',
+    quarterFormat,
    dateObject: {
      quarter: getQuarter(quarterTs),
      year: getYear(quarterTs)
@ -363,18 +403,15 @@ function monthArray (
  yearAnchorTs: number,
  valueTs: number | null,
  currentTs: number,
-  monthStringType: MonthStringType
+  format: {
+    monthFormat: string
+  }
 ): MonthItem[] {
  const calendarMonths: MonthItem[] = []
  const yearStart = startOfYear(yearAnchorTs)
  for (let i = 0; i < 12; i++) {
    calendarMonths.push(
-      monthItem(
-        getTime(addMonths(yearStart, i)),
-        valueTs,
-        currentTs,
-        monthStringType
-      )
+      monthItem(getTime(addMonths(yearStart, i)), valueTs, currentTs, format)
    )
  }
  return calendarMonths
@ -383,19 +420,33 @@ function monthArray (
 function quarterArray (
  yearAnchorTs: number,
  valueTs: number | null,
-  currentTs: number
+  currentTs: number,
+  format: {
+    quarterFormat: string
+  }
 ): QuarterItem[] {
  const calendarQuarters: QuarterItem[] = []
  const yearStart = startOfYear(yearAnchorTs)
  for (let i = 0; i < 4; i++) {
    calendarQuarters.push(
-      quarterItem(getTime(addQuarters(yearStart, i)), valueTs, currentTs)
+      quarterItem(
+        getTime(addQuarters(yearStart, i)),
+        valueTs,
+        currentTs,
+        format
+      )
    )
  }
  return calendarQuarters
 }

-function yearArray (valueTs: number | null, currentTs: number): YearItem[] {
+function yearArray (
+  valueTs: number | null,
+  currentTs: number,
+  format: {
+    yearFormat: string
+  }
+): YearItem[] {
  const calendarYears: YearItem[] = []
  const time1900 = new Date(START_YEAR, 0, 1)
  // 1900 is not a round time, so we use 1911 as start...
@ -403,7 +454,7 @@ function yearArray (valueTs: number | null, currentTs: number): YearItem[] {
  // 1899-12-31T15:54:17.000Z
  for (let i = 0; i < 200; i++) {
    calendarYears.push(
-      yearItem(getTime(addYears(time1900, i)), valueTs, currentTs)
+      yearItem(getTime(addYears(time1900, i)), valueTs, currentTs, format)
    )
  }
  return calendarYears
@ -460,5 +511,7 @@ export {
  getDerivedTimeFromKeyboardEvent,
  getDefaultTime,
  getMonthString,
+  getYearString,
+  getQuarterString,
  pluckValueFromRange
 }
--- a/src/image/demos/zhCN/lazy.demo.vue
+++ b/src/image/demos/zhCN/lazy.demo.vue
@ -1,7 +1,7 @@
 <markdown>
 # 懒加载

-让图片进入视口再加载，两种使用方式：一种是单独使用 `lazy` 属性，则将设置为原生[HTMLImageElement.loading](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLImageElement/loading) 的属性值；
+让图片进入视口再加载，两种使用方式：一种是单独使用 `lazy` 属性，则将设置为原生 [HTMLImageElement.loading](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLImageElement/loading) 的属性值；
 另一种方式是配合 `intersection-observer-options` 配置，将采用 [IntersectionObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver) API 实现懒加载。
 </markdown>

--- a/src/themes/dark.ts
+++ b/src/themes/dark.ts
@ -83,6 +83,7 @@ import { uploadDark } from '../upload/styles'
 import { watermarkDark } from '../watermark/styles'
 import { splitDark } from '../split/styles'
 import type { BuiltInGlobalTheme } from './interface'
+import { flexDark } from '../styles'

 export const darkTheme: BuiltInGlobalTheme = {
  name: 'dark',
@ -119,6 +120,7 @@ export const darkTheme: BuiltInGlobalTheme = {
  Empty: emptyDark,
  Ellipsis: ellipsisDark,
  Equation: equationDark,
+  Flex: flexDark,
  Form: formDark,
  GradientText: gradientTextDark,
  Icon: iconDark,
--- a/src/themes/light.ts
+++ b/src/themes/light.ts
@ -85,6 +85,7 @@ import { uploadLight } from '../upload/styles'
 import { watermarkLight } from '../watermark/styles'
 import { splitLight } from '../split/styles'
 import type { BuiltInGlobalTheme } from './interface'
+import { flexLight } from '../flex/styles'

 export const lightTheme: BuiltInGlobalTheme = {
  name: 'light',
@ -121,6 +122,7 @@ export const lightTheme: BuiltInGlobalTheme = {
  Empty: emptyLight,
  Equation: equationLight,
  Ellipsis: ellipsisLight,
+  Flex: flexLight,
  Form: formLight,
  GradientText: gradientTextLight,
  Icon: iconLight,
--- a/src/virtual-list/src/VirtualList.tsx
+++ b/src/virtual-list/src/VirtualList.tsx
@ -6,7 +6,7 @@ import {
  VVirtualList,
  type VirtualListInst,
  type VirtualListItemData,
-  type VirtualListScrollOptions
+  type VirtualListScrollToOptions
 } from 'vueuc'
 export { type VirtualListInst } from 'vueuc'

@ -76,7 +76,7 @@ export default defineComponent({
    }

    function scrollTo (
-      options: VirtualListScrollOptions | number,
+      options: VirtualListScrollToOptions | number,
      y?: number
    ): void {
      if (typeof options === 'number') {