javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: update time select & doc (#1014)

Browse Source
This commit is contained in:
zazzaz
2020-12-16 22:09:48 +08:00
committed by GitHub
parent 6b83a42999
commit f67390ed31
12 changed files with 167 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
packages/time-select/__tests__/time-select.spec.ts Normal file
View File

@@ -0,0 +1,69 @@
import { mount } from '@vue/test-utils'
import { nextTick } from 'vue'
import TimeSelect from '../src/time-select.vue'
const _mount = (template: string, data, otherObj?) => mount({
components: {
'el-time-select': TimeSelect,
},
template,
data,
...otherObj,
},{
attachTo: 'body',
})
afterEach(() => {
document.documentElement.innerHTML = ''
})
describe('TimeSelect', () => {
it('create', async () => {
const wrapper = _mount(`<el-time-select
:style="{color:'red'}"
class="customClass"
/>`, () => ({
readonly: true }))
const outterInput = wrapper.find('.el-select')
expect(outterInput.classes()).toContain('customClass')
expect(outterInput.attributes().style).toBeDefined()
})
it('set default value', async () => {
const wrapper = _mount(`<el-time-select
v-model="value"
/>`, () => ({ value: '14:30' }))
const input = wrapper.find('input')
input.trigger('blur')
input.trigger('focus')
await nextTick()
expect(document.querySelector('.selected')).toBeDefined()
expect(document.querySelector('.selected').textContent).toBe('14:30')
})
it('set minTime', async () => {
const wrapper = _mount(`<el-time-select
minTime='14:30'
/>`, () => ({}))
const input = wrapper.find('input')
input.trigger('blur')
input.trigger('focus')
await nextTick()
const elms = document.querySelectorAll('.is-disabled')
const elm = elms[elms.length - 1]
expect(elm.textContent).toBe('14:30')
})
it('set maxTime', async () => {
const wrapper = _mount(`<el-time-select
maxTime='14:30'
/>`, () => ({}))
const input = wrapper.find('input')
input.trigger('blur')
input.trigger('focus')
await nextTick()
const elm = document.querySelector('.is-disabled')
expect(elm.textContent).toBe('14:30')
})
})

83
packages/time-select/src/time-select.vue
View File

@@ -33,11 +33,12 @@
<script lang="ts">
import { defineComponent, ref, computed, watch } from 'vue'
import ElSelect from '@element-plus/select'
import ElOption from '@element-plus/option'
interface Time {
hours: number
minutes: number
}
const parseTime = function (time: string): null | Time {
const parseTime = (time: string): null | Time => {
const values = (time || '').split(':')
if (values.length >= 2) {
const hours = parseInt(values[0], 10)
@@ -49,7 +50,7 @@ const parseTime = function (time: string): null | Time {
}
return null
}
const compareTime = function (time1: string, time2: string): number {
const compareTime = (time1: string, time2: string): number => {
const value1 = parseTime(time1)
const value2 = parseTime(time2)
const minutes1 = value1.minutes + value1.hours * 60
@@ -59,14 +60,14 @@ const compareTime = function (time1: string, time2: string): number {
}
return minutes1 > minutes2 ? 1 : -1
}
const formatTime = function (time: Time): string {
const formatTime = (time: Time): string => {
return (
(time.hours < 10 ? '0' + time.hours : time.hours) +
':' +
(time.minutes < 10 ? '0' + time.minutes : time.minutes)
)
}
const nextTime = function (time: string, step: string): string {
const nextTime = (time: string, step: string): string => {
const timeValue = parseTime(time)
const stepValue = parseTime(step)
const next = {
@@ -83,7 +84,7 @@ const nextTime = function (time: string, step: string): string {
export default defineComponent({
name: 'ElTimeSelect',
components: { ElSelect },
components: { ElSelect, ElOption },
model: {
prop: 'value',
event: 'change',
@@ -101,19 +102,31 @@ export default defineComponent({
size: {
type: String,
default: '',
validator: function (value) {
return !value || ['medium', 'small', 'mini'].indexOf(value) !== -1
},
validator: (value: string) => !value || ['medium', 'small', 'mini'].indexOf(value) !== -1,
},
placeholder: {
type: String,
default: '',
},
pickerOptions: {
type: Object,
default: () => {
return {}
},
start: {
type: String,
default: '09:00',
},
end: {
type: String,
default: '18:00',
},
step: {
type: String,
default: '00:30',
},
minTime: {
type: String,
default: '',
},
maxTime: {
type: String,
default: '',
},
name: {
type: String,
@@ -131,57 +144,27 @@ export default defineComponent({
emits: ['change', 'blur', 'focus', 'update:modelValue'],
setup(props) {
// data
const start = ref('09:00')
const end = ref('18:00')
const step = ref('00:30')
const value = ref(props.modelValue)
const minTime = ref('00:00')
const maxTime = ref('')
let data = {
start,
end,
step,
value,
minTime,
maxTime,
}
// computed
const items = computed(() => {
const result = []
if (start.value && end.value && step.value) {
let current = start.value
while (compareTime(current, end.value) <= 0) {
if (props.start && props.end && props.step) {
let current = props.start
while (compareTime(current, props.end) <= 0) {
result.push({
value: current,
disabled:
compareTime(current, minTime.value || '-1:-1') <= 0 ||
compareTime(current, maxTime.value || '100:100') >= 0,
compareTime(current, props.minTime || '-1:-1') <= 0 ||
compareTime(current, props.maxTime || '100:100') >= 0,
})
current = nextTime(current, step.value)
current = nextTime(current, props.step)
}
}
return result
})
// methods
const updateOptions = () => {
const options = props.pickerOptions
for (const option in options) {
if (options.hasOwnProperty(option)) {
data[option].value = options[option]
}
}
}
// watch
watch(
() => props.pickerOptions,
() => {
updateOptions()
},
)
return {
...data,
value,
items,
updateOptions,
}
},
})

2
website/docs/en-US/time-picker.md
View File

@@ -106,7 +106,7 @@ Can pick an arbitrary time range.
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value / v-model | binding value | date(TimePicker) / string(TimeSelect) | - | - |
| value / v-model | binding value | Date | - | - |
| readonly | whether TimePicker is read only | boolean | — | false |
| disabled | whether TimePicker is disabled | boolean | — | false |
| editable | whether the input is editable | boolean | — | true |

35
website/docs/en-US/time-select.md
View File

@@ -10,11 +10,9 @@ Provide a list of fixed time for users to choose.
```html
<el-time-select
v-model="value"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}"
start='08:30'
step='00:15'
end='18:30'
placeholder="Select time">
</el-time-select>
@@ -40,21 +38,18 @@ If start time is picked at first, then the end time will change accordingly.
<el-time-select
placeholder="Start time"
v-model="startTime"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}">
start='08:30'
step='00:15'
end='18:30'
>
</el-time-select>
<el-time-select
placeholder="End time"
v-model="endTime"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30',
minTime: startTime
}">
start='08:30'
step='00:15'
end='18:30'
:minTime="startTime">
</el-time-select>
</template>
@@ -74,25 +69,21 @@ If start time is picked at first, then the end time will change accordingly.
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value / v-model | binding value | date(TimePicker) / string(TimeSelect) | - | - |
| value / v-model | binding value | string | - | - |
| editable | whether the input is editable | boolean | — | true |
| clearable | whether to show clear button | boolean | — | true |
| size | size of Input | string | medium / small / mini | — |
| placeholder | placeholder in non-range mode | string | — | — |
| picker-options | additional options, check the table below | object | — | {} |
| name | same as `name` in native input | string | — | — |
| prefix-icon | Custom prefix icon class | string | — | el-icon-time |
| clear-icon | Custom clear icon class | string | — | el-icon-circle-close |
### Time Select Options
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| start | start time | string | — | 09:00 |
| end | end time | string | — | 18:00 |
| step | time step | string | — | 00:30 |
| minTime | minimum time, any time before this time will be disabled | string | — | 00:00 |
| maxTime | maximum time, any time after this time will be disabled | string | — | — |
### Events
| Event Name | Description | Parameters |
|---------|--------|---------|

2
website/docs/es/time-picker.md
View File

@@ -106,7 +106,7 @@ Es posible escoger un rango de tiempo arbitrario.
### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ----------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | -------------------- |
| value / v-model | valor enlazado | date(TimePicker) / string(TimeSelect) | - | - |
| value / v-model | valor enlazado | Date | - | - |
| readonly | si el Time Picker está en modo de sólo lectura | boolean | — | false |
| disabled | si el Time Picker se encuentra deshabilitado | boolean | — | false |
| editable | si el input puede ser editado | boolean | — | true |

34
website/docs/es/time-select.md
View File

@@ -10,11 +10,9 @@ Provee una lista de tiempo fijo para que los usuarios escojan.
```html
<el-time-select
v-model="value"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}"
start='08:30'
step='00:15'
end='18:30'
placeholder="Select time">
</el-time-select>
@@ -40,21 +38,17 @@ Si se escoge el tiempo de inicio al principio, el tiempo de finalización cambia
<el-time-select
placeholder="Start time"
v-model="startTime"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}">
start='08:30'
step='00:15'
end='18:30'>
</el-time-select>
<el-time-select
placeholder="End time"
v-model="endTime"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30',
minTime: startTime
}">
start='08:30'
step='00:15'
end='18:30'
:minTime="startTime">
</el-time-select>
</template>
@@ -74,26 +68,20 @@ Si se escoge el tiempo de inicio al principio, el tiempo de finalización cambia
### Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ----------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | -------------------- |
| value / v-model | valor enlazado | date(TimePicker) / string(TimeSelect) | - | - |
| value / v-model | valor enlazado | string | - | - |
| editable | si el input puede ser editado | boolean | — | true |
| clearable | si mostrar el botón de borrado | boolean | — | true |
| size | tamaño del input | string | medium / small / mini | — |
| placeholder | placeholder en un modo fuera de rango | string | — | — |
| picker-options | opciones adicionales, revisar la tabla posterior | object | — | {} |
| name | como `name` en input nativo | string | — | — |
| prefix-icon | Clase personalizada para el icono de prefijado | string | — | el-icon-time |
| clear-icon | Clase personalizada para el icono `clear` | string | — | el-icon-circle-close |
### Opciones para Time Select
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| -------- | ---------------------------------------- | ------ | ----------------- | ----------- |
| start | tiempo de inicio | string | — | 09:00 |
| end | tiempo de finalización | string | — | 18:00 |
| step | salto de tiempo | string | — | 00:30 |
| minTime | tiempo mínimo, cualquier tiempo antes de éste será deshabilitado | string | — | 00:00 |
| maxTime | tiempo máximo, cualquier tiempo después de éste será deshabilitado | string | — | — |
### Eventos
| Nombre de Evento | Descripción | Parámetros |
| ---------------- | ---------------------------------------- | ------------------------------ |

2
website/docs/fr-FR/time-picker.md
View File

@@ -107,7 +107,7 @@ Vous pouvez également définir un intervalle libre.
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value / v-model | La valeur liée. | date(TimePicker) / string(TimeSelect) | - | - |
| value / v-model | La valeur liée. | Date | - | - |
| readonly | Si TimePicker est en lecture seule. | boolean | — | false |
| disabled | Si TimePicker est désactivé. | boolean | — | false |
| editable | Si le champ d'input est éditable. | boolean | — | true |

35
website/docs/fr-FR/time-select.md
View File

@@ -10,11 +10,9 @@ Vous pouvez fournir une liste d'horaires fixés pour que l'utilisateur en choisi
```html
<el-time-select
v-model="value"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}"
start='08:30'
step='00:15'
end='18:30'
placeholder="Choisissez un horaire">
</el-time-select>
@@ -40,21 +38,17 @@ Vous pouvez définir un intervalle de temps. Si l'horaire de début est sélecti
<el-time-select
placeholder="Horaire de début"
v-model="startTime"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}">
start='08:30'
step='00:15'
end='18:30'>
</el-time-select>
<el-time-select
placeholder="Horaire de fin"
v-model="endTime"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30',
minTime: startTime
}">
start='08:30'
step='00:15'
end='18:30'
:minTime="startTime">
</el-time-select>
</template>
@@ -75,26 +69,21 @@ Vous pouvez définir un intervalle de temps. Si l'horaire de début est sélecti
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value / v-model | La valeur liée. | date(TimePicker) / string(TimeSelect) | - | - |
| value / v-model | La valeur liée. | string | - | - |
| editable | Si le champ d'input est éditable. | boolean | — | true |
| clearable | Si un bouton d'effacement doit être affiché. | boolean | — | true |
| size | Taille du champ. | string | medium / small / mini | — |
| placeholder | Placeholder en mode non-intervalle. | string | — | — |
| picker-options | Options additionnelles, voir la table ci-dessous. | object | — | {} |
| name | Attribut `name` natif de l'input. | string | — | — |
| prefix-icon | Classe de l'icône de préfixe. | string | — | el-icon-time |
| clear-icon | Classe de l'icône d'effacement. | string | — | el-icon-circle-close |
### Options de TimeSelect
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| start | Horaire de début. | string | — | 09:00 |
| end | Horaire de fin. | string | — | 18:00 |
| step | Intervalle entre les horaires. | string | — | 00:30 |
| minTime | Horaire minimum, n'importe quel horaire avant celui-ci sera désactivé. | string | — | 00:00 |
| maxTime | Horaire maximum, n'importe quel horaire après celui-ci sera désactivé. | string | — | — |
### Évènements
| Nom | Description | Paramètres |

2
website/docs/jp/time-picker.md
View File

@@ -175,7 +175,7 @@
### 属性
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value / v-model | バインディング値 | date(TimePicker) / string(TimeSelect) | - | - |
| value / v-model | バインディング値 | date | - | - |
| readonly | タイムピッカーが読み取り専用かどうか | boolean | — | false |
| disabled | タイムピッカーが無効になっているかどうか | boolean | — | false |
| editable | 入力が編集可能かどうか | boolean | — | true |

34
website/docs/jp/time-select.md
View File

@@ -10,11 +10,9 @@ Provide a list of fixed time for users to choose.
```html
<el-time-select
v-model="value"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}"
start='08:30'
step='00:15'
end='18:30'
placeholder="Select time">
</el-time-select>
@@ -40,21 +38,17 @@ If start time is picked at first, then the end time will change accordingly.
<el-time-select
placeholder="Start time"
v-model="startTime"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}">
start='08:30'
step='00:15'
end='18:30'>
</el-time-select>
<el-time-select
placeholder="End time"
v-model="endTime"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30',
minTime: startTime
}">
start='08:30'
step='00:15'
end='18:30'
:minTime="startTime">
</el-time-select>
</template>
@@ -74,25 +68,21 @@ If start time is picked at first, then the end time will change accordingly.
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value / v-model | binding value | date(TimePicker) / string(TimeSelect) | - | - |
| value / v-model | binding value | string | - | - |
| editable | whether the input is editable | boolean | — | true |
| clearable | whether to show clear button | boolean | — | true |
| size | size of Input | string | medium / small / mini | — |
| placeholder | placeholder in non-range mode | string | — | — |
| picker-options | additional options, check the table below | object | — | {} |
| name | same as `name` in native input | string | — | — |
| prefix-icon | Custom prefix icon class | string | — | el-icon-time |
| clear-icon | Custom clear icon class | string | — | el-icon-circle-close |
### Time Select Options
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| start | start time | string | — | 09:00 |
| end | end time | string | — | 18:00 |
| step | time step | string | — | 00:30 |
| minTime | minimum time, any time before this time will be disabled | string | — | 00:00 |
| maxTime | maximum time, any time after this time will be disabled | string | — | — |
### Events
| Event Name | Description | Parameters |
|---------|--------|---------|

2
website/docs/zh-CN/time-picker.md
View File

@@ -107,7 +107,7 @@
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value / v-model | 绑定值 | date(TimePicker) / string(TimeSelect) | — | — |
| value / v-model | 绑定值 | date | — | — |
| readonly | 完全只读 | boolean | — | false |
| disabled | 禁用 | boolean | — | false |
| editable | 文本框可输入 | boolean | — | true |

34
website/docs/zh-CN/time-select.md
View File

@@ -10,11 +10,9 @@
```html
<el-time-select
v-model="value"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}"
start='08:30'
step='00:15'
end='18:30'
placeholder="选择时间">
</el-time-select>
@@ -40,21 +38,17 @@
<el-time-select
placeholder="起始时间"
v-model="startTime"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}">
start='08:30'
step='00:15'
end='18:30'>
</el-time-select>
<el-time-select
placeholder="结束时间"
v-model="endTime"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30',
minTime: startTime
}">
start='08:30'
step='00:15'
end='18:30'
:minTime="startTime">
</el-time-select>
</template>
@@ -74,25 +68,21 @@
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| value / v-model | 绑定值 | date(TimePicker) / string(TimeSelect) | — | — |
| value / v-model | 绑定值 | string | — | — |
| editable | 文本框可输入 | boolean | — | true |
| clearable | 是否显示清除按钮 | boolean | — | true |
| size | 输入框尺寸 | string | medium / small / mini | — |
| placeholder | 非范围选择时的占位内容 | string | — | — |
| picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
| name | 原生属性 | string | — | — |
| prefix-icon | 自定义头部图标的类名 | string | — | el-icon-time |
| clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
### Time Select Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| start | 开始时间 | string | — | 09:00 |
| end | 结束时间 | string | — | 18:00 |
| step | 间隔时间 | string | — | 00:30 |
| minTime | 最小时间，小于该时间的时间段将被禁用 | string | — | 00:00 |
| maxTime | 最大时间，大于该时间的时间段将被禁用 | string | — | — |
### Events
| 事件名 | 说明 | 参数 |
|---------|--------|---------|