docs(TimePicker): add descriptions for time range

Author: chenjiahan

packages/vant/src/time-picker/README.md

@@ -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"
@@ -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.
@@ -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.

packages/vant/src/time-picker/README.zh-CN.md

@@ -73,6 +73,10 @@ export default {
 
 ### 时间范围
 
+你可以使用 `min-hour` 和 `max-hour` 等属性来限制小时（hour）范围、分钟（minute）范围和秒（second）范围。
+
+比如以下示例，用户可以选择的小时是 `10 ~ 20` ，分钟是 `30 ~ 40`。
+
 ```html
 <van-time-picker
   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` 函数，可以对选项的文字进行格式化。
@@ -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` 函数的第三个参数能获取到当前选择的时间，这在使用非受控模式时，可以更灵活地过滤掉不需要的时间。
@@ -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_ | `取消` |

packages/vant/src/time-picker/demo/index.vue

@@ -14,7 +14,7 @@ const t = useTranslate({
     columnsType: '选项类型',
     optionsFilter: '过滤选项',
     optionsFormatter: '格式化选项',
-    timeUniteRange: '时分时间范围',
+    overallTimeRange: '整体时间范围',
   },
   'en-US': {
     hour: 'h',
@@ -24,7 +24,7 @@ const t = useTranslate({
     columnsType: 'Columns Type',
     optionsFilter: 'Options Filter',
     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 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"
@@ -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>