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

DatePicker: add lazy modifier in input element

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

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

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