diff --git a/packages/vant/src/date-picker/DatePicker.tsx b/packages/vant/src/date-picker/DatePicker.tsx index 04bec47f6..07e6e69d4 100644 --- a/packages/vant/src/date-picker/DatePicker.tsx +++ b/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, - extend, - isDate, - padZero, - isSameValue, - createNamespace, -} from '../utils'; -import { times, sharedProps, getMonthEndDay, pickerInheritKeys } from './utils'; + genOptions, + sharedProps, + getMonthEndDay, + pickerInheritKeys, +} from './utils'; // Components import { Picker } from '../picker'; @@ -55,25 +53,16 @@ export default defineComponent({ setup(props, { emit, slots }) { const currentValues = ref(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(() => diff --git a/packages/vant/src/date-picker/utils.ts b/packages/vant/src/date-picker/utils.ts index a14098a09..adc119817 100644 --- a/packages/vant/src/date-picker/utils.ts +++ b/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(), - filter: Function as PropType< - (columnType: string, options: PickerOption[]) => PickerOption[] - >, + filter: Function as PropType, formatter: { - type: Function as PropType< - (type: string, option: PickerOption) => PickerOption - >, + type: Function as PropType, default: (type: string, option: PickerOption) => option, }, }); @@ -37,3 +36,20 @@ export function times(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 = ( + 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; +}; diff --git a/packages/vant/src/time-picker/TimePicker.tsx b/packages/vant/src/time-picker/TimePicker.tsx index c1964e86c..70449d4bd 100644 --- a/packages/vant/src/time-picker/TimePicker.tsx +++ b/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(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}` diff --git a/packages/vant/src/time-picker/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/time-picker/test/__snapshots__/demo.spec.ts.snap index b21a0927b..aa6469f76 100644 --- a/packages/vant/src/time-picker/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/time-picker/test/__snapshots__/demo.spec.ts.snap @@ -2,9 +2,7 @@ exports[`should render demo and match snapshot 1`] = `
-
+
+
+
+
+ +
+ Choose Time +
+ +
+
+
+
    +
  • +
    + 00 +
    +
    • +
  • +
    + 01 +
    +
    • +
  • +
    + 02 +
    +
    • +
  • +
    + 03 +
    +
    • +
  • +
    + 04 +
    +
    • +
  • +
    + 05 +
    +
    • +
  • +
    + 06 +
    +
    • +
  • +
    + 07 +
    +
    • +
  • +
    + 08 +
    +
    • +
  • +
    + 09 +
    +
    • +
  • +
    + 10 +
    +
    • +
  • +
    + 11 +
    +
    • +
  • +
    + 12 +
    +
    • +
  • +
    + 13 +
    +
    • +
  • +
    + 14 +
    +
    • +
  • +
    + 15 +
    +
    • +
  • +
    + 16 +
    +
    • +
  • +
    + 17 +
    +
    • +
  • +
    + 18 +
    +
    • +
  • +
    + 19 +
    +
    • +
  • +
    + 20 +
    +
    • +
  • +
    + 21 +
    +
    • +
  • +
    + 22 +
    +
    • +
  • +
    + 23 +
    +
    • +
+
+
+
    +
  • +
    + 00 +
    +
    • +
  • +
    + 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 +
    +
    • +
  • +
    + 32 +
    +
    • +
  • +
    + 33 +
    +
    • +
  • +
    + 34 +
    +
    • +
  • +
    + 35 +
    +
    • +
  • +
    + 36 +
    +
    • +
  • +
    + 37 +
    +
    • +
  • +
    + 38 +
    +
    • +
  • +
    + 39 +
    +
    • +
  • +
    + 40 +
    +
    • +
  • +
    + 41 +
    +
    • +
  • +
    + 42 +
    +
    • +
  • +
    + 43 +
    +
    • +
  • +
    + 44 +
    +
    • +
  • +
    + 45 +
    +
    • +
  • +
    + 46 +
    +
    • +
  • +
    + 47 +
    +
    • +
  • +
    + 48 +
    +
    • +
  • +
    + 49 +
    +
    • +
  • +
    + 50 +
    +
    • +
  • +
    + 51 +
    +
    • +
  • +
    + 52 +
    +
    • +
  • +
    + 53 +
    +
    • +
  • +
    + 54 +
    +
    • +
  • +
    + 55 +
    +
    • +
  • +
    + 56 +
    +
    • +
  • +
    + 57 +
    +
    • +
  • +
    + 58 +
    +
    • +
  • +
    + 59 +
    +
    • +
+
+
+
    +
  • +
    + 00 +
    +
    • +
  • +
    + 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 +
    +
    • +
  • +
    + 32 +
    +
    • +
  • +
    + 33 +
    +
    • +
  • +
    + 34 +
    +
    • +
  • +
    + 35 +
    +
    • +
  • +
    + 36 +
    +
    • +
  • +
    + 37 +
    +
    • +
  • +
    + 38 +
    +
    • +
  • +
    + 39 +
    +
    • +
  • +
    + 40 +
    +
    • +
  • +
    + 41 +
    +
    • +
  • +
    + 42 +
    +
    • +
  • +
    + 43 +
    +
    • +
  • +
    + 44 +
    +
    • +
  • +
    + 45 +
    +
    • +
  • +
    + 46 +
    +
    • +
  • +
    + 47 +
    +
    • +
  • +
    + 48 +
    +
    • +
  • +
    + 49 +
    +
    • +
  • +
    + 50 +
    +
    • +
  • +
    + 51 +
    +
    • +
  • +
    + 52 +
    +
    • +
  • +
    + 53 +
    +
    • +
  • +
    + 54 +
    +
    • +
  • +
    + 55 +
    +
    • +
  • +
    + 56 +
    +
    • +
  • +
    + 57 +
    +
    • +
  • +
    + 58 +
    +
    • +
  • +
    + 59 +
    +
    • +
+
+
+
+
+
+
+
+