diff --git a/packages/date-picker/src/panel/time-select.vue b/packages/date-picker/src/panel/time-select.vue index 7c227a2e4..1e1cb2dec 100644 --- a/packages/date-picker/src/panel/time-select.vue +++ b/packages/date-picker/src/panel/time-select.vue @@ -105,6 +105,24 @@ handleMenuEnter() { this.$nextTick(() => this.scrollToOption()); + }, + + scrollDown(step) { + const items = this.items; + let index = items.map(item => item.value).indexOf(this.value); + let length = items.length; + let total = Math.abs(step); + step = step > 0 ? 1 : -1; + while (length-- && total) { + index = (index + step + items.length) % items.length; + const item = items[index]; + if (!item.disabled) { + total--; + } + } + if (!items[index].disabled) { + this.value = items[index].value; + } } }, diff --git a/packages/date-picker/src/picker/time-select.js b/packages/date-picker/src/picker/time-select.js index fca8d5648..902341e91 100644 --- a/packages/date-picker/src/picker/time-select.js +++ b/packages/date-picker/src/picker/time-select.js @@ -9,5 +9,35 @@ export default { beforeCreate() { this.type = 'time-select'; this.panel = Panel; + }, + + methods: { + handleKeydown(event) { + const keyCode = event.keyCode; + // TAB or ESC or Enter + if (keyCode === 9 || keyCode === 27 || keyCode === 13) { + const input = this.$refs.reference; + const index = this.picker.items.map(v => v.value).indexOf(input.currentValue); + const exist = index !== -1; + if (!exist) { + input.currentValue = this.currentValue; + } else { + this.picker.handleClick(this.picker.items[index]); + } + this.pickerVisible = false; + input.$refs.input.blur(); + event.stopPropagation(); + return; + } + + if (keyCode === 38 || keyCode === 40) { + const mapping = { 40: 1, 38: -1 }; + const offset = mapping[keyCode.toString()]; + this.picker.scrollDown(offset); + this.currentValue = this.picker.value; + event.stopPropagation(); + return; + } + } } };