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-14 23:08:57 +08:00
parent d3eee3f464
commit 50637863ce
9 changed files with 343 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,43 +1,34 @@
<template>
<table
cellspacing="0"
cellpadding="0"
<div
:class="classes"
@click="handleClick"
@mousemove="handleMouseMove">
<tbody>
<tr>
<th v-if="showWeekNumber"></th>
<th>日</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
<tr :class="rowCls(row[1])" v-for="row in rows">
<td :class="getCellClasses(cell)" v-for="cell in row">{{ cell.text }}</td>
</tr>
</tbody>
</table>
<div :class="[prefixCls + '-header']">
<span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>
</div>
<span :class="getCellCls(cell)" v-for="cell in cells"><em>{{ cell.text }}</em></span>
</div>
</template>
<script>
const prefixCls = 'ivu-date-picker-table';
import { getFirstDayOfMonth, getDayCountOfMonth, getStartDateOfMonth } from '../util';
import { deepCopy } from '../../../utils/assist';
const prefixCls = 'ivu-date-picker-cells';
const clearHours = function (time) {
const cloneDate = new Date(time);
cloneDate.setHours(0, 0, 0, 0);
return cloneDate.getTime();
};
export default {
props: {
date: {},
year: {},
month: {},
week: {},
selectionMode: {
default: 'day'
},
showWeekNumber: {
type: Boolean,
default: false
},
disabledDate: {},
minDate: {},
maxDate: {},
@ -51,7 +42,7 @@
};
}
},
value: {}
value: ''
},
data () {
return {
@ -61,11 +52,77 @@
computed: {
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-week-mode`]: this.selectionMode === 'week'
}
`${prefixCls}`
]
},
startDate() {
return getStartDateOfMonth(this.year, this.month);
},
cells () {
const date = new Date(this.year, this.month, 1);
let day = getFirstDayOfMonth(date); // day of first day
day = (day === 0 ? 7 : day);
const today = clearHours(new Date()); // timestamp of today
const selectDay = clearHours(new Date(this.value)); // timestamp of selected day
const dateCountOfMonth = getDayCountOfMonth(date.getFullYear(), date.getMonth());
const dateCountOfLastMonth = getDayCountOfMonth(date.getFullYear(), (date.getMonth() === 0 ? 11 : date.getMonth() - 1));
const disabledDate = this.disabledDate;
let cells = [];
const cell_tmpl = {
text: '',
type: '',
selected: false,
disabled: false
};
if (day !== 7) {
for (let i = 0; i < day; i++) {
const cell = deepCopy(cell_tmpl);
cell.type = 'prev-month';
cell.text = dateCountOfLastMonth - (day - 1) + i;
let prevMonth = this.month - 1;
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));
cells.push(cell);
}
}
for (let i = 1; i <= dateCountOfMonth; i++) {
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.selected = time === selectDay;
cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
cells.push(cell);
}
const nextMonthCount = 42 - cells.length;
for (let i = 1; i <= nextMonthCount; i++) {
const cell = deepCopy(cell_tmpl);
cell.type = 'next-month';
cell.text = i;
let nextMonth = this.month + 1;
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));
cells.push(cell);
}
return cells;
}
},
methods: {
@ -74,26 +131,20 @@
},
handleMouseMove () {
},
rowCls (cell) {
return [
`${prefixCls}-row`,
{
[`${prefixCls}-row-current`]: this.value && this.isWeekActive(cell)
}
]
},
isWeekActive (cell) {
},
getCellCls (cell) {
return [
`${prefixCls}-cell`,
{
[`${prefixCls}-cell-today`]: cell.type === 'today'
[`${prefixCls}-cell-selected`]: cell.selected,
[`${prefixCls}-cell-disabled`]: cell.disabled,
[`${prefixCls}-cell-today`]: cell.type === 'today',
[`${prefixCls}-cell-prev-month`]: cell.type === 'prev-month',
[`${prefixCls}-cell-next-month`]: cell.type === 'next-month'
}
]
}
},
}
}
</script>

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

@ -32,7 +32,14 @@
</div>
<div :class="[prefixCls + '-content']">
<date-table
v-show="currentView === 'date'"></date-table>
v-show="currentView === 'date'"
:year="year"
:month="month"
:date="date"
:value="value"
:week="week"
:selection-mode="selectionMode"
:disabled-date="disabledDate"></date-table>
<year-table
v-show="currentView === 'year'"></year-table>
<month-table
@ -56,10 +63,37 @@
prefixCls: prefixCls,
datePrefixCls: datePrefixCls,
shortcuts: [],
currentView: 'date'
currentView: 'date',
date: new Date(),
value: '',
showTime: false,
selectionMode: 'day',
visible: false,
disabledDate: '',
year: null,
month: null,
week: null,
showWeekNumber: false,
timePickerVisible: false
}
},
computed: {
},
watch: {
value (newVal) {
newVal = new Date(newVal);
if (!isNaN(newVal)) {
// todo
// if (typeof this.disabledDate === 'function' && this.disabledDate(new Date(newVal))) return;
this.date = newVal;
this.year = newVal.getFullYear();
this.month = newVal.getMonth();
// this.$emit('on-pick', newVal, true);
}
}
},
computed: {},
methods: {
handleShortcutClick (shortcut) {
@ -90,11 +124,18 @@
}
},
ready () {
console.log(123)
compiled () {
if (this.selectionMode === 'month') {
this.currentView = 'month';
}
if (this.date && !this.year) {
this.year = this.date.getFullYear();
this.month = this.date.getMonth();
}
},
beforeDestroy () {
console.log(456)
}
}
</script>

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

@ -27,6 +27,7 @@
import Drop from '../../components/select/dropdown.vue';
import clickoutside from '../../directives/clickoutside';
import { oneOf } from '../../utils/assist';
import { formatDate } from './util';
const prefixCls = 'ivu-date-picker';
@ -90,7 +91,8 @@
showClose: false,
visualValue: '',
visible: false,
picker: null
picker: null,
internalValue: ''
}
},
computed: {
@ -126,6 +128,13 @@
showPicker () {
if (!this.picker) {
this.picker = new Vue(this.panel).$mount(this.$els.picker);
this.picker.value = this.internalValue;
if (this.format) this.picker.format = this.format;
const options = this.options;
for (const option in options) {
this.picker[option] = options[option];
}
}
}
},
@ -137,6 +146,12 @@
} else {
this.$refs.drop.destroy();
}
},
value: {
immediate: true,
handler (val) {
this.internalValue = formatDate(val);
}
}
},
beforeDestroy () {

13
src/components/date-picker/picker/date-picker.js
View file

@ -19,9 +19,20 @@ export default {
return oneOf(value, ['year', 'month', 'week', 'date', 'daterange', 'datetime', 'datetimerange']);
},
default: 'date'
},
value: {
type: [String, Array]
}
},
created() {
created () {
if (!this.value) {
if (this.type === 'daterange' || this.type === 'datetimerange') {
this.value = ['',''];
} else {
this.value = '';
}
}
this.panel = getPanel(this.type);
}
}