From 904e60ef1dace57f9213cecda508402777c9f701 Mon Sep 17 00:00:00 2001 From: YuCheng Lin <492760446@qq.com> Date: Mon, 14 Jan 2019 23:25:46 +0800 Subject: [PATCH] date-time-picker: add selectableRange in pickerOptions --- packages/date-picker/src/panel/date.vue | 26 +++++++++++--- packages/date-picker/src/picker.vue | 1 - test/unit/specs/date-picker.spec.js | 45 +++++++++++++++++++++++++ 3 files changed, 66 insertions(+), 6 deletions(-) diff --git a/packages/date-picker/src/panel/date.vue b/packages/date-picker/src/panel/date.vue index 88afe7647..b75397be6 100644 --- a/packages/date-picker/src/panel/date.vue +++ b/packages/date-picker/src/panel/date.vue @@ -158,7 +158,8 @@ nextMonth, changeYearMonthAndClampDate, extractDateFormat, - extractTimeFormat + extractTimeFormat, + timeWithinRange } from '../util'; import Clickoutside from 'element-ui/src/utils/clickoutside'; import Locale from 'element-ui/src/mixins/locale'; @@ -222,13 +223,16 @@ const format = timeFormat => {this.$refs.timepicker.format = timeFormat;}; const value = value => {this.$refs.timepicker.value = value;}; const date = date => {this.$refs.timepicker.date = date;}; + const selectableRange = selectableRange => {this.$refs.timepicker.selectableRange = selectableRange;}; this.$watch('value', value); this.$watch('date', date); + this.$watch('selectableRange', selectableRange); format(this.timeFormat); value(this.value); date(this.date); + selectableRange(this.selectableRange); }, handleClear() { @@ -333,9 +337,14 @@ handleDatePick(value) { if (this.selectionMode === 'day') { - this.date = this.value + let newDate = this.value ? modifyDate(this.value, value.getFullYear(), value.getMonth(), value.getDate()) : modifyWithTimeString(value, this.defaultTime); + // change default time while out of selectableRange + if (!this.checkDateWithinRange(newDate)) { + newDate = modifyDate(this.selectableRange[0][0], value.getFullYear(), value.getMonth(), value.getDate()); + } + this.date = newDate; this.emit(this.date, this.showTime); } else if (this.selectionMode === 'week') { this.emit(value.date); @@ -359,7 +368,7 @@ changeToNow() { // NOTE: not a permanent solution // consider disable "now" button in the future - if (!this.disabledDate || !this.disabledDate(new Date())) { + if ((!this.disabledDate || !this.disabledDate(new Date())) && this.checkDateWithinRange(new Date())) { this.date = new Date(); this.emit(this.date); } @@ -446,7 +455,7 @@ handleVisibleTimeChange(value) { const time = parseDate(value, this.timeFormat); - if (time) { + if (time && this.checkDateWithinRange(time)) { this.date = modifyDate(time, this.year, this.month, this.monthDate); this.userInputTime = null; this.$refs.timepicker.value = this.date; @@ -473,13 +482,19 @@ typeof this.disabledDate === 'function' ? !this.disabledDate(value) : true - ); + ) && this.checkDateWithinRange(value); }, getDefaultValue() { // if default-value is set, return it // otherwise, return now (the moment this method gets called) return this.defaultValue ? new Date(this.defaultValue) : new Date(); + }, + + checkDateWithinRange(date) { + return this.selectableRange.length > 0 + ? timeWithinRange(date, this.selectableRange, this.format || 'HH:mm:ss') + : true; } }, @@ -500,6 +515,7 @@ visible: false, currentView: 'date', disabledDate: '', + selectableRange: [], firstDayOfWeek: 7, showWeekNumber: false, timePickerVisible: false, diff --git a/packages/date-picker/src/picker.vue b/packages/date-picker/src/picker.vue index cca6b1f77..3e74e1439 100644 --- a/packages/date-picker/src/picker.vue +++ b/packages/date-picker/src/picker.vue @@ -864,7 +864,6 @@ export default { }; updateOptions(); this.unwatchPickerOptions = this.$watch('pickerOptions', () => updateOptions(), { deep: true }); - this.$el.appendChild(this.picker.$el); this.picker.resetView && this.picker.resetView(); diff --git a/test/unit/specs/date-picker.spec.js b/test/unit/specs/date-picker.spec.js index 6a1c25349..53ccb9981 100644 --- a/test/unit/specs/date-picker.spec.js +++ b/test/unit/specs/date-picker.spec.js @@ -2289,6 +2289,51 @@ describe('DatePicker', () => { }, DELAY); }); + describe('picker-options:selectableRange', () => { + let vm; + afterEach(() => destroyVM(vm)); + it('selectableRange', done => { + vm = createVue({ + template: ` + + `, + data() { + return { + value: new Date(2019, 0, 1, 18, 50), + pickerOptions: { + selectableRange: ['17:30:00 - 18:30:00', '18:50:00 - 20:30:00', '21:00:00 - 22:00:00'] + } + }; + } + }, true); + const input = vm.$el.querySelector('input'); + input.blur(); + input.focus(); + setTimeout(() => { + const $el = vm.$refs.compo.picker.$el; + const input1 = $el.querySelectorAll('.el-date-picker__editor-wrap input')[1]; + input1.blur(); + input1.focus(); + setTimeout(_ => { + const list = $el.querySelectorAll('.el-time-spinner__list'); + const hoursEl = list[0]; + const disabledHours = [].slice + .call(hoursEl.querySelectorAll('.disabled')) + .map(node => Number(node.textContent)); + expect(disabledHours[disabledHours.length - 2]).to.equal(16); + expect(disabledHours[disabledHours.length - 1]).to.equal(23); + const minutesEl = list[1]; + const disabledMinutes = [].slice + .call(minutesEl.querySelectorAll('.disabled')) + .map(node => Number(node.textContent)); + expect(disabledMinutes.length).to.equal(19); + done(); + }, DELAY); + }, DELAY); + }); + + }); + describe('picker-options:disabledDate', () => { let vm; beforeEach(done => {