feat(DatePicker): filter support values param to help get current values (#13147)

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

@@ -69,18 +69,9 @@ export default defineComponent({
     const currentValues = ref<string[]>(props.modelValue);
     const updatedByExternalSources = ref(false);
     const pickerRef = ref<PickerInstance>();
-
-    const genYearOptions = () => {
-      const minYear = props.minDate.getFullYear();
-      const maxYear = props.maxDate.getFullYear();
-      return genOptions(
-        minYear,
-        maxYear,
-        'year',
-        props.formatter,
-        props.filter,
+    const computedValues = computed(() =>
+      updatedByExternalSources.value ? props.modelValue : currentValues.value,
     );
-    };
 
     const isMinYear = (year: number) => year === props.minDate.getFullYear();
     const isMaxYear = (year: number) => year === props.maxDate.getFullYear();
@@ -92,9 +83,8 @@ export default defineComponent({
     const getValue = (type: DatePickerColumnType) => {
       const { minDate, columnsType } = props;
       const index = columnsType.indexOf(type);
-      const value = updatedByExternalSources.value
-        ? props.modelValue[index]
-        : currentValues.value[index];
+      const value = computedValues.value[index];
+
       if (value) {
         return +value;
       }
@@ -109,6 +99,19 @@ export default defineComponent({
       }
     };
 
+    const genYearOptions = () => {
+      const minYear = props.minDate.getFullYear();
+      const maxYear = props.maxDate.getFullYear();
+      return genOptions(
+        minYear,
+        maxYear,
+        'year',
+        props.formatter,
+        props.filter,
+        computedValues.value,
+      );
+    };
+
     const genMonthOptions = () => {
       const year = getValue('year');
       const minMonth = isMinYear(year) ? props.minDate.getMonth() + 1 : 1;
@@ -120,6 +123,7 @@ export default defineComponent({
         'month',
         props.formatter,
         props.filter,
+        computedValues.value,
       );
     };
 
@@ -133,7 +137,14 @@ export default defineComponent({
           ? props.maxDate.getDate()
           : getMonthEndDay(year, month);
 
-      return genOptions(minDate, maxDate, 'day', props.formatter, props.filter);
+      return genOptions(
+        minDate,
+        maxDate,
+        'day',
+        props.formatter,
+        props.filter,
+        computedValues.value,
+      );
     };
 
     const confirm = () => pickerRef.value?.confirm();

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

@@ -178,7 +178,7 @@ export default {
 | show-toolbar | Whether to show toolbar | _boolean_ | `true` |
 | loading | Whether to show loading prompt | _boolean_ | `false` |
 | readonly | Whether to be readonly | _boolean_ | `false` |
-| filter | Option filter | _(type: string, options: PickerOption[]) => PickerOption[]_ | - |
+| filter | Option filter | _(type: string, options: PickerOption[], values: string[]) => PickerOption[]_ | - |
 | formatter | Option formatter | _(type: string, option: PickerOption) => 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` |

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

@@ -184,7 +184,7 @@ export default {
 | show-toolbar | 是否显示顶部栏 | _boolean_ | `true` |
 | loading | 是否显示加载状态 | _boolean_ | `false` |
 | readonly | 是否为只读状态，只读状态下无法切换选项 | _boolean_ | `false` |
-| filter | 选项过滤函数 | _(type: string, options: PickerOption[]) => PickerOption[]_ | - |
+| filter | 选项过滤函数 | _(type: string, options: PickerOption[], values: string[]) => PickerOption[]_ | - |
 | formatter | 选项格式化函数 | _(type: string, option: PickerOption) => PickerOption_ | - |
 | option-height | 选项高度，支持 `px` `vw` `vh` `rem` 单位，默认 `px` | _number \| string_ | `44` |
 | visible-option-num | 可见的选项个数 | _number \| string_ | `6` |

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

@@ -1,10 +1,4 @@
-import {
-  extend,
-  padZero,
-  makeArrayProp,
-  clamp,
-  type RequiredParams,
-} from '../utils';
+import { extend, padZero, makeArrayProp, clamp } from '../utils';
 import { pickerSharedProps } from '../picker/Picker';
 import type { PropType } from 'vue';
 import type { PickerOption } from '../picker';
@@ -12,9 +6,8 @@ import type { PickerOption } from '../picker';
 type Filter = (
   columnType: string,
   options: PickerOption[],
-  values?: string[],
+  values: string[],
 ) => PickerOption[];
-export type TimeFilter = RequiredParams<Filter>;
 type Formatter = (type: string, option: PickerOption) => PickerOption;
 
 export const sharedProps = extend({}, pickerSharedProps, {
@@ -53,8 +46,8 @@ export const genOptions = <T extends string>(
   max: number,
   type: T,
   formatter: Formatter,
-  filter?: Filter | TimeFilter,
-  values?: string[],
+  filter: Filter | undefined,
+  values: string[],
 ) => {
   const options = times(max - min + 1, (index) => {
     const value = padZero(min + index);
@@ -63,7 +56,7 @@ export const genOptions = <T extends string>(
       value,
     });
   });
-  return filter ? filter(type, options, values!) : options;
+  return filter ? filter(type, options, values) : options;
 };
 
 export const formatValueRange = (values: string[], columns: PickerOption[][]) =>

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

@@ -14,7 +14,6 @@ import {
   genOptions,
   pickerInheritKeys,
   sharedProps,
-  type TimeFilter,
 } from '../date-picker/utils';
 import {
   pick,
@@ -57,7 +56,6 @@ export const timePickerProps = extend({}, sharedProps, {
     type: Array as PropType<TimePickerColumnType[]>,
     default: () => ['hour', 'minute'],
   },
-  filter: Function as PropType<TimeFilter>,
 });
 
 export type TimePickerProps = ExtractPropTypes<typeof timePickerProps>;