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

support DatePicker & TimePicker

Browse source 
support DatePicker & TimePicker
This commit is contained in:
梁灏 2017-03-07 18:06:56 +08:00
parent 5b19b5f55f
commit 531cd1654b
19 changed files with 265 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,8 +4,8 @@
<template v-if="isTime">{{ t('i.datepicker.selectDate') }}</template>
<template v-else>{{ t('i.datepicker.selectTime') }}</template>
</span>
<i-button size="small" type="text" @click="handleClear">{{ t('i.datepicker.clear') }}</i-button>
<i-button size="small" type="primary" @click="handleSuccess">{{ t('i.datepicker.ok') }}</i-button>
<i-button size="small" type="text" @click.native="handleClear">{{ t('i.datepicker.clear') }}</i-button>
<i-button size="small" type="primary" @click.native="handleSuccess">{{ t('i.datepicker.ok') }}</i-button>
</div>
</template>
<script>

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

@ -6,7 +6,7 @@
<div :class="[prefixCls + '-header']">
<span>{{ t('i.datepicker.weeks.sun') }}</span><span>{{ t('i.datepicker.weeks.mon') }}</span><span>{{ t('i.datepicker.weeks.tue') }}</span><span>{{ t('i.datepicker.weeks.wed') }}</span><span>{{ t('i.datepicker.weeks.thu') }}</span><span>{{ t('i.datepicker.weeks.fri') }}</span><span>{{ t('i.datepicker.weeks.sat') }}</span>
</div>
<span :class="getCellCls(cell)" v-for="cell in readCells"><em :index="$index">{{ cell.text }}</em></span>
<span :class="getCellCls(cell)" v-for="(cell, index) in readCells"><em :index="index">{{ cell.text }}</em></span>
</div>
</template>
<script>

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

@ -1,6 +1,6 @@
<template>
<div :class="classes" @click="handleClick">
<span :class="getCellCls(cell)" v-for="cell in cells"><em :index="$index">{{ tCell(cell.text) }}</em></span>
<span :class="getCellCls(cell)" v-for="(cell, index) in cells"><em :index="index">{{ tCell(cell.text) }}</em></span>
</div>
</template>
<script>

20
src/components/date-picker/base/time-spinner.vue
View file

@ -1,18 +1,18 @@
<template>
<div :class="classes">
<div :class="[prefixCls+ '-list']" v-el:hours>
<div :class="[prefixCls+ '-list']" ref="hours">
<ul :class="[prefixCls + '-ul']" @click="handleClickHours">
<li :class="getCellCls(item)" v-for="item in hoursList" v-show="!item.hide" :index="$index">{{ formatTime(item.text) }}</li>
<li :class="getCellCls(item)" v-for="(item, index) in hoursList" v-show="!item.hide" :index="index">{{ formatTime(item.text) }}</li>
</ul>
</div>
<div :class="[prefixCls+ '-list']" v-el:minutes>
<div :class="[prefixCls+ '-list']" ref="minutes">
<ul :class="[prefixCls + '-ul']" @click="handleClickMinutes">
<li :class="getCellCls(item)" v-for="item in minutesList" v-show="!item.hide" :index="$index">{{ formatTime(item.text) }}</li>
<li :class="getCellCls(item)" v-for="(item, index) in minutesList" v-show="!item.hide" :index="index">{{ formatTime(item.text) }}</li>
</ul>
</div>
<div :class="[prefixCls+ '-list']" v-show="showSeconds" v-el:seconds>
<div :class="[prefixCls+ '-list']" v-show="showSeconds" ref="seconds">
<ul :class="[prefixCls + '-ul']" @click="handleClickSeconds">
<li :class="getCellCls(item)" v-for="item in secondsList" v-show="!item.hide" :index="$index">{{ formatTime(item.text) }}</li>
<li :class="getCellCls(item)" v-for="(item, index) in secondsList" v-show="!item.hide" :index="index">{{ formatTime(item.text) }}</li>
</ul>
</div>
</div>
@ -159,9 +159,9 @@
this.$emit('on-pick-click');
},
scroll (type, index) {
const from = this.$els[type].scrollTop;
const from = this.$refs[type].scrollTop;
const to = 24 * this.getScrollIndex(type, index);
scrollTop(this.$els[type], from, to, 500);
scrollTop(this.$refs[type], from, to, 500);
},
getScrollIndex (type, index) {
const Type = firstUpperCase(type);
@ -177,7 +177,7 @@
const times = ['hours', 'minutes', 'seconds'];
this.$nextTick(() => {
times.forEach(type => {
this.$els[type].scrollTop = 24 * this.getScrollIndex(type, this[type]);
this.$refs[type].scrollTop = 24 * this.getScrollIndex(type, this[type]);
});
});
},
@ -199,7 +199,7 @@
this.scroll('seconds', val);
}
},
compiled () {
mounted () {
this.updateScroll();
this.$nextTick(() => this.compiled = true);
}

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

@ -1,6 +1,6 @@
<template>
<div :class="classes" @click="handleClick">
<span :class="getCellCls(cell)" v-for="cell in cells"><em :index="$index">{{ cell.text }}</em></span>
<span :class="getCellCls(cell)" v-for="(cell, index) in cells"><em :index="index">{{ cell.text }}</em></span>
</div>
</template>
<script>