From f493d7071ecfeab27e4bc9c9ed162897ef7714f0 Mon Sep 17 00:00:00 2001 From: cnb <108622528+ascii5@users.noreply.github.com> Date: Tue, 6 Jan 2026 18:14:57 +0800 Subject: [PATCH 1/5] feat(DatePicker): add sort function for column options --- packages/vant/src/date-picker/DatePicker.tsx | 3 ++ packages/vant/src/date-picker/utils.ts | 33 +++++++++++++++++--- 2 files changed, 32 insertions(+), 4 deletions(-) diff --git a/packages/vant/src/date-picker/DatePicker.tsx b/packages/vant/src/date-picker/DatePicker.tsx index f5179a39f4f..8920f5fdbb0 100644 --- a/packages/vant/src/date-picker/DatePicker.tsx +++ b/packages/vant/src/date-picker/DatePicker.tsx @@ -108,6 +108,7 @@ export default defineComponent({ 'year', props.formatter, props.filter, + props.sort, computedValues.value, ); }; @@ -123,6 +124,7 @@ export default defineComponent({ 'month', props.formatter, props.filter, + props.sort, computedValues.value, ); }; @@ -143,6 +145,7 @@ export default defineComponent({ 'day', props.formatter, props.filter, + props.sort, computedValues.value, ); }; diff --git a/packages/vant/src/date-picker/utils.ts b/packages/vant/src/date-picker/utils.ts index 4e403e9556b..24f177d603c 100644 --- a/packages/vant/src/date-picker/utils.ts +++ b/packages/vant/src/date-picker/utils.ts @@ -9,6 +9,11 @@ type Filter = ( values: string[], ) => PickerOption[]; type Formatter = (type: string, option: PickerOption) => PickerOption; +type Sort = ( + columnType: string, + options: PickerOption[], + values: string[], +) => PickerOption[]; export const sharedProps = extend({}, pickerSharedProps, { modelValue: makeArrayProp(), @@ -17,6 +22,7 @@ export const sharedProps = extend({}, pickerSharedProps, { type: Function as PropType, default: (type: string, option: PickerOption) => option, }, + sort: Function as PropType, }); export const pickerInheritKeys = Object.keys(pickerSharedProps) as Array< @@ -47,24 +53,43 @@ export const genOptions = ( type: T, formatter: Formatter, filter: Filter | undefined, + sort: Sort | undefined, values: string[], ) => { - const options = times(max - min + 1, (index) => { + let options = times(max - min + 1, (index) => { const value = padZero(min + index); return formatter(type, { text: value, value, }); }); - return filter ? filter(type, options, values) : options; + if (filter) { + options = filter(type, options, values); + } + if (sort) { + options = sort(type, options, values); + } + return options; }; export const formatValueRange = (values: string[], columns: PickerOption[][]) => values.map((value, index) => { const column = columns[index]; if (column.length) { - const minValue = +column[0].value!; - const maxValue = +column[column.length - 1].value!; + // Find the actual min and max values in the column + let minValue = +column[0].value!; + let maxValue = +column[0].value!; + + for (const option of column) { + const optionValue = +option.value!; + if (optionValue < minValue) { + minValue = optionValue; + } + if (optionValue > maxValue) { + maxValue = optionValue; + } + } + return padZero(clamp(+value, minValue, maxValue)); } return value; From 713f7b8daa2068aba3483d9d1d2fa4a6b45cc029 Mon Sep 17 00:00:00 2001 From: cnb <108622528+ascii5@users.noreply.github.com> Date: Tue, 6 Jan 2026 18:18:08 +0800 Subject: [PATCH 2/5] test(DatePicker): add tests for DatePicker Sort --- .../vant/src/date-picker/test/index.spec.ts | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/packages/vant/src/date-picker/test/index.spec.ts b/packages/vant/src/date-picker/test/index.spec.ts index 3f1b90939b6..fc80f9296ab 100644 --- a/packages/vant/src/date-picker/test/index.spec.ts +++ b/packages/vant/src/date-picker/test/index.spec.ts @@ -227,3 +227,44 @@ test('should be displayed correctly when modelValue updated by external sources' .selectedValues, ).toEqual(['2024', '01']); }); + +test('should sort options correctly when using sort prop', async () => { + const sort = (type: string, options: any[]) => { + if (type === 'year') { + return options.reverse(); + } + return options; + }; + + const wrapper = mount(DatePicker, { + props: { + modelValue: ['2023', '01', '01'], + minDate: new Date(2020, 0, 1), + maxDate: new Date(2025, 0, 1), + sort, + }, + }); + + await later(); + + // Check if years are sorted in descending order + const yearColumn = wrapper.find('.van-picker-column'); + const yearItems = yearColumn.findAll('.van-picker-column__item'); + expect(yearItems[0].text()).toEqual('2025'); + expect(yearItems[1].text()).toEqual('2024'); + expect(yearItems[2].text()).toEqual('2023'); + expect(yearItems[3].text()).toEqual('2022'); + expect(yearItems[4].text()).toEqual('2021'); + expect(yearItems[5].text()).toEqual('2020'); + + // Check if the selected value is correct + const selectedItems = wrapper.findAll('.van-picker-column__item--selected'); + expect(selectedItems[0].text()).toEqual('2023'); + + // Confirm the value + await wrapper.find('.van-picker__confirm').trigger('click'); + expect( + wrapper.emitted<[PickerConfirmEventParams]>('confirm')![0][0] + .selectedValues, + ).toEqual(['2023', '01', '01']); +}); From 4b3ac9bc5f0d450fd07e17e7e20184d6c57fe25e Mon Sep 17 00:00:00 2001 From: cnb <108622528+ascii5@users.noreply.github.com> Date: Tue, 6 Jan 2026 18:20:07 +0800 Subject: [PATCH 3/5] docs(DatePicker): add documentation and demo for DatePicker Sort --- packages/vant/src/date-picker/README.md | 34 +++++++++++++++++++ packages/vant/src/date-picker/README.zh-CN.md | 34 +++++++++++++++++++ packages/vant/src/date-picker/demo/index.vue | 22 ++++++++++++ 3 files changed, 90 insertions(+) diff --git a/packages/vant/src/date-picker/README.md b/packages/vant/src/date-picker/README.md index 9d5e786dabb..79980479d08 100644 --- a/packages/vant/src/date-picker/README.md +++ b/packages/vant/src/date-picker/README.md @@ -162,6 +162,39 @@ export default { }; ``` +### Options Sort + +By passing the `sort` function, you can sort the options array to achieve custom sorting rules, such as descending order. + +```html + +``` + +```js +import { ref } from 'vue'; +export default { + setup() { + const currentDate = ref(['2021', '01', '01']); + const sort = (type, options) => { + if (type === 'year') return options.reverse(); + return options; + }; + return { + currentDate, + sort, + minDate: new Date(2020, 0, 1), + maxDate: new Date(2025, 5, 1), + }; + }, +}; +``` + ## API ### Props @@ -180,6 +213,7 @@ export default { | readonly | Whether to be readonly | _boolean_ | `false` | | filter | Option filter | _(type: string, options: PickerOption[], values: string[]) => PickerOption[]_ | - | | formatter | Option formatter | _(type: string, option: PickerOption) => PickerOption_ | - | +| sort | Option sort | _(type: string, options: PickerOption[], values: string[]) => PickerOption[]_ | - | | option-height | Option height, supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `44` | | visible-option-num | Count of visible columns | _number \| string_ | `6` | | swipe-duration | Duration of the momentum animation, unit `ms` | _number \| string_ | `1000` | diff --git a/packages/vant/src/date-picker/README.zh-CN.md b/packages/vant/src/date-picker/README.zh-CN.md index e0a28f88d78..d2379d4bd95 100644 --- a/packages/vant/src/date-picker/README.zh-CN.md +++ b/packages/vant/src/date-picker/README.zh-CN.md @@ -168,6 +168,39 @@ export default { }; ``` +### 排序选项 + +通过传入 `sort` 函数，可以对选项数组进行排序，实现自定义排序规则，例如倒序排列。 + +```html + +``` + +```js +import { ref } from 'vue'; +export default { + setup() { + const currentDate = ref(['2021', '01', '01']); + const sort = (type, options) => { + if (type === 'year') return options.reverse(); + return options; + }; + return { + currentDate, + sort, + minDate: new Date(2020, 0, 1), + maxDate: new Date(2025, 5, 1), + }; + }, +}; +``` + ## API ### Props @@ -186,6 +219,7 @@ export default { | readonly | 是否为只读状态，只读状态下无法切换选项 | _boolean_ | `false` | | filter | 选项过滤函数 | _(type: string, options: PickerOption[], values: string[]) => PickerOption[]_ | - | | formatter | 选项格式化函数 | _(type: string, option: PickerOption) => PickerOption_ | - | +| sort | 选项排序函数 | _(type: string, options: PickerOption[], values: string[]) => PickerOption[]_ | - | | option-height | 选项高度，支持 `px` `vw` `vh` `rem` 单位，默认 `px` | _number \| string_ | `44` | | visible-option-num | 可见的选项个数 | _number \| string_ | `6` | | swipe-duration | 快速滑动时惯性滚动的时长，单位 `ms` | _number \| string_ | `1000` | diff --git a/packages/vant/src/date-picker/demo/index.vue b/packages/vant/src/date-picker/demo/index.vue index dd3f7b1d610..b2de9f7c1f0 100644 --- a/packages/vant/src/date-picker/demo/index.vue +++ b/packages/vant/src/date-picker/demo/index.vue @@ -15,6 +15,8 @@ const t = useTranslate({ optionsFilter: '过滤选项', chooseYearMonth: '选择年月', optionsFormatter: '格式化选项', + optionsSort: '排序选项', + chooseDateDesc: '选择日期（倒序）', }, 'en-US': { day: ' Day', @@ -25,6 +27,8 @@ const t = useTranslate({ optionsFilter: 'Options Filter', chooseYearMonth: 'Choose Year-Month', optionsFormatter: 'Options Formatter', + optionsSort: 'Options Sort', + chooseDateDesc: 'Choose Date (Descending)', }, }); @@ -34,6 +38,7 @@ const basicDate = ref(['2021', '01', '01']); const yearMonthDate = ref(['2021', '01']); const formatterDate = ref(['2021', '01']); const filterDate = ref(['2021', '01']); +const sortDate = ref(['2021', '01', '01']); const columnsType: DatePickerColumnType[] = ['year', 'month']; @@ -56,6 +61,13 @@ const formatter = (type: string, option: PickerOption) => { } return option; }; + +const sort = (type: string, options: PickerOption[]) => { + if (type === 'year') { + return options.reverse(); + } + return options; +}; From 32c8bdab8485175ad001b6a20ca0992be1b070ba Mon Sep 17 00:00:00 2001 From: cnb <108622528+ascii5@users.noreply.github.com> Date: Tue, 6 Jan 2026 18:45:50 +0800 Subject: [PATCH 4/5] test(DatePicker): update snapshots for new DatePicker Demo --- .../test/__snapshots__/demo-ssr.spec.ts.snap | 554 ++++++++++++++++++ .../test/__snapshots__/demo.spec.ts.snap | 547 +++++++++++++++++ 2 files changed, 1101 insertions(+) diff --git a/packages/vant/src/date-picker/test/__snapshots__/demo-ssr.spec.ts.snap b/packages/vant/src/date-picker/test/__snapshots__/demo-ssr.spec.ts.snap index c6df588871d..7f8406d50bf 100644 --- a/packages/vant/src/date-picker/test/__snapshots__/demo-ssr.spec.ts.snap +++ b/packages/vant/src/date-picker/test/__snapshots__/demo-ssr.spec.ts.snap @@ -1161,4 +1161,558 @@ exports[`should render demo and match snapshot 1`] = ` +
+ +
+
+ + +
+ Choose Date (Descending) +
+ +
+
+ +
+
    + +
  • +
    + 2025 +
    +
    • +
  • +
    + 2024 +
    +
    • +
  • +
    + 2023 +
    +
    • +
  • +
    + 2022 +
    +
    • +
  • +
    + 2021 +
    +
    • +
  • +
    + 2020 +
    +
    • +
+
+
+
    + +
  • +
    + 01 +
    +
    • +
  • +
    + 02 +
    +
    • +
  • +
    + 03 +
    +
    • +
  • +
    + 04 +
    +
    • +
  • +
    + 05 +
    +
    • +
  • +
    + 06 +
    +
    • +
  • +
    + 07 +
    +
    • +
  • +
    + 08 +
    +
    • +
  • +
    + 09 +
    +
    • +
  • +
    + 10 +
    +
    • +
  • +
    + 11 +
    +
    • +
  • +
    + 12 +
    +
    • +
+
+
+
    + +
  • +
    + 01 +
    +
    • +
  • +
    + 02 +
    +
    • +
  • +
    + 03 +
    +
    • +
  • +
    + 04 +
    +
    • +
  • +
    + 05 +
    +
    • +
  • +
    + 06 +
    +
    • +
  • +
    + 07 +
    +
    • +
  • +
    + 08 +
    +
    • +
  • +
    + 09 +
    +
    • +
  • +
    + 10 +
    +
    • +
  • +
    + 11 +
    +
    • +
  • +
    + 12 +
    +
    • +
  • +
    + 13 +
    +
    • +
  • +
    + 14 +
    +
    • +
  • +
    + 15 +
    +
    • +
  • +
    + 16 +
    +
    • +
  • +
    + 17 +
    +
    • +
  • +
    + 18 +
    +
    • +
  • +
    + 19 +
    +
    • +
  • +
    + 20 +
    +
    • +
  • +
    + 21 +
    +
    • +
  • +
    + 22 +
    +
    • +
  • +
    + 23 +
    +
    • +
  • +
    + 24 +
    +
    • +
  • +
    + 25 +
    +
    • +
  • +
    + 26 +
    +
    • +
  • +
    + 27 +
    +
    • +
  • +
    + 28 +
    +
    • +
  • +
    + 29 +
    +
    • +
  • +
    + 30 +
    +
    • +
  • +
    + 31 +
    +
    • +
+
+ +
+
+
+
+
+
+
`; diff --git a/packages/vant/src/date-picker/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/date-picker/test/__snapshots__/demo.spec.ts.snap index 65df4fb415c..b3e8ff61409 100644 --- a/packages/vant/src/date-picker/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/date-picker/test/__snapshots__/demo.spec.ts.snap @@ -1135,4 +1135,551 @@ exports[`should render demo and match snapshot 1`] = ` +
+
+
+ +
+ Choose Date (Descending) +
+ +
+
+
+
    +
  • +
    + 2025 +
    +
    • +
  • +
    + 2024 +
    +
    • +
  • +
    + 2023 +
    +
    • +
  • +
    + 2022 +
    +
    • +
  • +
    + 2021 +
    +
    • +
  • +
    + 2020 +
    +
    • +
+
+
+
    +
  • +
    + 01 +
    +
    • +
  • +
    + 02 +
    +
    • +
  • +
    + 03 +
    +
    • +
  • +
    + 04 +
    +
    • +
  • +
    + 05 +
    +
    • +
  • +
    + 06 +
    +
    • +
  • +
    + 07 +
    +
    • +
  • +
    + 08 +
    +
    • +
  • +
    + 09 +
    +
    • +
  • +
    + 10 +
    +
    • +
  • +
    + 11 +
    +
    • +
  • +
    + 12 +
    +
    • +
+
+
+
    +
  • +
    + 01 +
    +
    • +
  • +
    + 02 +
    +
    • +
  • +
    + 03 +
    +
    • +
  • +
    + 04 +
    +
    • +
  • +
    + 05 +
    +
    • +
  • +
    + 06 +
    +
    • +
  • +
    + 07 +
    +
    • +
  • +
    + 08 +
    +
    • +
  • +
    + 09 +
    +
    • +
  • +
    + 10 +
    +
    • +
  • +
    + 11 +
    +
    • +
  • +
    + 12 +
    +
    • +
  • +
    + 13 +
    +
    • +
  • +
    + 14 +
    +
    • +
  • +
    + 15 +
    +
    • +
  • +
    + 16 +
    +
    • +
  • +
    + 17 +
    +
    • +
  • +
    + 18 +
    +
    • +
  • +
    + 19 +
    +
    • +
  • +
    + 20 +
    +
    • +
  • +
    + 21 +
    +
    • +
  • +
    + 22 +
    +
    • +
  • +
    + 23 +
    +
    • +
  • +
    + 24 +
    +
    • +
  • +
    + 25 +
    +
    • +
  • +
    + 26 +
    +
    • +
  • +
    + 27 +
    +
    • +
  • +
    + 28 +
    +
    • +
  • +
    + 29 +
    +
    • +
  • +
    + 30 +
    +
    • +
  • +
    + 31 +
    +
    • +
+
+
+
+
+
+
+
+
`; From 98ec6c13f0c6747feb1089808efee58d4e315881 Mon Sep 17 00:00:00 2001 From: cnb <108622528+ascii5@users.noreply.github.com> Date: Tue, 6 Jan 2026 19:38:54 +0800 Subject: [PATCH 5/5] fix(TimePicker): fix parameter passing issue of TimePicker component Add missing `undefined` parameters to the hour/minute/second pickers to ensure consistency in parameter passing --- packages/vant/src/time-picker/TimePicker.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/vant/src/time-picker/TimePicker.tsx b/packages/vant/src/time-picker/TimePicker.tsx index 8d64ee6b007..551f62835cf 100644 --- a/packages/vant/src/time-picker/TimePicker.tsx +++ b/packages/vant/src/time-picker/TimePicker.tsx @@ -130,6 +130,7 @@ export default defineComponent({ type, formatter, filter, + undefined, currentValues.value, ); case 'minute': @@ -139,6 +140,7 @@ export default defineComponent({ type, formatter, filter, + undefined, currentValues.value, ); case 'second': @@ -148,6 +150,7 @@ export default defineComponent({ type, formatter, filter, + undefined, currentValues.value, ); default: