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 10:57:10 +08:00
parent d596b9e4f8
commit 5cc9b892b8
8 changed files with 98 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,9 @@
<template>
<div :class="[prefixCls + '-confirm']">
<span v-if="showTime" @click="handleToggleTime">
<template v-if="isTime">选择日期</template>
<template v-else>选择时间</template>
</span>
<i-button size="small" type="text" @click="handleClear">清空</i-button>
<i-button size="small" type="primary" @click="handleSuccess">确定</i-button>
</div>
@ -11,6 +15,10 @@
export default {
components: { iButton },
props: {
showTime: false,
isTime: false
},
data () {
return {
prefixCls: prefixCls
@ -22,6 +30,9 @@
},
handleSuccess () {
this.$emit('on-pick-success');
},
handleToggleTime () {
this.$emit('on-pick-toggle-time');
}
}
};

7
src/components/date-picker/base/date-table.vue
View file

@ -168,6 +168,11 @@
let month = this.month;
let day = cell.text;
const date = this.date;
const hours = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
if (cell.type === 'prev-month') {
if (month === 0) {
month = 11;
@ -184,7 +189,7 @@
}
}
return new Date(year, month, day);
return new Date(year, month, day, hours, minutes, seconds);
},
handleClick (event) {
const target = event.target;

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

@ -126,7 +126,7 @@
import YearTable from '../base/year-table.vue';
import MonthTable from '../base/month-table.vue';
import Confirm from '../base/confirm.vue';
import { toDate, prevMonth, nextMonth } from '../util';
import { toDate, prevMonth, nextMonth, initTimeDate } from '../util';
import Mixin from './mixin';
@ -141,7 +141,7 @@
prefixCls: prefixCls,
datePrefixCls: datePrefixCls,
shortcuts: [],
date: new Date(),
date: initTimeDate(),
value: '',
minDate: '',
maxDate: '',

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

@ -59,9 +59,18 @@
:disabled-date="disabledDate"
@on-pick="handleMonthPick"
@on-pick-click="handlePickClick"></month-table>
<time-picker
v-show="currentView === 'time'"
v-ref:time-picker
:date="date"
:value="value"
@on-pick="handleTimePick"></time-picker>
</div>
<Confirm
v-if="confirm"
:show-time="showTime"
:is-time="isTime"
@on-pick-toggle-time="handleToggleTime"
@on-pick-clear="handlePickClear"
@on-pick-success="handlePickSuccess"></Confirm>
</div>
@ -72,30 +81,34 @@
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.vue';
import Confirm from '../base/confirm.vue';
import Mixin from './mixin';
import { initTimeDate } from '../util';
const prefixCls = 'ivu-picker-panel';
const datePrefixCls = 'ivu-date-picker';
export default {
mixins: [Mixin],
components: { Icon, DateTable, YearTable, MonthTable, Confirm },
components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm },
data () {
return {
prefixCls: prefixCls,
datePrefixCls: datePrefixCls,
shortcuts: [],
currentView: 'date',
date: new Date(),
date: initTimeDate(),
value: '',
showTime: false,
selectionMode: 'day',
disabledDate: '',
year: null,
month: null,
confirm: false
confirm: false,
isTime: false
};
},
computed: {
@ -126,23 +139,29 @@
this.year = newVal.getFullYear();
this.month = newVal.getMonth();
}
},
currentView (val) {
if (val === 'time') this.$refs.timePicker.updateScroll();
}
},
methods: {
resetDate () {
this.date = new Date(this.date);
},
handleClear() {
handleClear () {
this.date = new Date();
this.$emit('on-pick', '');
if (this.showTime) this.$refs.timePicker.handleClear();
},
resetView() {
if (this.selectionMode === 'month') {
this.currentView = 'month';
} else if (this.selectionMode === 'year') {
this.currentView = 'year';
} else {
this.currentView = 'date';
resetView (reset = false) {
if (this.currentView !== 'time' || reset) {
if (this.selectionMode === 'month') {
this.currentView = 'month';
} else if (this.selectionMode === 'year') {
this.currentView = 'year';
} else {
this.currentView = 'date';
}
}
this.year = this.date.getFullYear();
@ -186,6 +205,15 @@
showMonthPicker () {
this.currentView = 'month';
},
handleToggleTime () {
if (this.currentView === 'date') {
this.currentView = 'time';
this.isTime = true;
} else if (this.currentView === 'time') {
this.currentView = 'date';
this.isTime = false;
}
},
handleYearPick(year, close = true) {
this.year = year;
if (!close) return;
@ -216,15 +244,16 @@
},
handleDatePick (value) {
if (this.selectionMode === 'day') {
if (!this.showTime) {
this.$emit('on-pick', new Date(value.getTime()));
}
this.$emit('on-pick', new Date(value.getTime()));
this.date.setFullYear(value.getFullYear());
this.date.setMonth(value.getMonth());
this.date.setDate(value.getDate());
}
this.resetDate();
},
handleTimePick (date) {
this.handleDatePick(date);
}
},
compiled () {

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

@ -3,6 +3,7 @@
<div :class="[prefixCls + '-body']">
<div :class="[prefixCls + '-content']">
<time-spinner
v-ref:time-spinner
:show-seconds="showSeconds"
:hours="hours"
:minutes="minutes"
@ -35,13 +36,21 @@
export default {
mixins: [Mixin],
components: { TimeSpinner, Confirm },
props: {
date: {
default () {
return initTimeDate()
}
},
value: {
default: ''
}
},
data () {
return {
prefixCls: prefixCls,
timePrefixCls: timePrefixCls,
format: 'HH:mm:ss',
date: initTimeDate(),
value: '',
hours: '',
minutes: '',
seconds: '',
@ -92,6 +101,9 @@
this.seconds = this.date.getSeconds();
}
if (emit) this.$emit('on-pick', this.date, true);
},
updateScroll () {
this.$refs.timeSpinner.updateScroll();
}
}
};

8
src/components/date-picker/picker.vue
View file

@ -362,7 +362,13 @@
},
showPicker () {
if (!this.picker) {
const type = this.type;
this.picker = new Vue(this.panel).$mount(this.$els.picker);
if (type === 'datetime' || type === 'datetimerange') {
this.confirm = true;
this.picker.showTime = true;
}
this.picker.value = this.internalValue;
this.picker.confirm = this.confirm;
this.picker.selectionMode = this.selectionMode;
@ -430,7 +436,7 @@
this.$refs.drop.update();
if (this.open === null) this.$emit('on-open-change', true);
} else {
if (this.picker) this.picker.resetView && this.picker.resetView();
if (this.picker) this.picker.resetView && this.picker.resetView(true);
this.$refs.drop.destroy();
if (this.open === null) this.$emit('on-open-change', false);
}

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

@ -244,5 +244,19 @@
text-align: right;
padding: 8px;
clear: both;
& > span{
color: @link-color;
cursor: pointer;
user-select: none;
float: left;
padding: 2px 0;
transition: all @transition-time @ease-in-out;
&:hover{
color: @link-hover-color;
}
&:active{
color: @link-active-color;
}
}
}
}

2
test/routers/date.vue
View file

@ -24,7 +24,7 @@
<!--style="width: 168px"></time-picker>-->
<!--</i-col>-->
<i-col span="12">
<Time-picker type="timerange" confirm placeholder="选择时间" style="width: 168px"></Time-picker>
<Date-picker type="datetime" placeholder="选择日期时间" style="width: 200px" @on-change="c"></Date-picker>
<!--<time-picker-->
<!--:value="value2"-->
<!--type="timerange"-->