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

Merge pull request #742 from QingWei-Li/fix/date-picker-daterange 

DatePicker: fix dont select the time on the same day
pull/752/head
杨奕 2016-10-31 15:56:48 +08:00 committed by GitHub
parent 5a7e0cd385 464fe80d06
commit 513f08e082
4 changed files with 61 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,7 +24,7 @@
<input <input
:placeholder="$t('el.datepicker.startDate')" :placeholder="$t('el.datepicker.startDate')"
class="el-date-range-picker__editor" class="el-date-range-picker__editor"
:value="leftVisibleDate" :value="minVisibleDate"
@input="handleDateInput($event, 'min')" @input="handleDateInput($event, 'min')"
@change="handleDateChange($event, 'min')"/> @change="handleDateChange($event, 'min')"/>
</span> </span>
@ -32,15 +32,15 @@
<input <input
:placeholder="$t('el.datepicker.startTime')" :placeholder="$t('el.datepicker.startTime')"
class="el-date-range-picker__editor" class="el-date-range-picker__editor"
:value="leftVisibleTime" :value="minVisibleTime"
@focus="leftTimePickerVisible = !leftTimePickerVisible" @focus="minTimePickerVisible = !minTimePickerVisible"
@change="handleTimeChange($event, 'min')"/> @change="handleTimeChange($event, 'min')"/>
<time-picker <time-picker
:picker-width="leftPickerWidth" :picker-width="minPickerWidth"
ref="lefttimepicker" ref="minTimePicker"
:date="minDate" :date="minDate"
@pick="handleLeftTimePick" @pick="handleMinTimePick"
:visible="leftTimePickerVisible"> :visible="minTimePickerVisible">
</time-picker> </time-picker>
</span> </span>
</span> </span>
@ -48,29 +48,29 @@
<span class="el-date-range-picker__editors-wrap is-right"> <span class="el-date-range-picker__editors-wrap is-right">
<span class="el-date-range-picker__time-picker-wrap"> <span class="el-date-range-picker__time-picker-wrap">
<input <input
ref="leftInput" ref="minInput"
:placeholder="$t('el.datepicker.endDate')" :placeholder="$t('el.datepicker.endDate')"
class="el-date-range-picker__editor" class="el-date-range-picker__editor"
:value="rightVisibleDate" :value="maxVisibleDate"
:readonly="!minDate" :readonly="!minDate"
@input="handleDateInput($event, 'max')" @input="handleDateInput($event, 'max')"
@change="handleDateChange($event, 'max')" /> @change="handleDateChange($event, 'max')" />
</span> </span>
<span class="el-date-range-picker__time-picker-wrap"> <span class="el-date-range-picker__time-picker-wrap">
<input <input
ref="rightInput" ref="maxInput"
:placeholder="$t('el.datepicker.endTime')" :placeholder="$t('el.datepicker.endTime')"
class="el-date-range-picker__editor" class="el-date-range-picker__editor"
:value="rightVisibleTime" :value="maxVisibleTime"
@focus="minDate && (rightTimePickerVisible = !rightTimePickerVisible)" @focus="minDate && (maxTimePickerVisible = !maxTimePickerVisible)"
:readonly="!minDate" :readonly="!minDate"
@change="handleTimeChange($event, 'max')" /> @change="handleTimeChange($event, 'max')" />
<time-picker <time-picker
:picker-width="rightPickerWidth" :picker-width="maxPickerWidth"
ref="righttimepicker" ref="maxTimePicker"
:date="maxDate" :date="maxDate"
@pick="handleRightTimePick" @pick="handleMaxTimePick"
:visible="rightTimePickerVisible"></time-picker> :visible="maxTimePickerVisible"></time-picker>
</span> </span>
</span> </span>
</div> </div>
@ -126,9 +126,9 @@
</div> </div>
</div> </div>
<div class="el-picker-panel__footer" v-if="showTime"> <div class="el-picker-panel__footer" v-if="showTime">
<!-- <a <a
class="el-picker-panel__link-btn" class="el-picker-panel__link-btn"
@click="changeToToday">{{ $t('el.datepicker.now') }}</a> --> @click="handleClear">{{ $t('el.datepicker.clear') }}</a>
<button <button
type="button" type="button"
class="el-picker-panel__btn" class="el-picker-panel__btn"
@ -175,19 +175,19 @@
return this.rightDate.getMonth(); return this.rightDate.getMonth();
}, },
leftVisibleDate() { minVisibleDate() {
return formatDate(this.minDate); return formatDate(this.minDate);
}, },
rightVisibleDate() { maxVisibleDate() {
return formatDate(this.maxDate || this.minDate); return formatDate(this.maxDate || this.minDate);
}, },
leftVisibleTime() { minVisibleTime() {
return formatDate(this.minDate, 'HH:mm:ss'); return formatDate(this.minDate, 'HH:mm:ss');
}, },
rightVisibleTime() { maxVisibleTime() {
return formatDate(this.maxDate, 'HH:mm:ss'); return formatDate(this.maxDate, 'HH:mm:ss');
}, },
@ -208,8 +208,8 @@
data() { data() {
return { return {
leftPickerWidth: 0, minPickerWidth: 0,
rightPickerWidth: 0, maxPickerWidth: 0,
date: new Date(), date: new Date(),
minDate: '', minDate: '',
maxDate: '', maxDate: '',
@ -224,8 +224,8 @@
value: '', value: '',
visible: '', visible: '',
disabledDate: '', disabledDate: '',
leftTimePickerVisible: false, minTimePickerVisible: false,
rightTimePickerVisible: false, maxTimePickerVisible: false,
width: 0 width: 0
}; };
}, },
@ -234,13 +234,13 @@
showTime(val) { showTime(val) {
if (!val) return; if (!val) return;
this.$nextTick(_ => { this.$nextTick(_ => {
const leftInputElm = this.$refs.leftInput; const minInputElm = this.$refs.minInput;
const rightInputElm = this.$refs.rightInput; const maxInputElm = this.$refs.maxInput;
if (leftInputElm) { if (minInputElm) {
this.leftPickerWidth = leftInputElm.getBoundingClientRect().width + 10; this.minPickerWidth = minInputElm.getBoundingClientRect().width + 10;
} }
if (rightInputElm) { if (maxInputElm) {
this.rightPickerWidth = rightInputElm.getBoundingClientRect().width + 10; this.maxPickerWidth = maxInputElm.getBoundingClientRect().width + 10;
} }
}); });
}, },
@ -248,17 +248,24 @@
minDate() { minDate() {
this.$nextTick(() => { this.$nextTick(() => {
if (this.maxDate && this.maxDate < this.minDate) { if (this.maxDate && this.maxDate < this.minDate) {
this.maxDate = null; const format = 'HH:mm:ss';
this.$refs.maxTimePicker.selectableRange = [
[
parseDate(formatDate(this.minDate, format), format),
parseDate('23:59:59', format)
]
];
} }
}); });
}, },
leftTimePickerVisible(val) { minTimePickerVisible(val) {
if (val) this.$nextTick(() => this.$refs.lefttimepicker.ajustScrollTop()); if (val) this.$nextTick(() => this.$refs.minTimePicker.ajustScrollTop());
}, },
rightTimePickerVisible(val) { maxTimePickerVisible(val) {
if (val) this.$nextTick(() => this.$refs.righttimepicker.ajustScrollTop()); if (val) this.$nextTick(() => this.$refs.maxTimePicker.ajustScrollTop());
}, },
value(newVal) { value(newVal) {
@ -273,6 +280,12 @@
}, },
methods: { methods: {
handleClear() {
this.minDate = '';
this.maxDate = '';
this.handleConfirm();
},
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');
@ -341,10 +354,8 @@
this.maxDate = new Date(target.getTime()); this.maxDate = new Date(target.getTime());
} }
} }
const l2r = type === 'min' ? 'left' : 'right'; this.$refs[type + 'TimePicker'].value = target;
this[type + 'TimePickerVisible'] = false;
this.$refs[l2r + 'timepicker'].value = target;
this[l2r + 'TimePickerVisible'] = false;
} }
}, },
@ -372,8 +383,8 @@
}, },
resetView() { resetView() {
this.leftTimePickerVisible = false; this.minTimePickerVisible = false;
this.rightTimePickerVisible = false; this.maxTimePickerVisible = false;
}, },
setTime(date, value) { setTime(date, value) {
@ -387,18 +398,18 @@
return new Date(oldDate.getTime()); return new Date(oldDate.getTime());
}, },
handleLeftTimePick(value, visible, first) { handleMinTimePick(value, visible, first) {
this.minDate = this.minDate || new Date(); this.minDate = this.minDate || new Date();
if (value) { if (value) {
this.minDate = this.setTime(this.minDate, value); this.minDate = this.setTime(this.minDate, value);
} }
if (!first) { if (!first) {
this.leftTimePickerVisible = visible; this.minTimePickerVisible = visible;
} }
}, },
handleRightTimePick(value, visible, first) { handleMaxTimePick(value, visible, first) {
if (!this.maxDate) { if (!this.maxDate) {
const now = new Date(); const now = new Date();
if (now >= this.minDate) { if (now >= this.minDate) {
@ -411,7 +422,7 @@
} }
if (!first) { if (!first) {
this.rightTimePickerVisible = visible; this.maxTimePickerVisible = visible;
} }
}, },

2
src/locale/lang/de.js
View File

@ -4,7 +4,7 @@ export default {
now: 'jetzt', now: 'jetzt',
today: 'heute', today: 'heute',
cancel: 'abbrechen', cancel: 'abbrechen',
// clear: 'leeren', clear: 'leeren',
confirm: 'OK', confirm: 'OK',
selectDate: 'Datum wählen', selectDate: 'Datum wählen',
selectTime: 'Zeit wählen', selectTime: 'Zeit wählen',

2
src/locale/lang/en.js
View File

@ -4,7 +4,7 @@ export default {
now: 'Now', now: 'Now',
today: 'Today', today: 'Today',
cancel: 'Cancel', cancel: 'Cancel',
// clear: 'Clear', clear: 'Clear',
confirm: 'OK', confirm: 'OK',
selectDate: 'Select date', selectDate: 'Select date',
selectTime: 'Select time', selectTime: 'Select time',

2
src/locale/lang/zh-cn.js
View File

@ -4,7 +4,7 @@ export default {
now: '此刻', now: '此刻',
today: '今天', today: '今天',
cancel: '取消', cancel: '取消',
// clear: '清空', clear: '清空',
confirm: '确定', confirm: '确定',
selectDate: '选择日期', selectDate: '选择日期',
selectTime: '选择时间', selectTime: '选择时间',