Skip to content

Commit

Permalink
docs(TimePicker): add descriptions for time range
Browse files Browse the repository at this point in the history
  • Loading branch information
chenjiahan committed Jun 11, 2023
1 parent 4dfd1fa commit 2dd3bf8
Show file tree
Hide file tree
Showing 5 changed files with 808 additions and 790 deletions.
59 changes: 34 additions & 25 deletions packages/vant/src/time-picker/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,10 @@ export default {

### 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
<van-time-picker
v-model="currentTime"
Expand All @@ -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

Using `formatter` prop to format option text.
Expand Down Expand Up @@ -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

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.
Expand Down
63 changes: 36 additions & 27 deletions packages/vant/src/time-picker/README.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,10 @@ export default {

### 时间范围

你可以使用 `min-hour``max-hour` 等属性来限制小时(hour)范围、分钟(minute)范围和秒(second)范围。

比如以下示例,用户可以选择的小时是 `10 ~ 20` ,分钟是 `30 ~ 40`

```html
<van-time-picker
v-model="currentTime"
Expand All @@ -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` 函数,可以对选项的文字进行格式化。
Expand Down Expand Up @@ -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` 函数的第三个参数能获取到当前选择的时间,这在使用非受控模式时,可以更灵活地过滤掉不需要的时间。
Expand Down Expand Up @@ -241,8 +250,8 @@ export default {
| max-minute | 可选的最大分钟 | _number \| string_ | `59` |
| min-second | 可选的最小秒数 | _number \| string_ | `0` |
| max-second | 可选的最大秒数 | _number \| string_ | `59` |
| 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_ | - |
| 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_ | - |
| title | 顶部栏标题 | _string_ | `''` |
| confirm-button-text | 确认按钮文字 | _string_ | `确认` |
| cancel-button-text | 取消按钮文字 | _string_ | `取消` |
Expand Down
24 changes: 12 additions & 12 deletions packages/vant/src/time-picker/demo/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const t = useTranslate({
columnsType: '选项类型',
optionsFilter: '过滤选项',
optionsFormatter: '格式化选项',
timeUniteRange: '时分时间范围',
overallTimeRange: '整体时间范围',
},
'en-US': {
hour: 'h',
Expand All @@ -24,7 +24,7 @@ const t = useTranslate({
columnsType: 'Columns Type',
optionsFilter: 'Options Filter',
optionsFormatter: 'Options Formatter',
timeUniteRange: 'Hour Minute Range',
overallTimeRange: 'Overall Time Range',
},
});
Expand Down Expand Up @@ -107,6 +107,16 @@ const formatter = (type: string, option: PickerOption) => {
/>
</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')">
<van-time-picker
v-model="formatterTime"
Expand All @@ -123,16 +133,6 @@ const formatter = (type: string, option: PickerOption) => {
/>
</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')">
<van-time-picker :title="t('chooseTime')" :filter="timeFilter" />
</demo-block>
Expand Down
Loading

0 comments on commit 2dd3bf8

Please sign in to comment.