update DateTimePicker
update DateTimePicker
This commit is contained in:
梁灏
parent
3693144258
commit
2dc2771349
8 changed files with 92 additions and 36 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div :class="[prefixCls + '-confirm']">
|
||||
<span v-if="showTime" @click="handleToggleTime">
|
||||
<span :class="timeClasses" v-if="showTime" @click="handleToggleTime">
|
||||
<template v-if="isTime">选择日期</template>
|
||||
<template v-else>选择时间</template>
|
||||
</span>
|
||||
|
|
@ -17,13 +17,21 @@
|
|||
components: { iButton },
|
||||
props: {
|
||||
showTime: false,
|
||||
isTime: false
|
||||
isTime: false,
|
||||
timeDisabled: false
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
timeClasses () {
|
||||
return {
|
||||
[`${prefixCls}-confirm-time-disabled`]: this.timeDisabled
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClear () {
|
||||
this.$emit('on-pick-clear');
|
||||
|
|
@ -32,6 +40,7 @@
|
|||
this.$emit('on-pick-success');
|
||||
},
|
||||
handleToggleTime () {
|
||||
if (this.timeDisabled) return;
|
||||
this.$emit('on-pick-toggle-time');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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: '',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue