mirror of https://github.com/ElemeFE/element
DatePicker: fix unexpected blur for time panel (#10141)
parent
b2f9cef1b4
commit
2d1251975c
|
@ -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);
|
||||
|
|
|
@ -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 */
|
||||
|
|
Loading…
Reference in New Issue