drip-public/iview
6
1
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
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/date-picker/base/confirm.vue
View file

@ -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');
}
}

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: '',

4
src/styles/components/date-picker.less
View file

@ -258,5 +258,9 @@
color: @link-active-color;
}
}
& > span&-time-disabled{
color: @btn-disable-color;
cursor: @cursor-disabled;
}
}
}

3
src/styles/components/time-picker.less
View file

@ -93,7 +93,8 @@
top: 31px;
bottom: 0;
right: -2px;
background: @border-color-split
background: @border-color-split;
z-index: 1;
}
&-right{

8
test/routers/date.vue
View file

@ -6,6 +6,7 @@
<template>
<row>
<i-col span="12">
<Date-picker format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 300px" @on-change="c"></Date-picker>
<Time-picker :value="value" type="time" placeholder="选择时间" style="width: 168px"></Time-picker>
</i-col>
<!--<i-col span="12">-->
@ -24,7 +25,7 @@
<!--style="width: 168px"></time-picker>-->
<!--</i-col>-->
<i-col span="12">
<Date-picker :value="value1" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 200px" @on-change="c"></Date-picker>
<Date-picker format="yyyy-MM-dd HH:mm:ss" type="datetimerange" placeholder="选择日期时间" style="width: 300px" @on-change="c"></Date-picker>
<!--<time-picker-->
<!--:value="value2"-->
<!--type="timerange"-->
@ -44,11 +45,12 @@
data () {
return {
// value: '2016-12-12 03:03:03',
value1: '2015-12-12 09:41',
value1: '2015-12-12 09:41:00',
value: '03:12:01',
value2: ['08:40:00', '09:40:00'],
// value2: [new Date(), new Date()],
value3: ['2016-12-01', '2016-12-25']
value3: ['2016-12-01', '2016-12-25'],
val4: ['2016-12-01 09:41:12', '2016-12-25 12:23:32']
}
},
methods: {