github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

DatePicker: fix unexpected blur for time panel (#10141)

pull/10154/head
Cyril Su 2018-03-13 17:53:04 +08:00 committed by 杨奕
parent b2f9cef1b4
commit 2d1251975c
2 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/date-picker/src/panel/date-range.vue
View File

@ -30,14 +30,14 @@
@input.native="handleDateInput($event, 'min')" @input.native="handleDateInput($event, 'min')"
@change.native="handleDateChange($event, 'min')" /> @change.native="handleDateChange($event, 'min')" />
</span> </span>
<span class="el-date-range-picker__time-picker-wrap"> <span class="el-date-range-picker__time-picker-wrap" v-clickoutside="() => minTimePickerVisible = false">
<el-input <el-input
size="small" size="small"
:disabled="rangeState.selecting" :disabled="rangeState.selecting"
:placeholder="t('el.datepicker.startTime')" :placeholder="t('el.datepicker.startTime')"
class="el-date-range-picker__editor" class="el-date-range-picker__editor"
:value="minVisibleTime" :value="minVisibleTime"
@focus="minTimePickerVisible = !minTimePickerVisible" @focus="minTimePickerVisible = true"
@change.native="handleTimeChange($event, 'min')" /> @change.native="handleTimeChange($event, 'min')" />
<time-picker <time-picker
ref="minTimePicker" ref="minTimePicker"
@ -61,7 +61,7 @@
@input.native="handleDateInput($event, 'max')" @input.native="handleDateInput($event, 'max')"
@change.native="handleDateChange($event, 'max')" /> @change.native="handleDateChange($event, 'max')" />
</span> </span>
<span class="el-date-range-picker__time-picker-wrap"> <span class="el-date-range-picker__time-picker-wrap" v-clickoutside="() => maxTimePickerVisible = false">
<el-input <el-input
size="small" size="small"
:disabled="rangeState.selecting" :disabled="rangeState.selecting"
@ -69,7 +69,7 @@
:placeholder="t('el.datepicker.endTime')" :placeholder="t('el.datepicker.endTime')"
class="el-date-range-picker__editor" class="el-date-range-picker__editor"
:value="maxVisibleTime" :value="maxVisibleTime"
@focus="minDate && (maxTimePickerVisible = !maxTimePickerVisible)" @focus="minDate && (maxTimePickerVisible = true)"
:readonly="!minDate" :readonly="!minDate"
@change.native="handleTimeChange($event, 'max')" /> @change.native="handleTimeChange($event, 'max')" />
<time-picker <time-picker
@ -195,6 +195,7 @@
prevMonth, prevMonth,
nextMonth nextMonth
} from '../util'; } from '../util';
import Clickoutside from 'element-ui/src/utils/clickoutside';
import Locale from 'element-ui/src/mixins/locale'; import Locale from 'element-ui/src/mixins/locale';
import TimePicker from './time'; import TimePicker from './time';
import DateTable from '../basic/date-table'; import DateTable from '../basic/date-table';
@ -231,6 +232,8 @@
export default { export default {
mixins: [Locale], mixins: [Locale],
directives: { Clickoutside },
computed: { computed: {
btnDisabled() { btnDisabled() {
return !(this.minDate && this.maxDate && !this.selecting); return !(this.minDate && this.maxDate && !this.selecting);

7
packages/date-picker/src/panel/date.vue
View File

@ -26,10 +26,10 @@
@input="val => userInputDate = val" @input="val => userInputDate = val"
@change="handleVisibleDateChange" /> @change="handleVisibleDateChange" />
</span> </span>
<span class="el-date-picker__editor-wrap"> <span class="el-date-picker__editor-wrap" v-clickoutside="() => timePickerVisible = false">
<el-input <el-input
ref="input" ref="input"
@focus="timePickerVisible = !timePickerVisible" @focus="timePickerVisible = true"
:placeholder="t('el.datepicker.selectTime')" :placeholder="t('el.datepicker.selectTime')"
:value="visibleTime" :value="visibleTime"
size="small" size="small"
@ -155,6 +155,7 @@
nextMonth, nextMonth,
changeYearMonthAndClampDate changeYearMonthAndClampDate
} from '../util'; } from '../util';
import Clickoutside from 'element-ui/src/utils/clickoutside';
import Locale from 'element-ui/src/mixins/locale'; import Locale from 'element-ui/src/mixins/locale';
import ElInput from 'element-ui/packages/input'; import ElInput from 'element-ui/packages/input';
import ElButton from 'element-ui/packages/button'; import ElButton from 'element-ui/packages/button';
@ -166,6 +167,8 @@
export default { export default {
mixins: [Locale], mixins: [Locale],
directives: { Clickoutside },
watch: { watch: {
showTime(val) { showTime(val) {
/* istanbul ignore if */ /* istanbul ignore if */