diff --git a/packages/vant/src/time-picker/README.md b/packages/vant/src/time-picker/README.md
index ddb8bbcb8..86dc18d03 100644
--- a/packages/vant/src/time-picker/README.md
+++ b/packages/vant/src/time-picker/README.md
@@ -35,6 +35,40 @@ export default {
};
```
+### Columns Type
+
+Using `columns-type` prop to control the type of columns.
+
+For example:
+
+- Pass in `['hour']` to select hour.
+- Pass in `['minute']` to select minute.
+- Pass in `['minute', 'second']` to select minute and second.
+- Pass in `['hour', 'minute', 'second']` to select hour, minute and second.
+
+```html
+
+```
+
+```js
+import { ref } from 'vue';
+
+export default {
+ setup() {
+ const currentTime = ref(['12', '00', '00']);
+ const columnsType = ['hour', 'minute', 'second'];
+ return {
+ currentTime,
+ columnsType,
+ };
+ },
+};
+```
+
### Time Range
```html
@@ -133,10 +167,12 @@ export default {
| --- | --- | --- | --- |
| v-model | Current time | _string[]_ | - |
| columns-type | Columns type | _string[]_ | `['hour', 'minute']` |
-| min-hour | Min hour for `time` type | _number \| string_ | `0` |
-| max-hour | Max hour for `time` type | _number \| string_ | `23` |
-| min-minute | Max minute for `time` type | _number \| string_ | `0` |
-| max-minute | Max minute for `time` type | _number \| string_ | `59` |
+| min-hour | Min hour | _number \| string_ | `0` |
+| max-hour | Max hour | _number \| string_ | `23` |
+| min-minute | Min minute | _number \| string_ | `0` |
+| max-minute | Max minute | _number \| string_ | `59` |
+| min-second | Min second | _number \| string_ | `0` |
+| max-second | Max second | _number \| string_ | `59` |
| 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 c025dac1e..9ac3d3d66 100644
--- a/packages/vant/src/time-picker/README.zh-CN.md
+++ b/packages/vant/src/time-picker/README.zh-CN.md
@@ -20,6 +20,8 @@ app.use(TimePicker);
### 基础用法
+通过 `v-model` 绑定当前选中的时间。
+
```html
```
@@ -35,6 +37,40 @@ export default {
};
```
+### 选项类型
+
+通过 `columns-type` 属性可以控制选项的类型,支持以任意顺序对 `hour`、`minute` 和 `second` 进行排列组合。
+
+比如:
+
+- 传入 `['hour']` 来单独选择小时。
+- 传入 `['minute']` 来单独选择分钟。
+- 传入 `['minute', 'second']` 来选择分钟和秒。
+- 传入 `['hour', 'minute', 'second']` 来选择小时、分钟和秒。
+
+```html
+
+```
+
+```js
+import { ref } from 'vue';
+
+export default {
+ setup() {
+ const currentTime = ref(['12', '00', '00']);
+ const columnsType = ['hour', 'minute', 'second'];
+ return {
+ currentTime,
+ columnsType,
+ };
+ },
+};
+```
+
### 时间范围
```html
@@ -136,6 +172,8 @@ export default {
| max-hour | 可选的最大小时 | _number \| string_ | `23` |
| min-minute | 可选的最小分钟 | _number \| string_ | `0` |
| max-minute | 可选的最大分钟 | _number \| string_ | `59` |
+| min-second | 可选的最小秒数 | _number \| string_ | `0` |
+| max-second | 可选的最大秒数 | _number \| string_ | `59` |
| 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 a24d24ba5..c1964e86c 100644
--- a/packages/vant/src/time-picker/TimePicker.tsx
+++ b/packages/vant/src/time-picker/TimePicker.tsx
@@ -23,13 +23,15 @@ import { Picker } from '../picker';
const [name] = createNamespace('time-picker');
-export type TimePickerColumnType = 'hour' | 'minute';
+export type TimePickerColumnType = 'hour' | 'minute' | 'second';
const timePickerProps = extend({}, sharedProps, {
minHour: makeNumericProp(0),
maxHour: makeNumericProp(23),
minMinute: makeNumericProp(0),
maxMinute: makeNumericProp(59),
+ minSecond: makeNumericProp(0),
+ maxSecond: makeNumericProp(59),
columnsType: {
type: Array as PropType,
default: () => ['hour', 'minute'],
@@ -70,6 +72,8 @@ export default defineComponent({
return genOptions(+props.minHour, +props.maxHour, 'hour');
case 'minute':
return genOptions(+props.minMinute, +props.maxMinute, 'minute');
+ case 'second':
+ return genOptions(+props.minSecond, +props.maxSecond, 'second');
default:
throw new Error(
`[Vant] DatePicker: unsupported columns type: ${type}`
diff --git a/packages/vant/src/time-picker/demo/index.vue b/packages/vant/src/time-picker/demo/index.vue
index c26152500..9653b352c 100644
--- a/packages/vant/src/time-picker/demo/index.vue
+++ b/packages/vant/src/time-picker/demo/index.vue
@@ -3,6 +3,7 @@ import VanTimePicker from '..';
import { ref } from 'vue';
import { useTranslate } from '../../../docs/site/use-translate';
import type { PickerOption } from '../../picker';
+import { TimePickerColumnType } from '../TimePicker';
const t = useTranslate({
'zh-CN': {
@@ -10,6 +11,7 @@ const t = useTranslate({
minute: '分',
timeRange: '时间范围',
chooseTime: '选择时间',
+ columnsType: '选项类型',
optionsFilter: '过滤选项',
optionsFormatter: '格式化选项',
},
@@ -18,16 +20,20 @@ const t = useTranslate({
minute: 'm',
timeRange: 'Time Range',
chooseTime: 'Choose Time',
+ columnsType: 'Columns Type',
optionsFilter: 'Options Filter',
optionsFormatter: 'Options Formatter',
},
});
const baseTime = ref(['12', '00']);
+const secondTime = ref(['12', '00', '00']);
const rangeTime = ref(['12', '35']);
const filterTime = ref(['12', ' 00']);
const formatterTime = ref(['12', '00']);
+const columnsType: TimePickerColumnType[] = ['hour', 'minute', 'second'];
+
const filter = (type: string, options: PickerOption[]) => {
if (type === 'minute') {
return options.filter((option) => Number(option.value) % 10 === 0);
@@ -48,10 +54,14 @@ const formatter = (type: string, option: PickerOption) => {
+
+
+
+