chore(DatePicker): reuse genOptions

packages/vant/src/date-picker/DatePicker.tsx

@@ -8,15 +8,13 @@ import {
 } from 'vue';
 
 // Utils
+import { pick, extend, isDate, isSameValue, createNamespace } from '../utils';
 import {
-  pick,
+  genOptions,
-  extend,
+  sharedProps,
-  isDate,
+  getMonthEndDay,
-  padZero,
+  pickerInheritKeys,
-  isSameValue,
+} from './utils';
-  createNamespace,
-} from '../utils';
-import { times, sharedProps, getMonthEndDay, pickerInheritKeys } from './utils';
 
 // Components
 import { Picker } from '../picker';
@@ -55,25 +53,16 @@ export default defineComponent({
   setup(props, { emit, slots }) {
     const currentValues = ref<string[]>(props.modelValue);
 
-    const genOptions = (
-      min: number,
-      max: number,
-      type: DatePickerColumnType
-    ) => {
-      const options = times(max - min + 1, (index) => {
-        const value = padZero(min + index);
-        return props.formatter(type, {
-          text: value,
-          value,
-        });
-      });
-      return props.filter ? props.filter(type, options) : options;
-    };
-
     const genYearOptions = () => {
       const minYear = props.minDate.getFullYear();
       const maxYear = props.maxDate.getFullYear();
-      return genOptions(minYear, maxYear, 'year');
+      return genOptions(
+        minYear,
+        maxYear,
+        'year',
+        props.formatter,
+        props.filter
+      );
     };
 
     const isMaxYear = (year: number) => year === props.maxDate.getFullYear();
@@ -100,9 +89,15 @@ export default defineComponent({
 
     const genMonthOptions = () => {
       if (isMaxYear(getValue('year'))) {
-        return genOptions(1, props.maxDate.getMonth() + 1, 'month');
+        return genOptions(
+          1,
+          props.maxDate.getMonth() + 1,
+          'month',
+          props.formatter,
+          props.filter
+        );
       }
-      return genOptions(1, 12, 'month');
+      return genOptions(1, 12, 'month', props.formatter, props.filter);
     };
 
     const genDayOptions = () => {
@@ -114,7 +109,7 @@ export default defineComponent({
         maxDate = props.maxDate.getDate();
       }
 
-      return genOptions(1, maxDate, 'day');
+      return genOptions(1, maxDate, 'day', props.formatter, props.filter);
     };
 
     const columns = computed(() =>

packages/vant/src/date-picker/utils.ts

@@ -1,17 +1,16 @@
-import { extend, makeArrayProp } from '../utils';
+import { extend, padZero, makeArrayProp } from '../utils';
 import { pickerSharedProps } from '../picker/Picker';
 import type { PropType } from 'vue';
 import type { PickerOption } from '../picker';
 
+type Filter = (columnType: string, options: PickerOption[]) => PickerOption[];
+type Formatter = (type: string, option: PickerOption) => PickerOption;
+
 export const sharedProps = extend({}, pickerSharedProps, {
   modelValue: makeArrayProp<string>(),
-  filter: Function as PropType<
+  filter: Function as PropType<Filter>,
-    (columnType: string, options: PickerOption[]) => PickerOption[]
-  >,
   formatter: {
-    type: Function as PropType<
+    type: Function as PropType<Formatter>,
-      (type: string, option: PickerOption) => PickerOption
-    >,
     default: (type: string, option: PickerOption) => option,
   },
 });
@@ -37,3 +36,20 @@ export function times<T>(n: number, iteratee: (index: number) => T) {
 
 export const getMonthEndDay = (year: number, month: number): number =>
   32 - new Date(year, month - 1, 32).getDate();
+
+export const genOptions = <T extends string>(
+  min: number,
+  max: number,
+  type: T,
+  formatter: Formatter,
+  filter?: Filter
+) => {
+  const options = times(max - min + 1, (index) => {
+    const value = padZero(min + index);
+    return formatter(type, {
+      text: value,
+      value,
+    });
+  });
+  return filter ? filter(type, options) : options;
+};

packages/vant/src/time-picker/TimePicker.tsx

@@ -11,12 +11,15 @@ import {
 import {
   pick,
   extend,
-  padZero,
   createNamespace,
   makeNumericProp,
   isSameValue,
 } from '../utils';
-import { times, sharedProps, pickerInheritKeys } from '../date-picker/utils';
+import {
+  genOptions,
+  sharedProps,
+  pickerInheritKeys,
+} from '../date-picker/utils';
 
 // Components
 import { Picker } from '../picker';
@@ -50,30 +53,34 @@ export default defineComponent({
   setup(props, { emit, slots }) {
     const currentValues = ref<string[]>(props.modelValue);
 
-    const genOptions = (
-      min: number,
-      max: number,
-      type: TimePickerColumnType
-    ) => {
-      const options = times(max - min + 1, (index) => {
-        const value = padZero(min + index);
-        return props.formatter(type, {
-          text: value,
-          value,
-        });
-      });
-      return props.filter ? props.filter(type, options) : options;
-    };
-
     const columns = computed(() =>
       props.columnsType.map((type) => {
+        const { filter, formatter } = props;
         switch (type) {
           case 'hour':
-            return genOptions(+props.minHour, +props.maxHour, 'hour');
+            return genOptions(
+              +props.minHour,
+              +props.maxHour,
+              type,
+              formatter,
+              filter
+            );
           case 'minute':
-            return genOptions(+props.minMinute, +props.maxMinute, 'minute');
+            return genOptions(
+              +props.minMinute,
+              +props.maxMinute,
+              type,
+              formatter,
+              filter
+            );
           case 'second':
-            return genOptions(+props.minSecond, +props.maxSecond, 'second');
+            return genOptions(
+              +props.minSecond,
+              +props.maxSecond,
+              type,
+              formatter,
+              filter
+            );
           default:
             throw new Error(
               `[Vant] DatePicker: unsupported columns type: ${type}`