mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-02-17 11:49:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: update timepicker doc (#5326)

Browse Source
This commit is contained in:
iamkun 2022-01-12 08:43:21 +08:00 committed by GitHub
parent 0a833ace95
commit 71a7755527
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 63 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/en-US/component/time-picker.md
View File

@ -11,12 +11,22 @@ Use Time Picker for time input.
Can pick an arbitrary time.
:::demo Use `el-time-picker` label, and you can limit the time range by specifying `disabledHours` `disabledMinutes` and `disabledSeconds`. By default, you can scroll the mouse wheel to pick time, alternatively you can use the control arrows when the `arrow-control` attribute is set.
:::demo By default, you can scroll the mouse wheel to pick time, alternatively you can use the control arrows when the `arrow-control` attribute is set.
time-picker/basic
:::
## Limit the time range
You can also limit the time range.
:::demo Limit the time range by specifying `disabledHours` `disabledMinutes` and `disabledSeconds`.
time-picker/basic-range
:::
## Arbitrary time range
Can pick an arbitrary time range.

48
docs/examples/time-picker/basic-range.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<div class="demo-basic">
<el-time-picker
v-model="value1"
:disabled-hours="disabledHours"
:disabled-minutes="disabledMinutes"
:disabled-seconds="disabledSeconds"
placeholder="Arbitrary time"
>
</el-time-picker>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value1 = ref(new Date(2016, 9, 10, 18, 30))
const makeRange = (start: number, end: number) => {
const result: number[] = []
for (let i = start; i <= end; i++) {
result.push(i)
}
return result
}
const disabledHours = () => {
return makeRange(0, 16).concat(makeRange(19, 23))
}
const disabledMinutes = (hour: number) => {
if (hour === 17) {
return makeRange(0, 29)
}
if (hour === 18) {
return makeRange(31, 59)
}
}
const disabledSeconds = (hour: number, minute: number) => {
if (hour === 18 && minute === 30) {
return makeRange(1, 59)
}
}
</script>
<style>
.demo-basic .el-date-editor {
margin: 8px;
}
</style>

46
docs/examples/time-picker/basic.vue
View File

@ -1,54 +1,16 @@
<template>
<div class="demo-basic">
<el-time-picker
v-model="value1"
:disabled-hours="disabledHours"
:disabled-minutes="disabledMinutes"
:disabled-seconds="disabledSeconds"
placeholder="Arbitrary time"
>
<el-time-picker v-model="value1" placeholder="Arbitrary time">
</el-time-picker>
<el-time-picker
v-model="value2"
arrow-control
:disabled-hours="disabledHours"
:disabled-minutes="disabledMinutes"
:disabled-seconds="disabledSeconds"
placeholder="Arbitrary time"
>
<el-time-picker v-model="value2" arrow-control placeholder="Arbitrary time">
</el-time-picker>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value1 = ref(new Date(2016, 9, 10, 18, 30))
const value2 = ref(new Date(2016, 9, 10, 18, 30))
const makeRange = (start: number, end: number) => {
const result: number[] = []
for (let i = start; i <= end; i++) {
result.push(i)
}
return result
}
const disabledHours = () => {
return makeRange(0, 16).concat(makeRange(19, 23))
}
const disabledMinutes = (hour: number) => {
if (hour === 17) {
return makeRange(0, 29)
}
if (hour === 18) {
return makeRange(31, 59)
}
}
const disabledSeconds = (hour: number, minute: number) => {
if (hour === 18 && minute === 30) {
return makeRange(1, 59)
}
}
const value1 = ref()
const value2 = ref()
</script>
<style>