diff --git a/packages/vant/src/time-picker/README.md b/packages/vant/src/time-picker/README.md index fc5ec668a..acd3ad209 100644 --- a/packages/vant/src/time-picker/README.md +++ b/packages/vant/src/time-picker/README.md @@ -159,13 +159,39 @@ export default { }; ``` +### Limit Time Range + +Using `min-time` and `max-time` props to limit the time range, Convention format `10:00:00`. + +```html + +``` + +````js +import { ref } from 'vue'; + +export default { + setup() { + const currentTime = ref(['12', '00', '00']); + return { currentTime }; + }, +}; + + + ### Advanced Usage The third parameter of the `filter` function can get the currently selected time, which can be used to filter unwanted times more flexibly when using the uncontrolled mode. ```html -``` +```` ```js export default { @@ -215,6 +241,8 @@ export default { | max-minute | Max minute | _number \| string_ | `59` | | min-second | Min second | _number \| string_ | `0` | | max-second | Max second | _number \| string_ | `59` | +| min-time `v4.4.2` | Min time, format reference `07:40:00`, `min-hour` `min-minute` `min-second` is invalid when used | _string_ | - | +| max-time `v4.4.2` | Max time, format reference `10:20:00`, `min-hour` `min-minute` `max-second` is invalid when used | _string_ | - | | title | Toolbar title | _string_ | `''` | | confirm-button-text | Text of confirm button | _string_ | `Confirm` | | cancel-button-text | Text of cancel button | _string_ | `Cancel` | diff --git a/packages/vant/src/time-picker/README.zh-CN.md b/packages/vant/src/time-picker/README.zh-CN.md index 11cc8a856..c38ff3a19 100644 --- a/packages/vant/src/time-picker/README.zh-CN.md +++ b/packages/vant/src/time-picker/README.zh-CN.md @@ -160,6 +160,31 @@ export default { }; ``` +### 限制时间范围 + +使用 `min-time` 和 `max-time` 来限制时间范围，约定格式 `10:00:00`。 + +```html + +``` + +```js +import { ref } from 'vue'; + +export default { + setup() { + const currentTime = ref(['12', '00', '00']); + return { currentTime }; + }, +}; +``` + ### 高级用法 `filter` 函数的第三个参数能获取到当前选择的时间，这在使用非受控模式时，可以更灵活地过滤掉不需要的时间。 @@ -216,6 +241,8 @@ export default { | max-minute | 可选的最大分钟 | _number \| string_ | `59` | | min-second | 可选的最小秒数 | _number \| string_ | `0` | | max-second | 可选的最大秒数 | _number \| string_ | `59` | +| min-time `v4.4.2` | 可选的最小时间，格式参考 `07:40:00`，使用时 `min-hour` `min-minute` `min-second` 无效 | _string_ | - | +| max-time `v4.4.2` | 可选的最大时间，格式参考 `10:20:00`，使用时 `max-hour` `max-minute` `max-second` 无效 | _string_ | - | | title | 顶部栏标题 | _string_ | `''` | | confirm-button-text | 确认按钮文字 | _string_ | `确认` | | cancel-button-text | 取消按钮文字 | _string_ | `取消` | diff --git a/packages/vant/src/time-picker/TimePicker.tsx b/packages/vant/src/time-picker/TimePicker.tsx index 5c0a4e060..4e477085c 100644 --- a/packages/vant/src/time-picker/TimePicker.tsx +++ b/packages/vant/src/time-picker/TimePicker.tsx @@ -1,27 +1,27 @@ import { - ref, - watch, computed, defineComponent, - type PropType, + ref, + watch, type ExtractPropTypes, + type PropType, } from 'vue'; // Utils import { - pick, - extend, - createNamespace, - makeNumericProp, - isSameValue, -} from '../utils'; -import { - genOptions, - sharedProps, - pickerInheritKeys, formatValueRange, + genOptions, + pickerInheritKeys, + sharedProps, type TimeFilter, } from '../date-picker/utils'; +import { + createNamespace, + extend, + isSameValue, + makeNumericProp, + pick, +} from '../utils'; // Components import { Picker } from '../picker'; @@ -30,6 +30,10 @@ const [name] = createNamespace('time-picker'); export type TimePickerColumnType = 'hour' | 'minute' | 'second'; +const validateTime = (val: string) => + /^([01]\d|2[0-3]):([0-5]\d):([0-5]\d)$/.test(val); +const fullColumns: TimePickerColumnType[] = ['hour', 'minute', 'second']; + export const timePickerProps = extend({}, sharedProps, { minHour: makeNumericProp(0), maxHour: makeNumericProp(23), @@ -37,6 +41,14 @@ export const timePickerProps = extend({}, sharedProps, { maxMinute: makeNumericProp(59), minSecond: makeNumericProp(0), maxSecond: makeNumericProp(59), + minTime: { + type: String, + validator: validateTime, + }, + maxTime: { + type: String, + validator: validateTime, + }, columnsType: { type: Array as PropType, default: () => ['hour', 'minute'], @@ -56,14 +68,48 @@ export default defineComponent({ setup(props, { emit, slots }) { const currentValues = ref(props.modelValue); - const columns = computed(() => - props.columnsType.map((type) => { + const getValidTime = (time: string) => { + const timeLimitArr = time.split(':'); + return fullColumns.map((col, i) => + props.columnsType.includes(col) ? timeLimitArr[i] : '00' + ); + }; + + const columns = computed(() => { + let { minHour, maxHour, minMinute, maxMinute, minSecond, maxSecond } = + props; + + if (props.minTime || props.maxTime) { + const fullTime: Record = { + hour: 0, + minute: 0, + second: 0, + }; + props.columnsType.forEach((col, i) => { + fullTime[col] = currentValues.value[i] ?? 0; + }); + const { hour, minute } = fullTime; + if (props.minTime) { + const [minH, minM, minS] = getValidTime(props.minTime); + minHour = minH; + minMinute = +hour <= +minHour ? minM : '00'; + minSecond = +hour <= +minHour && +minute <= +minMinute ? minS : '00'; + } + if (props.maxTime) { + const [maxH, maxM, maxS] = getValidTime(props.maxTime); + maxHour = maxH; + maxMinute = +hour >= +maxHour ? maxM : '59'; + maxSecond = +hour >= +maxHour && +minute >= +maxMinute ? maxS : '59'; + } + } + + return props.columnsType.map((type) => { const { filter, formatter } = props; switch (type) { case 'hour': return genOptions( - +props.minHour, - +props.maxHour, + +minHour, + +maxHour, type, formatter, filter, @@ -71,8 +117,8 @@ export default defineComponent({ ); case 'minute': return genOptions( - +props.minMinute, - +props.maxMinute, + +minMinute, + +maxMinute, type, formatter, filter, @@ -80,8 +126,8 @@ export default defineComponent({ ); case 'second': return genOptions( - +props.minSecond, - +props.maxSecond, + +minSecond, + +maxSecond, type, formatter, filter, @@ -95,8 +141,8 @@ export default defineComponent({ } return []; } - }) - ); + }); + }); watch(currentValues, (newValues) => { if (!isSameValue(newValues, props.modelValue)) { diff --git a/packages/vant/src/time-picker/demo/index.vue b/packages/vant/src/time-picker/demo/index.vue index 1fcd1be9e..30a669049 100644 --- a/packages/vant/src/time-picker/demo/index.vue +++ b/packages/vant/src/time-picker/demo/index.vue @@ -14,6 +14,7 @@ const t = useTranslate({ columnsType: '选项类型', optionsFilter: '过滤选项', optionsFormatter: '格式化选项', + timeUniteRange: '时分时间范围', }, 'en-US': { hour: 'h', @@ -23,6 +24,7 @@ const t = useTranslate({ columnsType: 'Columns Type', optionsFilter: 'Options Filter', optionsFormatter: 'Options Formatter', + timeUniteRange: 'Hour Minute Range', }, }); @@ -31,6 +33,7 @@ const secondTime = ref(['12', '00', '00']); const rangeTime = ref(['12', '35']); const filterTime = ref(['12', ' 00']); const formatterTime = ref(['12', '00']); +const hourMinuteTime = ref(['12', '00', '00']); const columnsType: TimePickerColumnType[] = ['hour', 'minute', 'second']; @@ -120,6 +123,16 @@ const formatter = (type: string, option: PickerOption) => { /> + + + + diff --git a/packages/vant/src/time-picker/test/__snapshots__/demo-ssr.spec.ts.snap b/packages/vant/src/time-picker/test/__snapshots__/demo-ssr.spec.ts.snap index 2c921532b..033a25774 100644 --- a/packages/vant/src/time-picker/test/__snapshots__/demo-ssr.spec.ts.snap +++ b/packages/vant/src/time-picker/test/__snapshots__/demo-ssr.spec.ts.snap @@ -3530,6 +3530,1250 @@ exports[`should render demo and match snapshot 1`] = ` +
+ +
+
+ + +
+ Choose Time +
+ +
+
+ +
+
    + +
  • +
    + 09 +
    +
    • +
  • +
    + 10 +
    +
    • +
  • +
    + 11 +
    +
    • +
  • +
    + 12 +
    +
    • +
  • +
    + 13 +
    +
    • +
  • +
    + 14 +
    +
    • +
  • +
    + 15 +
    +
    • +
  • +
    + 16 +
    +
    • +
  • +
    + 17 +
    +
    • +
  • +
    + 18 +
    +
    • +
  • +
    + 19 +
    +
    • +
  • +
    + 20 +
    +
    • +
+
+
+
    + +
  • +
    + 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 +
    +
    • +
+
+ +
+
+
+
+
+
+
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 2c69e792d..17bcb2362 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 @@ -3498,6 +3498,1243 @@ exports[`should render demo and match snapshot 1`] = `
+
+
+
+ +
+ Choose Time +
+ +
+
+
+
    +
  • +
    + 09 +
    +
    • +
  • +
    + 10 +
    +
    • +
  • +
    + 11 +
    +
    • +
  • +
    + 12 +
    +
    • +
  • +
    + 13 +
    +
    • +
  • +
    + 14 +
    +
    • +
  • +
    + 15 +
    +
    • +
  • +
    + 16 +
    +
    • +
  • +
    + 17 +
    +
    • +
  • +
    + 18 +
    +
    • +
  • +
    + 19 +
    +
    • +
  • +
    + 20 +
    +
    • +
+
+
+
    +
  • +
    + 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 +
    +
    • +
+
+
+
+
+
+
+
+
diff --git a/packages/vant/src/time-picker/test/index.spec.tsx b/packages/vant/src/time-picker/test/index.spec.tsx index c3dc38107..e0d277e1e 100644 --- a/packages/vant/src/time-picker/test/index.spec.tsx +++ b/packages/vant/src/time-picker/test/index.spec.tsx @@ -269,3 +269,51 @@ test('should emit confirm event correctly after setting smaller max-hour and max ], ]); }); + +test('should time range when set props min-time', async () => { + const wrapper = mount(TimePicker, { + props: { + minTime: '09:40:10', + maxTime: '20:20:50', + modelValue: ['08', '30', '00'], + columnsType: ['hour', 'minute', 'second'], + }, + }); + + await wrapper.find('.van-picker__confirm').trigger('click'); + expect(wrapper.emitted('confirm')?.[0]).toEqual([ + { + selectedOptions: [ + { text: '09', value: '09' }, + { text: '40', value: '40' }, + { text: '10', value: '10' }, + ], + selectedValues: ['09', '40', '10'], + selectedIndexes: [0, 0, 0], + }, + ]); +}); + +test('should time range when set props max-time', async () => { + const wrapper = mount(TimePicker, { + props: { + minTime: '09:40:10', + maxTime: '20:20:50', + modelValue: ['23', '30', '55'], + columnsType: ['hour', 'minute', 'second'], + }, + }); + + await wrapper.find('.van-picker__confirm').trigger('click'); + expect(wrapper.emitted('confirm')?.[0]).toEqual([ + { + selectedOptions: [ + { text: '20', value: '20' }, + { text: '20', value: '20' }, + { text: '50', value: '50' }, + ], + selectedValues: ['20', '20', '50'], + selectedIndexes: [11, 20, 50], + }, + ]); +});