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

update DatePicker

Browse source 
update DatePicker
This commit is contained in:
梁灏 2016-12-19 14:44:07 +08:00
parent e0cd7f909a
commit 3cf7cfd1de
6 changed files with 319 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,27 +1,179 @@
<template>
<div :class="classes">
<div :class="[prefixCls + '-sidebar']" v-if="shortcuts.length">
<div
:class="[prefixCls + '-shortcut']"
v-for="shortcut in shortcuts"
@click="handleShortcutClick(shortcut)">{{ shortcut.text }}</div>
</div>
<div :class="[prefixCls + '-body']">
<div :class="[prefixCls + '-content', prefixCls + '-content-left']">
<div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
<span
:class="iconBtnCls('prev', '-double')"
@click="prevYear"><Icon type="ios-arrow-left"></Icon></span>
<span
:class="iconBtnCls('prev')"
@click="prevMonth"
v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
<span
:class="[datePrefixCls + '-header-label']"
@click="showYearPicker">{{ leftYear }} 年</span>
<span
:class="[datePrefixCls + '-header-label']"
@click="showMonthPicker"
v-show="currentView === 'date'">{{ leftMonth + 1 }} 月</span>
</div>
<date-table
v-show="currentView === 'date'"
:year="leftYear"
:month="leftMonth"
:date="date"
:min-date="minDate"
:max-date="maxDate"
:range-state="rangeState"
:selection-mode="selectionMode"
:disabled-date="disabledDate"
@on-pick="handleDatePick"></date-table>
</div>
<div :class="[prefixCls + '-content', prefixCls + '-content-right']">
<div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
<span
:class="[datePrefixCls + '-header-label']"
@click="showYearPicker">{{ rightYear }} 年</span>
<span
:class="[datePrefixCls + '-header-label']"
@click="showMonthPicker"
v-show="currentView === 'date'">{{ rightMonth + 1 }} 月</span>
<span
:class="iconBtnCls('next', '-double')"
@click="nextYear"><Icon type="ios-arrow-right"></Icon></span>
<span
:class="iconBtnCls('next')"
@click="nextMonth"
v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
</div>
<date-table
v-show="currentView === 'date'"
:year="rightYear"
:month="rightMonth"
:date="rightDate"
:min-date="minDate"
:max-date="maxDate"
:range-state="rangeState"
:selection-mode="selectionMode"
:disabled-date="disabledDate"
@on-pick="handleDatePick"></date-table>
</div>
</div>
</div>
</template>
<script>
import Icon from '../../icon/icon.vue';
import DateTable from '../base/date-table.vue';
import { toDate } from '../util';
import Mixin from './mixin';
const prefixCls = 'ivu-picker-panel';
const datePrefixCls = 'ivu-date-picker';
export default {
props: {},
mixins: [Mixin],
components: { Icon, DateTable },
data () {
return {}
return {
prefixCls: prefixCls,
datePrefixCls: datePrefixCls,
shortcuts: [],
date: new Date(),
value: '',
minDate: '',
maxDate: '',
rangeState: {
endDate: null,
selecting: false
},
showTime: false,
disabledDate: '',
currentView: 'date',
selectionMode: 'range'
}
},
computed: {
classes () {
return [
`${prefixCls}-body-wrapper`,
`${datePrefixCls}-with-range`,
{
[`${prefixCls}-with-sidebar`]: this.shortcuts.length
}
]
},
leftYear() {
return this.date.getFullYear();
},
leftMonth() {
return this.date.getMonth();
},
rightYear() {
return this.rightDate.getFullYear();
},
rightMonth() {
return this.rightDate.getMonth();
},
rightDate() {
const newDate = new Date(this.date);
const month = newDate.getMonth();
newDate.setDate(1);
if (month === 11) {
newDate.setFullYear(newDate.getFullYear() + 1);
newDate.setMonth(0);
} else {
newDate.setMonth(month + 1);
}
return newDate;
}
},
methods: {}
watch: {
value(newVal) {
if (!newVal) {
this.minDate = null;
this.maxDate = null;
} else if (Array.isArray(newVal)) {
this.minDate = newVal[0] ? toDate(newVal[0]) : null;
this.maxDate = newVal[1] ? toDate(newVal[1]) : null;
if (this.minDate) this.date = new Date(this.minDate);
// this.handleConfirm(true); // todo 稍后测试
}
}
},
methods: {
prevYear () {
},
nextYear () {
},
prevMonth () {
},
nextMonth () {
},
showYearPicker () {
},
showMonthPicker () {
},
handleDatePick () {
},
handleConfirm(visible) {
this.$emit('on-pick', [this.minDate, this.maxDate], visible);
}
}
}
</script>