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

View File

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

View File

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