update DatePicker
update DatePicker
This commit is contained in:
梁灏
parent
17e1fcf151
commit
0f6778937c
11 changed files with 832 additions and 21 deletions
|
|
@ -1,13 +1,99 @@
|
|||
<template>
|
||||
|
||||
<table
|
||||
cellspacing="0"
|
||||
cellpadding="0"
|
||||
: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>
|
||||
</template>
|
||||
<script>
|
||||
const prefixCls = 'ivu-date-picker-table';
|
||||
|
||||
export default {
|
||||
props: {},
|
||||
data () {
|
||||
return {}
|
||||
props: {
|
||||
date: {},
|
||||
year: {},
|
||||
month: {},
|
||||
week: {},
|
||||
selectionMode: {
|
||||
default: 'day'
|
||||
},
|
||||
showWeekNumber: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabledDate: {},
|
||||
minDate: {},
|
||||
maxDate: {},
|
||||
rangeState: {
|
||||
default () {
|
||||
return {
|
||||
endDate: null,
|
||||
selecting: false,
|
||||
row: null,
|
||||
column: null
|
||||
};
|
||||
}
|
||||
},
|
||||
value: {}
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-week-mode`]: this.selectionMode === 'week'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
|
||||
},
|
||||
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'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
|
||||
<div>month</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {},
|
||||
// props: {},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
|
||||
<div>year</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {},
|
||||
// props: {},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,13 +1,100 @@
|
|||
<template>
|
||||
|
||||
<div :class="[prefixCls + '-body-wrapper']">
|
||||
<div :class="[prefixCls + '-sidebar']" v-if="shortcuts">
|
||||
<div
|
||||
:class="[prefixCls + '-shortcut']"
|
||||
v-for="shortcut in shortcuts"
|
||||
@click="handleShortcutClick(shortcut)">{{ shortcut.text }}</div>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-body']">
|
||||
<div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
|
||||
<span
|
||||
:class="iconBtnCls('prev', '-double')"
|
||||
@click="prevYear"></span>
|
||||
<span
|
||||
:class="iconBtnCls('prev')"
|
||||
@click="prevMonth"
|
||||
v-show="currentView === 'date'"></span>
|
||||
<span
|
||||
:class="[datePrefixCls + '-header-label']"
|
||||
@click="showYearPicker">{{ }}</span>
|
||||
<span
|
||||
:class="[datePrefixCls + '-header-label']"
|
||||
@click="showMonthPicker"
|
||||
v-show="currentView === 'date'">{{ }}</span>
|
||||
<span
|
||||
:class="iconBtnCls('next')"
|
||||
@click="nextMonth"
|
||||
v-show="currentView === 'date'"></span>
|
||||
<span
|
||||
:class="iconBtnCls('next', '-double')"
|
||||
@click="nextYear"></span>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-content']">
|
||||
<date-table
|
||||
v-show="currentView === 'date'"></date-table>
|
||||
<year-table
|
||||
v-show="currentView === 'year'"></year-table>
|
||||
<month-table
|
||||
v-show="currentView === 'month'"></month-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import DateTable from '../base/date-table.vue';
|
||||
import YearTable from '../base/year-table.vue';
|
||||
import MonthTable from '../base/month-table.vue';
|
||||
|
||||
const prefixCls = 'ivu-picker-panel';
|
||||
const datePrefixCls = 'ivu-date-picker';
|
||||
|
||||
export default {
|
||||
props: {},
|
||||
components: { DateTable, YearTable, MonthTable },
|
||||
data () {
|
||||
return {}
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
datePrefixCls: datePrefixCls,
|
||||
shortcuts: [],
|
||||
currentView: 'date'
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
methods: {
|
||||
handleShortcutClick (shortcut) {
|
||||
|
||||
},
|
||||
iconBtnCls (direction, type = '') {
|
||||
return [
|
||||
`${prefixCls}-icon-btn`,
|
||||
`${datePrefixCls}-${direction}-btn`,
|
||||
`${datePrefixCls}-${direction}-btn-arrow${type}`,
|
||||
]
|
||||
},
|
||||
prevYear () {
|
||||
|
||||
},
|
||||
nextYear () {
|
||||
|
||||
},
|
||||
prevMonth () {
|
||||
|
||||
},
|
||||
nextMonth () {
|
||||
|
||||
},
|
||||
showYearPicker () {
|
||||
|
||||
},
|
||||
showMonthPicker () {
|
||||
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
console.log(123)
|
||||
},
|
||||
beforeDestroy () {
|
||||
console.log(456)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,13 +1,148 @@
|
|||
<template>
|
||||
|
||||
<div
|
||||
:class="[prefixCls]"
|
||||
v-clickoutside="handleClose"
|
||||
@mouseenter="handleMouseenter"
|
||||
@mouseleave="handleMouseleave">
|
||||
<i-input
|
||||
v-el:reference
|
||||
:class="[prefixCls + '-editor']"
|
||||
:readonly="!editable || readonly"
|
||||
:disabled="disabled"
|
||||
:size="size"
|
||||
:placeholder="placeholder"
|
||||
:value.sync="visualValue"
|
||||
@on-focus="handleFocus"
|
||||
@on-blur="handleBlur"
|
||||
@on-click="handleIconClick"
|
||||
:icon="iconType"></i-input>
|
||||
<Drop v-show="visible" :placement="placement" transition="slide-up" v-ref:drop>
|
||||
<div v-el:picker></div>
|
||||
</Drop>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import iInput from '../../components/input/input.vue';
|
||||
import Drop from '../../components/select/dropdown.vue';
|
||||
import clickoutside from '../../directives/clickoutside';
|
||||
import { oneOf } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-date-picker';
|
||||
|
||||
const DEFAULT_FORMATS = {
|
||||
date: 'yyyy-MM-dd',
|
||||
month: 'yyyy-MM',
|
||||
datetime: 'yyyy-MM-dd HH:mm:ss',
|
||||
time: 'HH:mm:ss',
|
||||
timerange: 'HH:mm:ss',
|
||||
daterange: 'yyyy-MM-dd',
|
||||
datetimerange: 'yyyy-MM-dd HH:mm:ss'
|
||||
};
|
||||
|
||||
const PLACEMENT_MAP = {
|
||||
left: 'bottom-start',
|
||||
center: 'bottom-center',
|
||||
right: 'bottom-end'
|
||||
};
|
||||
|
||||
export default {
|
||||
props: {},
|
||||
data () {
|
||||
return {}
|
||||
components: { iInput, Drop },
|
||||
directives: { clickoutside },
|
||||
props: {
|
||||
format: {
|
||||
type: String
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
size: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['small', 'large']);
|
||||
}
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
align: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['left', 'center', 'right']);
|
||||
},
|
||||
default: 'left'
|
||||
},
|
||||
options: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
showClose: false,
|
||||
visualValue: '',
|
||||
visible: false,
|
||||
picker: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconType () {
|
||||
return this.showClose ? 'ios-close' : 'ios-calendar-outline';
|
||||
},
|
||||
placement () {
|
||||
return PLACEMENT_MAP[this.align];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClose () {
|
||||
this.visible = false;
|
||||
},
|
||||
handleFocus () {
|
||||
this.visible = true;
|
||||
},
|
||||
handleBlur () {
|
||||
|
||||
},
|
||||
handleMouseenter () {
|
||||
if (this.readonly || this.disabled) return;
|
||||
if (this.visualValue) {
|
||||
this.showClose = true;
|
||||
}
|
||||
},
|
||||
handleMouseleave () {
|
||||
this.showClose = false;
|
||||
},
|
||||
handleIconClick () {
|
||||
|
||||
},
|
||||
showPicker () {
|
||||
if (!this.picker) {
|
||||
this.picker = new Vue(this.panel).$mount(this.$els.picker);
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible (val) {
|
||||
if (val) {
|
||||
this.showPicker();
|
||||
this.$refs.drop.update();
|
||||
} else {
|
||||
this.$refs.drop.destroy();
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.picker) {
|
||||
this.picker.$destroy();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -9,11 +9,15 @@ const getPanel = function (type) {
|
|||
return DatePanel;
|
||||
};
|
||||
|
||||
import { oneOf } from '../../../utils/assist';
|
||||
|
||||
export default {
|
||||
mixins: [Picker],
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
validator (value) {
|
||||
return oneOf(value, ['year', 'month', 'week', 'date', 'daterange', 'datetime', 'datetimerange']);
|
||||
},
|
||||
default: 'date'
|
||||
}
|
||||
},
|
||||
|
|
|
|||
159
src/components/date-picker/util.js
Normal file
159
src/components/date-picker/util.js
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
import dateUtil from '../../utils/date';
|
||||
|
||||
const newArray = function(start, end) {
|
||||
let result = [];
|
||||
for (let i = start; i <= end; i++) {
|
||||
result.push(i);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
export const toDate = function(date) {
|
||||
date = new Date(date);
|
||||
if (isNaN(date.getTime())) return null;
|
||||
return date;
|
||||
};
|
||||
|
||||
export const formatDate = function(date, format) {
|
||||
date = toDate(date);
|
||||
if (!date) return '';
|
||||
return dateUtil.format(date, format || 'yyyy-MM-dd');
|
||||
};
|
||||
|
||||
export const parseDate = function(string, format) {
|
||||
return dateUtil.parse(string, format || 'yyyy-MM-dd');
|
||||
};
|
||||
|
||||
export const getDayCountOfMonth = function(year, month) {
|
||||
if (month === 3 || month === 5 || month === 8 || month === 10) {
|
||||
return 30;
|
||||
}
|
||||
|
||||
if (month === 1) {
|
||||
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
|
||||
return 29;
|
||||
} else {
|
||||
return 28;
|
||||
}
|
||||
}
|
||||
|
||||
return 31;
|
||||
};
|
||||
|
||||
export const getFirstDayOfMonth = function(date) {
|
||||
const temp = new Date(date.getTime());
|
||||
temp.setDate(1);
|
||||
return temp.getDay();
|
||||
};
|
||||
|
||||
export const DAY_DURATION = 86400000;
|
||||
|
||||
export const getStartDateOfMonth = function(year, month) {
|
||||
const result = new Date(year, month, 1);
|
||||
const day = result.getDay();
|
||||
|
||||
if (day === 0) {
|
||||
result.setTime(result.getTime() - DAY_DURATION * 7);
|
||||
} else {
|
||||
result.setTime(result.getTime() - DAY_DURATION * day);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
export const getWeekNumber = function(src) {
|
||||
const date = new Date(src.getTime());
|
||||
date.setHours(0, 0, 0, 0);
|
||||
// Thursday in current week decides the year.
|
||||
date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);
|
||||
// January 4 is always in week 1.
|
||||
const week1 = new Date(date.getFullYear(), 0, 4);
|
||||
// Adjust to Thursday in week 1 and count number of weeks from date to week 1.
|
||||
return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7);
|
||||
};
|
||||
|
||||
export const prevMonth = function(src) {
|
||||
const year = src.getFullYear();
|
||||
const month = src.getMonth();
|
||||
const date = src.getDate();
|
||||
|
||||
const newYear = month === 0 ? year - 1 : year;
|
||||
const newMonth = month === 0 ? 11 : month - 1;
|
||||
|
||||
const newMonthDayCount = getDayCountOfMonth(newYear, newMonth);
|
||||
if (newMonthDayCount < date) {
|
||||
src.setDate(newMonthDayCount);
|
||||
}
|
||||
|
||||
src.setMonth(newMonth);
|
||||
src.setFullYear(newYear);
|
||||
|
||||
return new Date(src.getTime());
|
||||
};
|
||||
|
||||
export const nextMonth = function(src) {
|
||||
const year = src.getFullYear();
|
||||
const month = src.getMonth();
|
||||
const date = src.getDate();
|
||||
|
||||
const newYear = month === 11 ? year + 1 : year;
|
||||
const newMonth = month === 11 ? 0 : month + 1;
|
||||
|
||||
const newMonthDayCount = getDayCountOfMonth(newYear, newMonth);
|
||||
if (newMonthDayCount < date) {
|
||||
src.setDate(newMonthDayCount);
|
||||
}
|
||||
|
||||
src.setMonth(newMonth);
|
||||
src.setFullYear(newYear);
|
||||
|
||||
return new Date(src.getTime());
|
||||
};
|
||||
|
||||
export const getRangeHours = function(ranges) {
|
||||
const hours = [];
|
||||
let disabledHours = [];
|
||||
|
||||
(ranges || []).forEach(range => {
|
||||
const value = range.map(date => date.getHours());
|
||||
|
||||
disabledHours = disabledHours.concat(newArray(value[0], value[1]));
|
||||
});
|
||||
|
||||
if (disabledHours.length) {
|
||||
for (let i = 0; i < 24; i++) {
|
||||
hours[i] = disabledHours.indexOf(i) === -1;
|
||||
}
|
||||
} else {
|
||||
for (let i = 0; i < 24; i++) {
|
||||
hours[i] = false;
|
||||
}
|
||||
}
|
||||
|
||||
return hours;
|
||||
};
|
||||
|
||||
export const limitRange = function(date, ranges) {
|
||||
if (!ranges || !ranges.length) return date;
|
||||
|
||||
const len = ranges.length;
|
||||
const format = 'HH:mm:ss';
|
||||
|
||||
date = dateUtil.parse(dateUtil.format(date, format), format);
|
||||
for (let i = 0; i < len; i++) {
|
||||
const range = ranges[i];
|
||||
if (date >= range[0] && date <= range[1]) {
|
||||
return date;
|
||||
}
|
||||
}
|
||||
|
||||
let maxDate = ranges[0][0];
|
||||
let minDate = ranges[0][0];
|
||||
|
||||
ranges.forEach(range => {
|
||||
minDate = new Date(Math.min(range[0], minDate));
|
||||
maxDate = new Date(Math.max(range[1], maxDate));
|
||||
});
|
||||
|
||||
return date < minDate ? minDate : maxDate;
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue