diff --git a/examples/docs/en-US/date-picker.md b/examples/docs/en-US/date-picker.md index a7f1acc58..c74eb3d49 100644 --- a/examples/docs/en-US/date-picker.md +++ b/examples/docs/en-US/date-picker.md @@ -254,6 +254,7 @@ Picking a date range is supported. |---------- |-------------- |---------- |-------------------------------- |-------- | | readonly | whether DatePicker is read only | boolean | — | false | | disabled | whether DatePicker is disabled | boolean | - | false | +|size | size of Input | string | large/small/mini | — | | editable | whether the input is editable | boolean | - | true | | placeholder | placeholder | string | — | — | | type | type of the picker | string | year/month/date/datetime/week/datetimerange/daterange | date | diff --git a/examples/docs/en-US/datetime-picker.md b/examples/docs/en-US/datetime-picker.md index 4dfe41edb..14c0299d1 100644 --- a/examples/docs/en-US/datetime-picker.md +++ b/examples/docs/en-US/datetime-picker.md @@ -210,6 +210,7 @@ Select date and time in one picker. | readonly | whether DatePicker is read only | boolean | — | false | | disabled | whether DatePicker is disabled | boolean | - | false | | editable | whether the input is editable | boolean | - | true | +|size | size of Input | string | large/small/mini | — | | placeholder | placeholder | string | — | — | | type | type of the picker | string | year/month/date/datetime/week/datetimerange/daterange | date | | format | format of the picker | string | year `yyyy` month `MM` day `dd`,
hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd | diff --git a/examples/docs/en-US/time-picker.md b/examples/docs/en-US/time-picker.md index b1e84c072..6dbf31c9d 100644 --- a/examples/docs/en-US/time-picker.md +++ b/examples/docs/en-US/time-picker.md @@ -146,6 +146,7 @@ Can pick an arbitrary time range. | readonly | whether DatePicker is read only | boolean | — | false | | disabled | whether DatePicker is disabled | boolean | - | false | | editable | whether the input is editable | boolean | - | true | +|size | size of Input | string | large/small/mini | — | | placeholder | placeholder | string | — | — | | format | format of the picker | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss | | value | value of the picker | date for Time Picker, and string for Time Select | hour `HH`, minute `mm`, second `ss` | HH:mm:ss | diff --git a/examples/docs/zh-CN/date-picker.md b/examples/docs/zh-CN/date-picker.md index 0af6252f3..eeaf89eb8 100644 --- a/examples/docs/zh-CN/date-picker.md +++ b/examples/docs/zh-CN/date-picker.md @@ -289,6 +289,7 @@ | readonly | 完全只读 | boolean | — | false | | disabled | 禁用 | boolean | - | false | | editable | 文本框可输入 | boolean | - | true | +| size | 输入框尺寸 | string | large, small, mini | — | | placeholder | 占位内容 | string | — | — | | type | 显示类型 | string | year/month/date/week/
datetime/datetimerange/daterange | date | | format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，
小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd | diff --git a/examples/docs/zh-CN/datetime-picker.md b/examples/docs/zh-CN/datetime-picker.md index ce11d1a2f..a157f81a0 100644 --- a/examples/docs/zh-CN/datetime-picker.md +++ b/examples/docs/zh-CN/datetime-picker.md @@ -233,6 +233,7 @@ | readonly | 完全只读 | boolean | — | false | | disabled | 禁用 | boolean | - | false | | editable | 文本框可输入 | boolean | - | true | +| size | 输入框尺寸 | string | large, small, mini | — | | placeholder | 占位内容 | string | — | — | | type | 显示类型 | string | year/month/date/week/
datetime/datetimerange/daterange | date | | format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，
小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd | diff --git a/examples/docs/zh-CN/time-picker.md b/examples/docs/zh-CN/time-picker.md index 05912d8bb..8bf4f2a84 100644 --- a/examples/docs/zh-CN/time-picker.md +++ b/examples/docs/zh-CN/time-picker.md @@ -153,6 +153,7 @@ | readonly | 完全只读 | boolean | — | false | | disabled | 禁用 | boolean | - | false | | editable | 文本框可输入 | boolean | - | true | +| size | 输入框尺寸 | string | large, small, mini | — | | placeholder | 占位内容 | string | — | — | | format | 时间格式化(TimePicker) | string | 小时：`HH`，分：`mm`，秒：`ss` | 'HH:mm:ss' | | value | 绑定值 | TimePicker: Date
TimeSelect: String | - | - | diff --git a/packages/date-picker/src/basic/time-spinner.vue b/packages/date-picker/src/basic/time-spinner.vue index 31e5f1b48..227a547c4 100644 --- a/packages/date-picker/src/basic/time-spinner.vue +++ b/packages/date-picker/src/basic/time-spinner.vue @@ -136,12 +136,10 @@ }, handleScroll(type) { - window.setTimeout(() => { - const ajust = {}; + const ajust = {}; - ajust[`${type}s`] = Math.min(Math.floor((this.$refs[type].scrollTop - 80) / 32 + 3), 59); - this.$emit('change', ajust); - }, 0); + ajust[`${type}s`] = Math.min(Math.floor((this.$refs[type].scrollTop - 80) / 32 + 3), 59); + this.$emit('change', ajust); }, ajustScrollTop() { diff --git a/packages/date-picker/src/basic/year-table.vue b/packages/date-picker/src/basic/year-table.vue index 0bc1827df..d8992ebee 100644 --- a/packages/date-picker/src/basic/year-table.vue +++ b/packages/date-picker/src/basic/year-table.vue @@ -67,17 +67,17 @@ date.setFullYear(year); style.disabled = typeof this.disabledDate === 'function' && this.disabledDate(date); - style.current = this.year === year; + style.current = Number(this.year) === year; return style; }, nextTenYear() { - this.$emit('pick', this.year + 10, false); + this.$emit('pick', Number(this.year) + 10, false); }, prevTenYear() { - this.$emit('pick', this.year - 10, false); + this.$emit('pick', Number(this.year) - 10, false); }, handleYearTableClick(event) { diff --git a/packages/date-picker/src/panel/date-range.vue b/packages/date-picker/src/panel/date-range.vue index 59d3071d8..0c94b166b 100644 --- a/packages/date-picker/src/panel/date-range.vue +++ b/packages/date-picker/src/panel/date-range.vue @@ -21,20 +21,23 @@
- + @input.native="handleDateInput($event, 'min')" + @change.native="handleDateChange($event, 'min')" /> - + @change.native="handleTimeChange($event, 'min')" /> - + @input.native="handleDateInput($event, 'max')" + @change.native="handleDateChange($event, 'max')" /> - + @change.native="handleTimeChange($event, 'max')" /> import { nextMonth, prevMonth, toDate, formatDate, parseDate } from '../util'; import Locale from 'element-ui/src/mixins/locale'; + import TimePicker from './time'; + import DateTable from '../basic/date-table'; + import ElInput from 'element-ui/packages/input'; export default { mixins: [Locale], @@ -234,8 +241,8 @@ showTime(val) { if (!val) return; this.$nextTick(_ => { - const minInputElm = this.$refs.minInput; - const maxInputElm = this.$refs.maxInput; + const minInputElm = this.$refs.minInput.$el; + const maxInputElm = this.$refs.maxInput.$el; if (minInputElm) { this.minPickerWidth = minInputElm.getBoundingClientRect().width + 10; } @@ -275,6 +282,7 @@ } else if (Array.isArray(newVal)) { this.minDate = newVal[0] ? toDate(newVal[0]) : null; this.maxDate = newVal[1] ? toDate(newVal[1]) : null; + this.date = new Date(this.minDate); } } }, @@ -455,9 +463,6 @@ } }, - components: { - TimePicker: require('./time'), - DateTable: require('../basic/date-table') - } + components: { TimePicker, DateTable, ElInput } }; diff --git a/packages/date-picker/src/panel/date.vue b/packages/date-picker/src/panel/date.vue index d6d13d7de..b20ce94fb 100644 --- a/packages/date-picker/src/panel/date.vue +++ b/packages/date-picker/src/panel/date.vue @@ -22,20 +22,20 @@
- + - + :placeholder="t('el.datepicker.selectTime')" + :value="visibleTime" + size="small" + @change.native="visibleTime = $event.target.value" /> import { formatDate, parseDate } from '../util'; import Locale from 'element-ui/src/mixins/locale'; + import ElInput from 'element-ui/packages/input'; + import TimePicker from './time'; + import YearTable from '../basic/year-table'; + import MonthTable from '../basic/month-table'; + import DateTable from '../basic/date-table'; export default { mixins: [Locale], @@ -137,7 +142,7 @@ /* istanbul ignore if */ if (!val) return; this.$nextTick(_ => { - const inputElm = this.$refs.input; + const inputElm = this.$refs.input.$el; if (inputElm) { this.pickerWidth = inputElm.getBoundingClientRect().width + 10; } @@ -345,10 +350,7 @@ }, components: { - TimePicker: require('./time'), - YearTable: require('../basic/year-table'), - MonthTable: require('../basic/month-table'), - DateTable: require('../basic/date-table') + TimePicker, YearTable, MonthTable, DateTable, ElInput }, mounted() { diff --git a/packages/date-picker/src/panel/time-range.vue b/packages/date-picker/src/panel/time-range.vue index 1cf08251a..a2917f1d4 100644 --- a/packages/date-picker/src/panel/time-range.vue +++ b/packages/date-picker/src/panel/time-range.vue @@ -1,5 +1,8 @@