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

Refactor date-picker cell click

Browse source 
Added `cell.date` so we don’t need `. getDateOfCell()` anymore
Passed `cell` directly in `@click="handleClick(cell)”` so we don’t need
`const cell =
this.cells[parseInt(event.target.getAttribute('index’))];` anymore
This commit is contained in:
Sergio Crisostomo 2017-08-29 09:38:20 +02:00
parent 8a4f9d5af3
commit 3747aecd53
1 changed files with 34 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,12 +1,11 @@
<template> <template>
<div <div
:class="classes" :class="classes"
@click="handleClick"
@mousemove="handleMouseMove"> @mousemove="handleMouseMove">
<div :class="[prefixCls + '-header']"> <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> <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> </div>
<span :class="getCellCls(cell)" v-for="(cell, index) in readCells"><em :index="index">{{ cell.text }}</em></span> <span :class="getCellCls(cell)" v-for="(cell, index) in readCells"><em :index="index" @click="handleClick(cell)">{{ cell.text }}</em></span>
</div> </div>
</template> </template>
<script> <script>
@ -106,6 +105,7 @@
const cell_tmpl = { const cell_tmpl = {
text: '', text: '',
type: '', type: '',
date: null,
selected: false, selected: false,
disabled: false, disabled: false,
range: false, range: false,
@ -117,14 +117,8 @@
const cell = deepCopy(cell_tmpl); const cell = deepCopy(cell_tmpl);
cell.type = 'prev-month'; cell.type = 'prev-month';
cell.text = dateCountOfLastMonth - (day - 1) + i; cell.text = dateCountOfLastMonth - (day - 1) + i;
cell.date = new Date(this.year, this.month - 1, cell.text);
let prevMonth = this.month - 1; const time = clearHours(cell.date);
let prevYear = this.year;
if (this.month === 0) {
prevMonth = 11;
prevYear -= 1;
}
const time = clearHours(new Date(prevYear, prevMonth, cell.text));
cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time)); cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
cells.push(cell); cells.push(cell);
} }
@ -132,9 +126,10 @@
for (let i = 1; i <= dateCountOfMonth; i++) { for (let i = 1; i <= dateCountOfMonth; i++) {
const cell = deepCopy(cell_tmpl); const cell = deepCopy(cell_tmpl);
const time = clearHours(new Date(this.year, this.month, i));
cell.type = time === today ? 'today' : 'normal';
cell.text = i; cell.text = i;
cell.date = new Date(this.year, this.month, cell.text);
const time = clearHours(cell.date);
cell.type = time === today ? 'today' : 'normal';
cell.selected = time === selectDay; cell.selected = time === selectDay;
cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time)); cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
cell.range = time >= minDay && time <= maxDay; cell.range = time >= minDay && time <= maxDay;
@ -149,14 +144,8 @@
const cell = deepCopy(cell_tmpl); const cell = deepCopy(cell_tmpl);
cell.type = 'next-month'; cell.type = 'next-month';
cell.text = i; cell.text = i;
cell.date = new Date(this.year, this.month + 1, cell.text);
let nextMonth = this.month + 1; const time = clearHours(cell.date);
let nextYear = this.year;
if (this.month === 11) {
nextMonth = 0;
nextYear += 1;
}
const time = clearHours(new Date(nextYear, nextMonth, cell.text));
cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time)); cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
cells.push(cell); cells.push(cell);
} }
@ -165,71 +154,39 @@
} }
}, },
methods: { methods: {
getDateOfCell (cell) { handleClick (cell) {
let year = this.year;
let month = this.month;
let day = cell.text;
const date = this.date; if (cell.disabled) return;
const hours = date.getHours(); const newDate = cell.date;
const minutes = date.getMinutes();
const seconds = date.getSeconds();
if (cell.type === 'prev-month') { if (this.selectionMode === 'range') {
if (month === 0) { if (this.minDate && this.maxDate) {
month = 11; const minDate = new Date(newDate.getTime());
year--; const maxDate = null;
} else { this.rangeState.selecting = true;
month--; this.markRange(this.minDate);
}
} else if (cell.type === 'next-month') {
if (month === 11) {
month = 0;
year++;
} else {
month++;
}
}
return new Date(year, month, day, hours, minutes, seconds); this.$emit('on-pick', {minDate, maxDate}, false);
}, } else if (this.minDate && !this.maxDate) {
handleClick (event) { if (newDate >= this.minDate) {
const target = event.target; const maxDate = new Date(newDate.getTime());
if (target.tagName === 'EM') { this.rangeState.selecting = false;
const cell = this.cells[parseInt(event.target.getAttribute('index'))];
if (cell.disabled) return;
const newDate = this.getDateOfCell(cell); this.$emit('on-pick', {minDate: this.minDate, maxDate});
} else {
if (this.selectionMode === 'range') {
if (this.minDate && this.maxDate) {
const minDate = new Date(newDate.getTime()); const minDate = new Date(newDate.getTime());
const maxDate = null;
this.rangeState.selecting = true;
this.markRange(this.minDate);
this.$emit('on-pick', {minDate, maxDate}, false);
} else if (this.minDate && !this.maxDate) {
if (newDate >= this.minDate) {
const maxDate = new Date(newDate.getTime());
this.rangeState.selecting = false;
this.$emit('on-pick', {minDate: this.minDate, maxDate});
} else {
const minDate = new Date(newDate.getTime());
this.$emit('on-pick', {minDate, maxDate: this.maxDate}, false);
}
} else if (!this.minDate) {
const minDate = new Date(newDate.getTime());
this.rangeState.selecting = true;
this.markRange(this.minDate);
this.$emit('on-pick', {minDate, maxDate: this.maxDate}, false); this.$emit('on-pick', {minDate, maxDate: this.maxDate}, false);
} }
} else { } else if (!this.minDate) {
this.$emit('on-pick', newDate); const minDate = new Date(newDate.getTime());
this.rangeState.selecting = true;
this.markRange(this.minDate);
this.$emit('on-pick', {minDate, maxDate: this.maxDate}, false);
} }
} else {
this.$emit('on-pick', newDate);
} }
this.$emit('on-pick-click'); this.$emit('on-pick-click');
}, },
@ -246,7 +203,7 @@
if (target.tagName === 'EM') { if (target.tagName === 'EM') {
const cell = this.cells[parseInt(event.target.getAttribute('index'))]; const cell = this.cells[parseInt(event.target.getAttribute('index'))];
// if (cell.disabled) return; // todo 待确定 // if (cell.disabled) return; // todo 待确定
this.rangeState.endDate = this.getDateOfCell(cell); this.rangeState.endDate = cell.date;
} }
}, },
markRange (maxDate) { markRange (maxDate) {