test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-12-02 20:28:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

DatePicker: add lazy modifier in input element

Browse Source
This commit is contained in:
qingwei.li 2016-10-18 09:37:19 +08:00
parent dcb8a17c69
commit 71af8e9020
2 changed files with 15 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,17 +23,15 @@
<input
placeholder="开始日期"
class="el-date-range-picker__editor"
v-model="leftVisibleDate"
v-model.lazy="leftVisibleDate"
@input="handleDateInput($event, 'min')"
@change="handleDateChange($event, 'min')"/>
<span
class="el-date-range-picker__time-picker-wrap"
v-clickoutside="closeLeftTimePicker">
<span class="el-date-range-picker__time-picker-wrap">
<input
placeholder="开始时间"
class="el-date-range-picker__editor"
v-model="leftVisibleTime"
@focus="leftTimePickerVisible = true"
v-model.lazy="leftVisibleTime"
@focus="leftTimePickerVisible = !leftTimePickerVisible"
@change="handleTimeChange($event, 'min')"/>
<time-picker
:picker-width="leftPickerWidth"
@ -50,19 +48,17 @@
ref="leftInput"
placeholder="结束日期"
class="el-date-range-picker__editor"
v-model="rightVisibleDate"
v-model.lazy="rightVisibleDate"
:readonly="!minDate"
@input="handleDateInput($event, 'max')"
@change="handleDateChange($event, 'max')" />
<span
class="el-date-range-picker__time-picker-wrap"
v-clickoutside="closeRightTimePicker">
<span class="el-date-range-picker__time-picker-wrap">
<input
ref="rightInput"
placeholder="结束时间"
class="el-date-range-picker__editor"
v-model="rightVisibleTime"
@focus="minDate && (rightTimePickerVisible = true)"
v-model.lazy="rightVisibleTime"
@focus="minDate && (rightTimePickerVisible = !rightTimePickerVisible)"
:readonly="!minDate"
@change="handleTimeChange($event, 'max')" />
<time-picker
@ -257,10 +253,6 @@
}
},
directives: {
Clickoutside: require('element-ui/src/utils/clickoutside').default
},
data() {
return {
leftPickerWidth: 0,
@ -332,14 +324,6 @@
return $t.apply(this, args);
},
closeLeftTimePicker() {
this.leftTimePickerVisible = false;
},
closeRightTimePicker() {
this.rightTimePickerVisible = false;
},
handleDateInput(event, type) {
const value = event.target.value;
const parsedValue = parseDate(value, 'yyyy-MM-dd');

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

@ -23,18 +23,16 @@
<div class="el-date-picker__time-header" v-if="showTime">
<span class="el-date-picker__editor-wrap">
<input
:placehoder="$t('datepicker.selectDate')"
type="text"
v-model="visibleDate"
class="el-date-picker__editor">
:placehoder="$t('datepicker.selectDate')"
type="text"
v-model.lazy="visibleDate"
class="el-date-picker__editor">
</span>
<span
class="el-date-picker__editor-wrap"
v-clickoutside="closeTimePicker">
<span class="el-date-picker__editor-wrap">
<input
ref="input"
@focus="timePickerVisible = true"
v-model="visibleTime"
@focus="timePickerVisible = !timePickerVisible"
v-model.lazy="visibleTime"
:placehoder="$t('datepicker.selectTime')"
type="text"
class="el-date-picker__editor">
@ -166,10 +164,6 @@
}
},
directives: {
Clickoutside: require('element-ui/src/utils/clickoutside').default
},
methods: {
$t(...args) {
return $t.apply(this, args);
@ -324,10 +318,6 @@
this.year = this.date.getFullYear();
this.month = this.date.getMonth();
}
},
closeTimePicker() {
this.timePickerVisible = false;
}
},