mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(TimePicker): add descriptions for time range
This commit is contained in:
parent
4dfd1fafb8
commit
2dd3bf8aec
@ -71,6 +71,10 @@ export default {
|
|||||||
|
|
||||||
### Time Range
|
### Time Range
|
||||||
|
|
||||||
|
You can use props like `min-hour` and `max-hour` to limit the range of hours, `min-minute` and `max-minute` to limit the range of minutes, and `min-second` and `max-second` to limit the range of seconds.
|
||||||
|
|
||||||
|
For example, in the following example, users can only select hours between `10` and `20`, and minutes between `30` and `40`.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-time-picker
|
<van-time-picker
|
||||||
v-model="currentTime"
|
v-model="currentTime"
|
||||||
@ -93,6 +97,36 @@ export default {
|
|||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Overall Time Range
|
||||||
|
|
||||||
|
You can use `min-time` and `max-time` attributes to limit the overall time range, with the format `10:00:00`.
|
||||||
|
|
||||||
|
- When `min-time` is set, attributes like `min-hour`, `min-minute`, and `min-second` will not take effect.
|
||||||
|
- When `max-time` is set, attributes like `max-hour`, `max-minute`, and `max-second` will not take effect.
|
||||||
|
|
||||||
|
For example, in the following example, users can select any time between `09:40:10` and `20:20:50`.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-time-picker
|
||||||
|
v-model="currentTime"
|
||||||
|
title="Choose Time"
|
||||||
|
:columns-type="['hour', 'minute', 'second']"
|
||||||
|
min-time="09:40:10"
|
||||||
|
max-time="20:20:50"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const currentTime = ref(['12', '00', '00']);
|
||||||
|
return { currentTime };
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
### Options Formatter
|
### Options Formatter
|
||||||
|
|
||||||
Using `formatter` prop to format option text.
|
Using `formatter` prop to format option text.
|
||||||
@ -159,31 +193,6 @@ export default {
|
|||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
### Limit Time Range
|
|
||||||
|
|
||||||
Using `min-time` and `max-time` props to limit the time range, Convention format `10:00:00`.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-time-picker
|
|
||||||
v-model="currentTime"
|
|
||||||
title="Choose Time"
|
|
||||||
:columns-type="['hour', 'minute', 'second']"
|
|
||||||
min-time="09:40:10"
|
|
||||||
max-time="20:20:50"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
import { ref } from 'vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
setup() {
|
|
||||||
const currentTime = ref(['12', '00', '00']);
|
|
||||||
return { currentTime };
|
|
||||||
},
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### Advanced Usage
|
### 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.
|
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.
|
||||||
|
@ -73,6 +73,10 @@ export default {
|
|||||||
|
|
||||||
### 时间范围
|
### 时间范围
|
||||||
|
|
||||||
|
你可以使用 `min-hour` 和 `max-hour` 等属性来限制小时(hour)范围、分钟(minute)范围和秒(second)范围。
|
||||||
|
|
||||||
|
比如以下示例,用户可以选择的小时是 `10 ~ 20` ,分钟是 `30 ~ 40`。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-time-picker
|
<van-time-picker
|
||||||
v-model="currentTime"
|
v-model="currentTime"
|
||||||
@ -95,6 +99,36 @@ export default {
|
|||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### 整体时间范围
|
||||||
|
|
||||||
|
你可以使用 `min-time` 和 `max-time` 属性来限制整体时间范围,约定格式 `10:00:00`。
|
||||||
|
|
||||||
|
- 设置 `min-time` 后,`min-hour`、`min-minute`、`min-second` 属性将不会生效。
|
||||||
|
- 设置 `max-time` 后,`max-hour`、`max-minute`、`max-second` 属性将不会生效。
|
||||||
|
|
||||||
|
比如以下示例,用户可以选择从 `09:40:10` 到 `20:20:50` 的任意时间。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-time-picker
|
||||||
|
v-model="currentTime"
|
||||||
|
title="选择时间"
|
||||||
|
:columns-type="['hour', 'minute', 'second']"
|
||||||
|
min-time="09:40:10"
|
||||||
|
max-time="20:20:50"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const currentTime = ref(['12', '00', '00']);
|
||||||
|
return { currentTime };
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
### 格式化选项
|
### 格式化选项
|
||||||
|
|
||||||
通过传入 `formatter` 函数,可以对选项的文字进行格式化。
|
通过传入 `formatter` 函数,可以对选项的文字进行格式化。
|
||||||
@ -160,31 +194,6 @@ export default {
|
|||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
### 限制时间范围
|
|
||||||
|
|
||||||
使用 `min-time` 和 `max-time` 来限制时间范围,约定格式 `10:00:00`。
|
|
||||||
|
|
||||||
```html
|
|
||||||
<van-time-picker
|
|
||||||
v-model="currentTime"
|
|
||||||
title="选择时间"
|
|
||||||
:columns-type="['hour', 'minute', 'second']"
|
|
||||||
min-time="09:40:10"
|
|
||||||
max-time="20:20:50"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
|
||||||
import { ref } from 'vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
setup() {
|
|
||||||
const currentTime = ref(['12', '00', '00']);
|
|
||||||
return { currentTime };
|
|
||||||
},
|
|
||||||
};
|
|
||||||
```
|
|
||||||
|
|
||||||
### 高级用法
|
### 高级用法
|
||||||
|
|
||||||
`filter` 函数的第三个参数能获取到当前选择的时间,这在使用非受控模式时,可以更灵活地过滤掉不需要的时间。
|
`filter` 函数的第三个参数能获取到当前选择的时间,这在使用非受控模式时,可以更灵活地过滤掉不需要的时间。
|
||||||
@ -241,8 +250,8 @@ export default {
|
|||||||
| max-minute | 可选的最大分钟 | _number \| string_ | `59` |
|
| max-minute | 可选的最大分钟 | _number \| string_ | `59` |
|
||||||
| min-second | 可选的最小秒数 | _number \| string_ | `0` |
|
| min-second | 可选的最小秒数 | _number \| string_ | `0` |
|
||||||
| max-second | 可选的最大秒数 | _number \| string_ | `59` |
|
| max-second | 可选的最大秒数 | _number \| string_ | `59` |
|
||||||
| min-time `v4.5.0` | 可选的最小时间,格式参考 `07:40:00`,使用时 `min-hour` `min-minute` `min-second` 无效 | _string_ | - |
|
| min-time `v4.5.0` | 可选的最小时间,格式参考 `07:40:00`,使用时 `min-hour` `min-minute` `min-second` 不会生效 | _string_ | - |
|
||||||
| max-time `v4.5.0` | 可选的最大时间,格式参考 `10:20:00`,使用时 `max-hour` `max-minute` `max-second` 无效 | _string_ | - |
|
| max-time `v4.5.0` | 可选的最大时间,格式参考 `10:20:00`,使用时 `max-hour` `max-minute` `max-second` 不会生效 | _string_ | - |
|
||||||
| title | 顶部栏标题 | _string_ | `''` |
|
| title | 顶部栏标题 | _string_ | `''` |
|
||||||
| confirm-button-text | 确认按钮文字 | _string_ | `确认` |
|
| confirm-button-text | 确认按钮文字 | _string_ | `确认` |
|
||||||
| cancel-button-text | 取消按钮文字 | _string_ | `取消` |
|
| cancel-button-text | 取消按钮文字 | _string_ | `取消` |
|
||||||
|
@ -14,7 +14,7 @@ const t = useTranslate({
|
|||||||
columnsType: '选项类型',
|
columnsType: '选项类型',
|
||||||
optionsFilter: '过滤选项',
|
optionsFilter: '过滤选项',
|
||||||
optionsFormatter: '格式化选项',
|
optionsFormatter: '格式化选项',
|
||||||
timeUniteRange: '时分时间范围',
|
overallTimeRange: '整体时间范围',
|
||||||
},
|
},
|
||||||
'en-US': {
|
'en-US': {
|
||||||
hour: 'h',
|
hour: 'h',
|
||||||
@ -24,7 +24,7 @@ const t = useTranslate({
|
|||||||
columnsType: 'Columns Type',
|
columnsType: 'Columns Type',
|
||||||
optionsFilter: 'Options Filter',
|
optionsFilter: 'Options Filter',
|
||||||
optionsFormatter: 'Options Formatter',
|
optionsFormatter: 'Options Formatter',
|
||||||
timeUniteRange: 'Hour Minute Range',
|
overallTimeRange: 'Overall Time Range',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -107,6 +107,16 @@ const formatter = (type: string, option: PickerOption) => {
|
|||||||
/>
|
/>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block card :title="t('overallTimeRange')">
|
||||||
|
<van-time-picker
|
||||||
|
v-model="hourMinuteTime"
|
||||||
|
:title="t('chooseTime')"
|
||||||
|
:columns-type="['hour', 'minute', 'second']"
|
||||||
|
min-time="09:40:10"
|
||||||
|
max-time="20:20:50"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
<demo-block card :title="t('optionsFormatter')">
|
<demo-block card :title="t('optionsFormatter')">
|
||||||
<van-time-picker
|
<van-time-picker
|
||||||
v-model="formatterTime"
|
v-model="formatterTime"
|
||||||
@ -123,16 +133,6 @@ const formatter = (type: string, option: PickerOption) => {
|
|||||||
/>
|
/>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
|
||||||
<demo-block card :title="t('timeUniteRange')">
|
|
||||||
<van-time-picker
|
|
||||||
v-model="hourMinuteTime"
|
|
||||||
:title="t('chooseTime')"
|
|
||||||
:columns-type="['hour', 'minute', 'second']"
|
|
||||||
min-time="09:40:10"
|
|
||||||
max-time="20:20:50"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block card :title="t('advancedUsage')">
|
<demo-block card :title="t('advancedUsage')">
|
||||||
<van-time-picker :title="t('chooseTime')" :filter="timeFilter" />
|
<van-time-picker :title="t('chooseTime')" :filter="timeFilter" />
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user