drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update DateTimePicker

Browse source 
update DateTimePicker
This commit is contained in:
梁灏 2016-12-30 17:00:26 +08:00
parent 3693144258
commit 2dc2771349
8 changed files with 92 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

62
src/components/date-picker/panel/date-range.vue
View file

@ -7,7 +7,7 @@
@click="handleShortcutClick(shortcut)">{{ shortcut.text }}</div>
</div>
<div :class="[prefixCls + '-body']">
<div :class="[prefixCls + '-content', prefixCls + '-content-left']">
<div :class="[prefixCls + '-content', prefixCls + '-content-left']" v-show="!isTime">
<div :class="[datePrefixCls + '-header']" v-show="leftCurrentView !== 'time'">
<span
:class="iconBtnCls('prev', '-double')"
@ -60,7 +60,7 @@
@on-pick="handleLeftMonthPick"
@on-pick-click="handlePickClick"></month-table>
</div>
<div :class="[prefixCls + '-content', prefixCls + '-content-right']">
<div :class="[prefixCls + '-content', prefixCls + '-content-right']" v-show="!isTime">
<div :class="[datePrefixCls + '-header']" v-show="rightCurrentView !== 'time'">
<span
:class="iconBtnCls('prev', '-double')"
@ -113,8 +113,18 @@
@on-pick="handleRightMonthPick"
@on-pick-click="handlePickClick"></month-table>
</div>
<div :class="[prefixCls + '-content']" v-show="isTime">
<time-picker
v-ref:time-picker
v-show="isTime"
@on-pick="handleTimePick"></time-picker>
</div>
<Confirm
v-if="confirm"
:show-time="showTime"
:is-time="isTime"
:time-disabled="timeDisabled"
@on-pick-toggle-time="handleToggleTime"
@on-pick-clear="handlePickClear"
@on-pick-success="handlePickSuccess"></Confirm>
</div>
@ -125,6 +135,7 @@
import DateTable from '../base/date-table.vue';
import YearTable from '../base/year-table.vue';
import MonthTable from '../base/month-table.vue';
import TimePicker from './time-range.vue';
import Confirm from '../base/confirm.vue';
import { toDate, prevMonth, nextMonth, initTimeDate } from '../util';
@ -135,7 +146,7 @@
export default {
mixins: [Mixin],
components: { Icon, DateTable, YearTable, MonthTable, Confirm },
components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm },
data () {
return {
prefixCls: prefixCls,
@ -156,7 +167,9 @@
rightCurrentView: 'date',
selectionMode: 'range',
leftTableYear: null,
rightTableYear: null
rightTableYear: null,
isTime: false,
format: 'yyyy-MM-dd'
};
},
computed: {
@ -231,6 +244,9 @@
newDate.setMonth(month + 1);
}
return newDate;
},
timeDisabled () {
return !(this.minDate && this.maxDate);
}
},
watch: {
@ -243,6 +259,19 @@
this.maxDate = newVal[1] ? toDate(newVal[1]) : null;
if (this.minDate) this.date = new Date(this.minDate);
}
if (this.showTime) this.$refs.timePicker.value = newVal;
},
minDate (val) {
if (this.showTime) this.$refs.timePicker.date = val;
},
maxDate (val) {
if (this.showTime) this.$refs.timePicker.dateEnd = val;
},
format (val) {
if (this.showTime) this.$refs.timePicker.format = val;
},
isTime (val) {
if (val) this.$refs.timePicker.updateScroll();
}
},
methods: {
@ -256,6 +285,7 @@
this.maxDate = null;
this.date = new Date();
this.handleConfirm();
if (this.showTime) this.$refs.timePicker.handleClear();
},
resetView() {
this.leftCurrentView = 'date';
@ -343,14 +373,32 @@
this.maxDate = val.maxDate;
if (!close) return;
if (!this.showTime) {
this.handleConfirm(false);
}
// if (!this.showTime) {
// this.handleConfirm(false);
// }
this.handleConfirm(false);
},
handleChangeRange (val) {
this.minDate = val.minDate;
this.maxDate = val.maxDate;
this.rangeState = val.rangeState;
},
handleToggleTime () {
this.isTime = !this.isTime;
},
handleTimePick (date) {
this.minDate = date[0];
this.maxDate = date[1];
this.handleConfirm(false);
}
},
compiled () {
if (this.showTime) {
this.$refs.timePicker.date = this.minDate;
this.$refs.timePicker.dateEnd = this.maxDate;
this.$refs.timePicker.value = this.value;
this.$refs.timePicker.format = this.format;
this.$refs.timePicker.showDate = true;
}
}
};

6
src/components/date-picker/panel/date.vue
View file

@ -61,11 +61,8 @@
@on-pick-click="handlePickClick"></month-table>
<time-picker
v-ref:time-picker
v-show="currentView === 'time'"
:date="date"
:value="value"
:format="format"
show-date
v-show="currentView === 'time'"
@on-pick="handleTimePick"></time-picker>
</div>
<Confirm
@ -276,6 +273,7 @@
this.month = this.date.getMonth();
}
if (this.showTime) {
// todo 这里可能有问题，并不能进入到这里，但不影响正常使用
this.$refs.timePicker.date = this.date;
this.$refs.timePicker.value = this.value;
this.$refs.timePicker.format = this.format;

6
src/components/date-picker/panel/time-range.vue
View file

@ -4,6 +4,7 @@
<div :class="[prefixCls + '-content', prefixCls + '-content-left']">
<div :class="[timePrefixCls + '-header']">开始时间</div>
<time-spinner
v-ref:time-spinner
:show-seconds="showSeconds"
:hours="hours"
:minutes="minutes"
@ -18,6 +19,7 @@
<div :class="[prefixCls + '-content', prefixCls + '-content-right']">
<div :class="[timePrefixCls + '-header']">结束时间</div>
<time-spinner
v-ref:time-spinner-end
:show-seconds="showSeconds"
:hours="hoursEnd"
:minutes="minutesEnd"
@ -170,6 +172,10 @@
},
handleEndChange (date) {
this.handleChange({}, date);
},
updateScroll () {
this.$refs.timeSpinner.updateScroll();
this.$refs.timeSpinnerEnd.updateScroll();
}
}
};

26
src/components/date-picker/panel/time.vue
View file

@ -37,31 +37,19 @@
export default {
mixins: [Mixin],
components: { TimeSpinner, Confirm },
// props: {
// date: {
// default () {
// return initTimeDate();
// }
// },
// value: {
// default: ''
// },
// showDate: {
// type: Boolean,
// default: false
// },
// format: {
// type: String,
// default: 'HH:mm:ss'
// }
// },
props: {
showDate: {
type: Boolean,
default: false
}
},
data () {
return {
prefixCls: prefixCls,
timePrefixCls: timePrefixCls,
date: initTimeDate(),
value: '',
showDate: false,
// showDate: false,
format: 'HH:mm:ss',
hours: '',
minutes: '',