feat(DataPicker): add add sort function for column options

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,
       );
     };

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
+<van-date-picker
+  v-model="currentDate"
+  title="Choose Date (Descending)"
+  :min-date="minDate"
+  :max-date="maxDate"
+  :sort="sort"
+/>
+```
+
+```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` |

packages/vant/src/date-picker/README.zh-CN.md

@@ -168,6 +168,39 @@ export default {
 };
 ```
 
+### 排序选项
+
+通过传入 `sort` 函数，可以对选项数组进行排序，实现自定义排序规则，例如倒序排列。
+
+```html
+<van-date-picker
+  v-model="currentDate"
+  title="选择日期（倒序）"
+  :min-date="minDate"
+  :max-date="maxDate"
+  :sort="sort"
+/>
+```
+
+```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` |

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;
+};
 </script>
 
 <template>
@@ -99,4 +111,14 @@ const formatter = (type: string, option: PickerOption) => {
       :columns-type="columnsType"
     />
   </demo-block>
+
+  <demo-block card :title="t('optionsSort')">
+    <van-date-picker
+      v-model="sortDate"
+      :title="t('chooseDateDesc')"
+      :min-date="minDate"
+      :max-date="maxDate"
+      :sort="sort"
+    />
+  </demo-block>
 </template>