empty master
This commit is contained in:
梁灏
parent
92c1162255
commit
67d534df27
276 changed files with 0 additions and 28368 deletions
|
|
@ -1,50 +0,0 @@
|
|||
<template>
|
||||
<div :class="[prefixCls + '-confirm']">
|
||||
<span :class="timeClasses" v-if="showTime" @click="handleToggleTime">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import iButton from '../../button/button.vue';
|
||||
import Locale from '../../../mixins/locale';
|
||||
|
||||
const prefixCls = 'ivu-picker';
|
||||
|
||||
export default {
|
||||
mixins: [ Locale ],
|
||||
components: { iButton },
|
||||
props: {
|
||||
showTime: false,
|
||||
isTime: false,
|
||||
timeDisabled: false
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
timeClasses () {
|
||||
return {
|
||||
[`${prefixCls}-confirm-time-disabled`]: this.timeDisabled
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClear () {
|
||||
this.$emit('on-pick-clear');
|
||||
},
|
||||
handleSuccess () {
|
||||
this.$emit('on-pick-success');
|
||||
},
|
||||
handleToggleTime () {
|
||||
if (this.timeDisabled) return;
|
||||
this.$emit('on-pick-toggle-time');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,284 +0,0 @@
|
|||
<template>
|
||||
<div
|
||||
:class="classes"
|
||||
@click="handleClick"
|
||||
@mousemove="handleMouseMove">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getFirstDayOfMonth, getDayCountOfMonth } from '../util';
|
||||
import { deepCopy } from '../../../utils/assist';
|
||||
import Locale from '../../../mixins/locale';
|
||||
|
||||
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 {
|
||||
mixins: [ Locale ],
|
||||
props: {
|
||||
date: {},
|
||||
year: {},
|
||||
month: {},
|
||||
selectionMode: {
|
||||
default: 'day'
|
||||
},
|
||||
disabledDate: {},
|
||||
minDate: {},
|
||||
maxDate: {},
|
||||
rangeState: {
|
||||
default () {
|
||||
return {
|
||||
endDate: null,
|
||||
selecting: false
|
||||
};
|
||||
}
|
||||
},
|
||||
value: ''
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
readCells: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'rangeState.endDate' (newVal) {
|
||||
this.markRange(newVal);
|
||||
},
|
||||
minDate(newVal, oldVal) {
|
||||
if (newVal && !oldVal) {
|
||||
this.rangeState.selecting = true;
|
||||
this.markRange(newVal);
|
||||
} else if (!newVal) {
|
||||
this.rangeState.selecting = false;
|
||||
this.markRange(newVal);
|
||||
} else {
|
||||
this.markRange();
|
||||
}
|
||||
},
|
||||
maxDate(newVal, oldVal) {
|
||||
if (newVal && !oldVal) {
|
||||
this.rangeState.selecting = false;
|
||||
this.markRange(newVal);
|
||||
// this.$emit('on-pick', {
|
||||
// minDate: this.minDate,
|
||||
// maxDate: this.maxDate
|
||||
// });
|
||||
}
|
||||
},
|
||||
cells: {
|
||||
handler (cells) {
|
||||
this.readCells = cells;
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`
|
||||
];
|
||||
},
|
||||
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 minDay = clearHours(new Date(this.minDate));
|
||||
const maxDay = clearHours(new Date(this.maxDate));
|
||||
|
||||
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,
|
||||
range: false,
|
||||
start: false,
|
||||
end: 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));
|
||||
cell.range = time >= minDay && time <= maxDay;
|
||||
cell.start = this.minDate && time === minDay;
|
||||
cell.end = this.maxDate && time === maxDay;
|
||||
|
||||
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: {
|
||||
getDateOfCell (cell) {
|
||||
let year = this.year;
|
||||
let month = this.month;
|
||||
let day = cell.text;
|
||||
|
||||
const date = this.date;
|
||||
const hours = date.getHours();
|
||||
const minutes = date.getMinutes();
|
||||
const seconds = date.getSeconds();
|
||||
|
||||
if (cell.type === 'prev-month') {
|
||||
if (month === 0) {
|
||||
month = 11;
|
||||
year--;
|
||||
} else {
|
||||
month--;
|
||||
}
|
||||
} else if (cell.type === 'next-month') {
|
||||
if (month === 11) {
|
||||
month = 0;
|
||||
year++;
|
||||
} else {
|
||||
month++;
|
||||
}
|
||||
}
|
||||
|
||||
return new Date(year, month, day, hours, minutes, seconds);
|
||||
},
|
||||
handleClick (event) {
|
||||
const target = event.target;
|
||||
if (target.tagName === 'EM') {
|
||||
const cell = this.cells[parseInt(event.target.getAttribute('index'))];
|
||||
if (cell.disabled) return;
|
||||
|
||||
const newDate = this.getDateOfCell(cell);
|
||||
|
||||
if (this.selectionMode === 'range') {
|
||||
if (this.minDate && this.maxDate) {
|
||||
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);
|
||||
}
|
||||
} else {
|
||||
this.$emit('on-pick', newDate);
|
||||
}
|
||||
}
|
||||
this.$emit('on-pick-click');
|
||||
},
|
||||
handleMouseMove (event) {
|
||||
if (!this.rangeState.selecting) return;
|
||||
|
||||
this.$emit('on-changerange', {
|
||||
minDate: this.minDate,
|
||||
maxDate: this.maxDate,
|
||||
rangeState: this.rangeState
|
||||
});
|
||||
|
||||
const target = event.target;
|
||||
if (target.tagName === 'EM') {
|
||||
const cell = this.cells[parseInt(event.target.getAttribute('index'))];
|
||||
// if (cell.disabled) return; // todo 待确定
|
||||
this.rangeState.endDate = this.getDateOfCell(cell);
|
||||
}
|
||||
},
|
||||
markRange (maxDate) {
|
||||
const minDate = this.minDate;
|
||||
if (!maxDate) maxDate = this.maxDate;
|
||||
|
||||
const minDay = clearHours(new Date(minDate));
|
||||
const maxDay = clearHours(new Date(maxDate));
|
||||
|
||||
this.cells.forEach(cell => {
|
||||
if (cell.type === 'today' || cell.type === 'normal') {
|
||||
const time = clearHours(new Date(this.year, this.month, cell.text));
|
||||
cell.range = time >= minDay && time <= maxDay;
|
||||
cell.start = minDate && time === minDay;
|
||||
cell.end = maxDate && time === maxDay;
|
||||
}
|
||||
});
|
||||
},
|
||||
getCellCls (cell) {
|
||||
return [
|
||||
`${prefixCls}-cell`,
|
||||
{
|
||||
[`${prefixCls}-cell-selected`]: cell.selected || cell.start || cell.end,
|
||||
[`${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',
|
||||
[`${prefixCls}-cell-range`]: cell.range && !cell.start && !cell.end
|
||||
}
|
||||
];
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,79 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes" @click="handleClick">
|
||||
<span :class="getCellCls(cell)" v-for="cell in cells"><em :index="$index">{{ tCell(cell.text) }}</em></span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { deepCopy } from '../../../utils/assist';
|
||||
import Locale from '../../../mixins/locale';
|
||||
const prefixCls = 'ivu-date-picker-cells';
|
||||
|
||||
export default {
|
||||
mixins: [ Locale ],
|
||||
props: {
|
||||
date: {},
|
||||
month: {
|
||||
type: Number
|
||||
},
|
||||
disabledDate: {},
|
||||
selectionMode: {
|
||||
default: 'month'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
`${prefixCls}-month`
|
||||
];
|
||||
},
|
||||
cells () {
|
||||
let cells = [];
|
||||
const cell_tmpl = {
|
||||
text: '',
|
||||
selected: false,
|
||||
disabled: false
|
||||
};
|
||||
|
||||
for (let i = 0; i < 12; i++) {
|
||||
const cell = deepCopy(cell_tmpl);
|
||||
cell.text = i + 1;
|
||||
|
||||
const date = new Date(this.date);
|
||||
date.setMonth(i);
|
||||
cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(date) && this.selectionMode === 'month';
|
||||
|
||||
cell.selected = Number(this.month) === i;
|
||||
cells.push(cell);
|
||||
}
|
||||
|
||||
return cells;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCellCls (cell) {
|
||||
return [
|
||||
`${prefixCls}-cell`,
|
||||
{
|
||||
[`${prefixCls}-cell-selected`]: cell.selected,
|
||||
[`${prefixCls}-cell-disabled`]: cell.disabled
|
||||
}
|
||||
];
|
||||
},
|
||||
handleClick (event) {
|
||||
const target = event.target;
|
||||
if (target.tagName === 'EM') {
|
||||
const index = parseInt(event.target.getAttribute('index'));
|
||||
const cell = this.cells[index];
|
||||
if (cell.disabled) return;
|
||||
|
||||
this.$emit('on-pick', index);
|
||||
}
|
||||
this.$emit('on-pick-click');
|
||||
},
|
||||
tCell (cell) {
|
||||
return this.t(`i.datepicker.months.m${cell}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,207 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<div :class="[prefixCls+ '-list']" v-el: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>
|
||||
</ul>
|
||||
</div>
|
||||
<div :class="[prefixCls+ '-list']" v-el: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>
|
||||
</ul>
|
||||
</div>
|
||||
<div :class="[prefixCls+ '-list']" v-show="showSeconds" v-el: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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Options from '../time-mixins';
|
||||
import { deepCopy, scrollTop, firstUpperCase } from '../../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-time-picker-cells';
|
||||
|
||||
export default {
|
||||
mixins: [Options],
|
||||
props: {
|
||||
hours: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
minutes: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
seconds: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
showSeconds: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
compiled: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-with-seconds`]: this.showSeconds
|
||||
}
|
||||
];
|
||||
},
|
||||
hoursList () {
|
||||
let hours = [];
|
||||
const hour_tmpl = {
|
||||
text: 0,
|
||||
selected: false,
|
||||
disabled: false,
|
||||
hide: false
|
||||
};
|
||||
|
||||
for (let i = 0; i < 24; i++) {
|
||||
const hour = deepCopy(hour_tmpl);
|
||||
hour.text = i;
|
||||
|
||||
if (this.disabledHours.length && this.disabledHours.indexOf(i) > -1) {
|
||||
hour.disabled = true;
|
||||
if (this.hideDisabledOptions) hour.hide = true;
|
||||
}
|
||||
if (this.hours === i) hour.selected = true;
|
||||
hours.push(hour);
|
||||
}
|
||||
|
||||
return hours;
|
||||
},
|
||||
minutesList () {
|
||||
let minutes = [];
|
||||
const minute_tmpl = {
|
||||
text: 0,
|
||||
selected: false,
|
||||
disabled: false,
|
||||
hide: false
|
||||
};
|
||||
|
||||
for (let i = 0; i < 60; i++) {
|
||||
const minute = deepCopy(minute_tmpl);
|
||||
minute.text = i;
|
||||
|
||||
if (this.disabledMinutes.length && this.disabledMinutes.indexOf(i) > -1) {
|
||||
minute.disabled = true;
|
||||
if (this.hideDisabledOptions) minute.hide = true;
|
||||
}
|
||||
if (this.minutes === i) minute.selected = true;
|
||||
minutes.push(minute);
|
||||
}
|
||||
|
||||
return minutes;
|
||||
},
|
||||
secondsList () {
|
||||
let seconds = [];
|
||||
const second_tmpl = {
|
||||
text: 0,
|
||||
selected: false,
|
||||
disabled: false,
|
||||
hide: false
|
||||
};
|
||||
|
||||
for (let i = 0; i < 60; i++) {
|
||||
const second = deepCopy(second_tmpl);
|
||||
second.text = i;
|
||||
|
||||
if (this.disabledSeconds.length && this.disabledSeconds.indexOf(i) > -1) {
|
||||
second.disabled = true;
|
||||
if (this.hideDisabledOptions) second.hide = true;
|
||||
}
|
||||
if (this.seconds === i) second.selected = true;
|
||||
seconds.push(second);
|
||||
}
|
||||
|
||||
return seconds;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCellCls (cell) {
|
||||
return [
|
||||
`${prefixCls}-cell`,
|
||||
{
|
||||
[`${prefixCls}-cell-selected`]: cell.selected,
|
||||
[`${prefixCls}-cell-disabled`]: cell.disabled
|
||||
}
|
||||
];
|
||||
},
|
||||
handleClickHours (event) {
|
||||
this.handleClick('hours', event);
|
||||
},
|
||||
handleClickMinutes (event) {
|
||||
this.handleClick('minutes', event);
|
||||
},
|
||||
handleClickSeconds (event) {
|
||||
this.handleClick('seconds', event);
|
||||
},
|
||||
handleClick (type, event) {
|
||||
const target = event.target;
|
||||
if (target.tagName === 'LI') {
|
||||
const cell = this[`${type}List`][parseInt(event.target.getAttribute('index'))];
|
||||
if (cell.disabled) return;
|
||||
const data = {};
|
||||
data[type] = cell.text;
|
||||
this.$emit('on-change', data);
|
||||
}
|
||||
this.$emit('on-pick-click');
|
||||
},
|
||||
scroll (type, index) {
|
||||
const from = this.$els[type].scrollTop;
|
||||
const to = 24 * this.getScrollIndex(type, index);
|
||||
scrollTop(this.$els[type], from, to, 500);
|
||||
},
|
||||
getScrollIndex (type, index) {
|
||||
const Type = firstUpperCase(type);
|
||||
const disabled = this[`disabled${Type}`];
|
||||
if (disabled.length && this.hideDisabledOptions) {
|
||||
let _count = 0;
|
||||
disabled.forEach(item => item <= index ? _count++ : '');
|
||||
index -= _count;
|
||||
}
|
||||
return index;
|
||||
},
|
||||
updateScroll () {
|
||||
const times = ['hours', 'minutes', 'seconds'];
|
||||
this.$nextTick(() => {
|
||||
times.forEach(type => {
|
||||
this.$els[type].scrollTop = 24 * this.getScrollIndex(type, this[type]);
|
||||
});
|
||||
});
|
||||
},
|
||||
formatTime (text) {
|
||||
return text < 10 ? '0' + text : text;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
hours (val) {
|
||||
if (!this.compiled) return;
|
||||
this.scroll('hours', val);
|
||||
},
|
||||
minutes (val) {
|
||||
if (!this.compiled) return;
|
||||
this.scroll('minutes', val);
|
||||
},
|
||||
seconds (val) {
|
||||
if (!this.compiled) return;
|
||||
this.scroll('seconds', val);
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
this.updateScroll();
|
||||
this.$nextTick(() => this.compiled = true);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes" @click="handleClick">
|
||||
<span :class="getCellCls(cell)" v-for="cell in cells"><em :index="$index">{{ cell.text }}</em></span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { deepCopy } from '../../../utils/assist';
|
||||
const prefixCls = 'ivu-date-picker-cells';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
date: {},
|
||||
year: {},
|
||||
disabledDate: {},
|
||||
selectionMode: {
|
||||
default: 'year'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
`${prefixCls}-year`
|
||||
];
|
||||
},
|
||||
startYear() {
|
||||
return Math.floor(this.year / 10) * 10;
|
||||
},
|
||||
cells () {
|
||||
let cells = [];
|
||||
const cell_tmpl = {
|
||||
text: '',
|
||||
selected: false,
|
||||
disabled: false
|
||||
};
|
||||
|
||||
for (let i = 0; i < 10; i++) {
|
||||
const cell = deepCopy(cell_tmpl);
|
||||
cell.text = this.startYear + i;
|
||||
|
||||
const date = new Date(this.date);
|
||||
date.setFullYear(cell.text);
|
||||
cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(date) && this.selectionMode === 'year';
|
||||
|
||||
cell.selected = Number(this.year) === cell.text;
|
||||
cells.push(cell);
|
||||
}
|
||||
|
||||
return cells;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCellCls (cell) {
|
||||
return [
|
||||
`${prefixCls}-cell`,
|
||||
{
|
||||
[`${prefixCls}-cell-selected`]: cell.selected,
|
||||
[`${prefixCls}-cell-disabled`]: cell.disabled
|
||||
}
|
||||
];
|
||||
},
|
||||
nextTenYear() {
|
||||
this.$emit('on-pick', Number(this.year) + 10, false);
|
||||
},
|
||||
prevTenYear() {
|
||||
this.$emit('on-pick', Number(this.year) - 10, false);
|
||||
},
|
||||
handleClick (event) {
|
||||
const target = event.target;
|
||||
if (target.tagName === 'EM') {
|
||||
const cell = this.cells[parseInt(event.target.getAttribute('index'))];
|
||||
if (cell.disabled) return;
|
||||
|
||||
this.$emit('on-pick', cell.text);
|
||||
}
|
||||
this.$emit('on-pick-click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import DatePicker from './picker/date-picker';
|
||||
|
||||
export default DatePicker;
|
||||
|
|
@ -1,421 +0,0 @@
|
|||
<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']" v-show="!isTime">
|
||||
<div :class="[datePrefixCls + '-header']" v-show="leftCurrentView !== 'time'">
|
||||
<span
|
||||
:class="iconBtnCls('prev', '-double')"
|
||||
@click="prevYear('left')"><Icon type="ios-arrow-left"></Icon></span>
|
||||
<span
|
||||
:class="iconBtnCls('prev')"
|
||||
@click="prevMonth"
|
||||
v-show="leftCurrentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
|
||||
<span
|
||||
:class="[datePrefixCls + '-header-label']"
|
||||
@click="showYearPicker('left')">{{ leftYearLabel }}</span>
|
||||
<span
|
||||
:class="[datePrefixCls + '-header-label']"
|
||||
@click="showMonthPicker('left')"
|
||||
v-show="leftCurrentView === 'date'">{{ leftMonthLabel }}</span>
|
||||
<span
|
||||
:class="iconBtnCls('next', '-double')"
|
||||
@click="nextYear('left')"
|
||||
v-show="leftCurrentView === 'year' || leftCurrentView === 'month'"><Icon type="ios-arrow-right"></Icon></span>
|
||||
</div>
|
||||
<date-table
|
||||
v-show="leftCurrentView === 'date'"
|
||||
:year="leftYear"
|
||||
:month="leftMonth"
|
||||
:date="date"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:range-state="rangeState"
|
||||
selection-mode="range"
|
||||
:disabled-date="disabledDate"
|
||||
@on-changerange="handleChangeRange"
|
||||
@on-pick="handleRangePick"
|
||||
@on-pick-click="handlePickClick"></date-table>
|
||||
<year-table
|
||||
v-ref:left-year-table
|
||||
v-show="leftCurrentView === 'year'"
|
||||
:year="leftTableYear"
|
||||
:date="leftTableDate"
|
||||
selection-mode="range"
|
||||
:disabled-date="disabledDate"
|
||||
@on-pick="handleLeftYearPick"
|
||||
@on-pick-click="handlePickClick"></year-table>
|
||||
<month-table
|
||||
v-ref:left-month-table
|
||||
v-show="leftCurrentView === 'month'"
|
||||
:month="leftMonth"
|
||||
:date="leftTableDate"
|
||||
selection-mode="range"
|
||||
:disabled-date="disabledDate"
|
||||
@on-pick="handleLeftMonthPick"
|
||||
@on-pick-click="handlePickClick"></month-table>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-content', prefixCls + '-content-right']" v-show="!isTime">
|
||||
<div :class="[datePrefixCls + '-header']" v-show="rightCurrentView !== 'time'">
|
||||
<span
|
||||
:class="iconBtnCls('prev', '-double')"
|
||||
@click="prevYear('right')"
|
||||
v-show="rightCurrentView === 'year' || rightCurrentView === 'month'"><Icon type="ios-arrow-left"></Icon></span>
|
||||
<span
|
||||
:class="[datePrefixCls + '-header-label']"
|
||||
@click="showYearPicker('right')">{{ rightYearLabel }}</span>
|
||||
<span
|
||||
:class="[datePrefixCls + '-header-label']"
|
||||
@click="showMonthPicker('right')"
|
||||
v-show="rightCurrentView === 'date'">{{ rightMonthLabel }}</span>
|
||||
<span
|
||||
:class="iconBtnCls('next', '-double')"
|
||||
@click="nextYear('right')"><Icon type="ios-arrow-right"></Icon></span>
|
||||
<span
|
||||
:class="iconBtnCls('next')"
|
||||
@click="nextMonth"
|
||||
v-show="rightCurrentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
|
||||
</div>
|
||||
<date-table
|
||||
v-show="rightCurrentView === 'date'"
|
||||
:year="rightYear"
|
||||
:month="rightMonth"
|
||||
:date="rightDate"
|
||||
:min-date="minDate"
|
||||
:max-date="maxDate"
|
||||
:range-state="rangeState"
|
||||
selection-mode="range"
|
||||
:disabled-date="disabledDate"
|
||||
@on-changerange="handleChangeRange"
|
||||
@on-pick="handleRangePick"
|
||||
@on-pick-click="handlePickClick"></date-table>
|
||||
<year-table
|
||||
v-ref:right-year-table
|
||||
v-show="rightCurrentView === 'year'"
|
||||
:year="rightTableYear"
|
||||
:date="rightTableDate"
|
||||
selection-mode="range"
|
||||
:disabled-date="disabledDate"
|
||||
@on-pick="handleRightYearPick"
|
||||
@on-pick-click="handlePickClick"></year-table>
|
||||
<month-table
|
||||
v-ref:right-month-table
|
||||
v-show="rightCurrentView === 'month'"
|
||||
:month="rightMonth"
|
||||
:date="rightTableDate"
|
||||
selection-mode="range"
|
||||
:disabled-date="disabledDate"
|
||||
@on-pick="handleRightMonthPick"
|
||||
@on-pick-click="handlePickClick"></month-table>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-content']" v-show="isTime">
|
||||
<time-picker
|
||||
v-ref:time-picker
|
||||
v-show="isTime"
|
||||
@on-pick="handleTimePick"
|
||||
@on-pick-click="handlePickClick"></time-picker>
|
||||
</div>
|
||||
<Confirm
|
||||
v-if="confirm"
|
||||
:show-time="showTime"
|
||||
:is-time="isTime"
|
||||
:time-disabled="timeDisabled"
|
||||
@on-pick-toggle-time="handleToggleTime"
|
||||
@on-pick-clear="handlePickClear"
|
||||
@on-pick-success="handlePickSuccess"></Confirm>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Icon from '../../icon/icon.vue';
|
||||
import DateTable from '../base/date-table.vue';
|
||||
import YearTable from '../base/year-table.vue';
|
||||
import MonthTable from '../base/month-table.vue';
|
||||
import TimePicker from './time-range.vue';
|
||||
import Confirm from '../base/confirm.vue';
|
||||
import { toDate, prevMonth, nextMonth, initTimeDate } from '../util';
|
||||
|
||||
import Mixin from './mixin';
|
||||
import Locale from '../../../mixins/locale';
|
||||
|
||||
const prefixCls = 'ivu-picker-panel';
|
||||
const datePrefixCls = 'ivu-date-picker';
|
||||
|
||||
export default {
|
||||
name: 'DatePicker',
|
||||
mixins: [ Mixin, Locale ],
|
||||
components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm },
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
datePrefixCls: datePrefixCls,
|
||||
shortcuts: [],
|
||||
date: initTimeDate(),
|
||||
value: '',
|
||||
minDate: '',
|
||||
maxDate: '',
|
||||
confirm: false,
|
||||
rangeState: {
|
||||
endDate: null,
|
||||
selecting: false
|
||||
},
|
||||
showTime: false,
|
||||
disabledDate: '',
|
||||
leftCurrentView: 'date',
|
||||
rightCurrentView: 'date',
|
||||
selectionMode: 'range',
|
||||
leftTableYear: null,
|
||||
rightTableYear: null,
|
||||
isTime: false,
|
||||
format: 'yyyy-MM-dd'
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}-body-wrapper`,
|
||||
`${datePrefixCls}-with-range`,
|
||||
{
|
||||
[`${prefixCls}-with-sidebar`]: this.shortcuts.length
|
||||
}
|
||||
];
|
||||
},
|
||||
leftYear () {
|
||||
return this.date.getFullYear();
|
||||
},
|
||||
leftTableDate () {
|
||||
if (this.leftCurrentView === 'year' || this.leftCurrentView === 'month') {
|
||||
return new Date(this.leftTableYear);
|
||||
} else {
|
||||
return this.date;
|
||||
}
|
||||
},
|
||||
leftYearLabel () {
|
||||
const tYear = this.t('i.datepicker.year');
|
||||
if (this.leftCurrentView === 'year') {
|
||||
const year = this.leftTableYear;
|
||||
if (!year) return '';
|
||||
const startYear = Math.floor(year / 10) * 10;
|
||||
return `${startYear}${tYear} - ${startYear + 9}${tYear}`;
|
||||
} else {
|
||||
const year = this.leftCurrentView === 'month' ? this.leftTableYear : this.leftYear;
|
||||
if (!year) return '';
|
||||
return `${year}${tYear}`;
|
||||
}
|
||||
},
|
||||
leftMonth () {
|
||||
return this.date.getMonth();
|
||||
},
|
||||
leftMonthLabel () {
|
||||
const month = this.leftMonth + 1;
|
||||
return this.t(`i.datepicker.month${month}`);
|
||||
},
|
||||
rightYear () {
|
||||
return this.rightDate.getFullYear();
|
||||
},
|
||||
rightTableDate () {
|
||||
if (this.rightCurrentView === 'year' || this.rightCurrentView === 'month') {
|
||||
return new Date(this.rightTableYear);
|
||||
} else {
|
||||
return this.date;
|
||||
}
|
||||
},
|
||||
rightYearLabel () {
|
||||
const tYear = this.t('i.datepicker.year');
|
||||
if (this.rightCurrentView === 'year') {
|
||||
const year = this.rightTableYear;
|
||||
if (!year) return '';
|
||||
const startYear = Math.floor(year / 10) * 10;
|
||||
return `${startYear}${tYear} - ${startYear + 9}${tYear}`;
|
||||
} else {
|
||||
const year = this.rightCurrentView === 'month' ? this.rightTableYear : this.rightYear;
|
||||
if (!year) return '';
|
||||
return `${year}${tYear}`;
|
||||
}
|
||||
},
|
||||
rightMonth () {
|
||||
return this.rightDate.getMonth();
|
||||
},
|
||||
rightMonthLabel () {
|
||||
const month = this.rightMonth + 1;
|
||||
return this.t(`i.datepicker.month${month}`);
|
||||
},
|
||||
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;
|
||||
},
|
||||
timeDisabled () {
|
||||
return !(this.minDate && this.maxDate);
|
||||
}
|
||||
},
|
||||
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);
|
||||
}
|
||||
if (this.showTime) this.$refs.timePicker.value = newVal;
|
||||
},
|
||||
minDate (val) {
|
||||
if (this.showTime) this.$refs.timePicker.date = val;
|
||||
},
|
||||
maxDate (val) {
|
||||
if (this.showTime) this.$refs.timePicker.dateEnd = val;
|
||||
},
|
||||
format (val) {
|
||||
if (this.showTime) this.$refs.timePicker.format = val;
|
||||
},
|
||||
isTime (val) {
|
||||
if (val) this.$refs.timePicker.updateScroll();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetDate () {
|
||||
this.date = new Date(this.date);
|
||||
this.leftTableYear = this.date.getFullYear();
|
||||
this.rightTableYear = this.rightDate.getFullYear();
|
||||
},
|
||||
handleClear() {
|
||||
this.minDate = null;
|
||||
this.maxDate = null;
|
||||
this.date = new Date();
|
||||
this.handleConfirm();
|
||||
if (this.showTime) this.$refs.timePicker.handleClear();
|
||||
},
|
||||
resetView(reset = false) {
|
||||
this.leftCurrentView = 'date';
|
||||
this.rightCurrentView = 'date';
|
||||
|
||||
this.leftTableYear = this.leftYear;
|
||||
this.rightTableYear = this.rightYear;
|
||||
|
||||
if (reset) this.isTime = false;
|
||||
},
|
||||
prevYear (direction) {
|
||||
if (this[`${direction}CurrentView`] === 'year') {
|
||||
this.$refs[`${direction}YearTable`].prevTenYear();
|
||||
} else if (this[`${direction}CurrentView`] === 'month') {
|
||||
this[`${direction}TableYear`]--;
|
||||
} else {
|
||||
const date = this.date;
|
||||
date.setFullYear(date.getFullYear() - 1);
|
||||
this.resetDate();
|
||||
}
|
||||
},
|
||||
nextYear (direction) {
|
||||
if (this[`${direction}CurrentView`] === 'year') {
|
||||
this.$refs[`${direction}YearTable`].nextTenYear();
|
||||
} else if (this[`${direction}CurrentView`] === 'month') {
|
||||
this[`${direction}TableYear`]--;
|
||||
} else {
|
||||
const date = this.date;
|
||||
date.setFullYear(date.getFullYear() + 1);
|
||||
this.resetDate();
|
||||
}
|
||||
},
|
||||
prevMonth () {
|
||||
this.date = prevMonth(this.date);
|
||||
},
|
||||
nextMonth () {
|
||||
this.date = nextMonth(this.date);
|
||||
},
|
||||
handleLeftYearPick (year, close = true) {
|
||||
this.handleYearPick(year, close, 'left');
|
||||
},
|
||||
handleRightYearPick (year, close = true) {
|
||||
this.handleYearPick(year, close, 'right');
|
||||
},
|
||||
handleYearPick (year, close, direction) {
|
||||
this[`${direction}TableYear`] = year;
|
||||
if (!close) return;
|
||||
|
||||
this[`${direction}CurrentView`] = 'month';
|
||||
},
|
||||
handleLeftMonthPick (month) {
|
||||
this.handleMonthPick(month, 'left');
|
||||
},
|
||||
handleRightMonthPick (month) {
|
||||
this.handleMonthPick(month, 'right');
|
||||
},
|
||||
handleMonthPick (month, direction) {
|
||||
let year = this[`${direction}TableYear`];
|
||||
if (direction === 'right') {
|
||||
if (month === 0) {
|
||||
month = 11;
|
||||
year--;
|
||||
} else {
|
||||
month--;
|
||||
}
|
||||
}
|
||||
|
||||
this.date.setYear(year);
|
||||
this.date.setMonth(month);
|
||||
this[`${direction}CurrentView`] = 'date';
|
||||
this.resetDate();
|
||||
},
|
||||
showYearPicker (direction) {
|
||||
this[`${direction}CurrentView`] = 'year';
|
||||
this[`${direction}TableYear`] = this[`${direction}Year`];
|
||||
},
|
||||
showMonthPicker (direction) {
|
||||
this[`${direction}CurrentView`] = 'month';
|
||||
},
|
||||
handleConfirm(visible) {
|
||||
this.$emit('on-pick', [this.minDate, this.maxDate], visible);
|
||||
},
|
||||
handleRangePick (val, close = true) {
|
||||
if (this.maxDate === val.maxDate && this.minDate === val.minDate) return;
|
||||
|
||||
this.minDate = val.minDate;
|
||||
this.maxDate = val.maxDate;
|
||||
|
||||
if (!close) return;
|
||||
// if (!this.showTime) {
|
||||
// this.handleConfirm(false);
|
||||
// }
|
||||
this.handleConfirm(false);
|
||||
},
|
||||
handleChangeRange (val) {
|
||||
this.minDate = val.minDate;
|
||||
this.maxDate = val.maxDate;
|
||||
this.rangeState = val.rangeState;
|
||||
},
|
||||
handleToggleTime () {
|
||||
this.isTime = !this.isTime;
|
||||
},
|
||||
handleTimePick (date) {
|
||||
this.minDate = date[0];
|
||||
this.maxDate = date[1];
|
||||
this.handleConfirm(false);
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
if (this.showTime) {
|
||||
// todo 这里也到不了
|
||||
this.$refs.timePicker.date = this.minDate;
|
||||
this.$refs.timePicker.dateEnd = this.maxDate;
|
||||
this.$refs.timePicker.value = this.value;
|
||||
this.$refs.timePicker.format = this.format;
|
||||
this.$refs.timePicker.showDate = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,293 +0,0 @@
|
|||
<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="[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">{{ yearLabel }}</span>
|
||||
<span
|
||||
:class="[datePrefixCls + '-header-label']"
|
||||
@click="showMonthPicker"
|
||||
v-show="currentView === 'date'">{{ monthLabel }}</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>
|
||||
<div :class="[prefixCls + '-content']">
|
||||
<date-table
|
||||
v-show="currentView === 'date'"
|
||||
:year="year"
|
||||
:month="month"
|
||||
:date="date"
|
||||
:value="value"
|
||||
:selection-mode="selectionMode"
|
||||
:disabled-date="disabledDate"
|
||||
@on-pick="handleDatePick"
|
||||
@on-pick-click="handlePickClick"></date-table>
|
||||
<year-table
|
||||
v-ref:year-table
|
||||
v-show="currentView === 'year'"
|
||||
:year="year"
|
||||
:date="date"
|
||||
:selection-mode="selectionMode"
|
||||
:disabled-date="disabledDate"
|
||||
@on-pick="handleYearPick"
|
||||
@on-pick-click="handlePickClick"></year-table>
|
||||
<month-table
|
||||
v-ref:month-table
|
||||
v-show="currentView === 'month'"
|
||||
:month="month"
|
||||
:date="date"
|
||||
:selection-mode="selectionMode"
|
||||
:disabled-date="disabledDate"
|
||||
@on-pick="handleMonthPick"
|
||||
@on-pick-click="handlePickClick"></month-table>
|
||||
<time-picker
|
||||
v-ref:time-picker
|
||||
show-date
|
||||
v-show="currentView === 'time'"
|
||||
@on-pick="handleTimePick"
|
||||
@on-pick-click="handlePickClick"></time-picker>
|
||||
</div>
|
||||
<Confirm
|
||||
v-if="confirm"
|
||||
:show-time="showTime"
|
||||
:is-time="isTime"
|
||||
@on-pick-toggle-time="handleToggleTime"
|
||||
@on-pick-clear="handlePickClear"
|
||||
@on-pick-success="handlePickSuccess"></Confirm>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Icon from '../../icon/icon.vue';
|
||||
import DateTable from '../base/date-table.vue';
|
||||
import YearTable from '../base/year-table.vue';
|
||||
import MonthTable from '../base/month-table.vue';
|
||||
import TimePicker from './time.vue';
|
||||
import Confirm from '../base/confirm.vue';
|
||||
|
||||
import Mixin from './mixin';
|
||||
import Locale from '../../../mixins/locale';
|
||||
|
||||
import { initTimeDate } from '../util';
|
||||
|
||||
const prefixCls = 'ivu-picker-panel';
|
||||
const datePrefixCls = 'ivu-date-picker';
|
||||
|
||||
export default {
|
||||
name: 'DatePicker',
|
||||
mixins: [ Mixin, Locale ],
|
||||
components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm },
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
datePrefixCls: datePrefixCls,
|
||||
shortcuts: [],
|
||||
currentView: 'date',
|
||||
date: initTimeDate(),
|
||||
value: '',
|
||||
showTime: false,
|
||||
selectionMode: 'day',
|
||||
disabledDate: '',
|
||||
year: null,
|
||||
month: null,
|
||||
confirm: false,
|
||||
isTime: false,
|
||||
format: 'yyyy-MM-dd'
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}-body-wrapper`,
|
||||
{
|
||||
[`${prefixCls}-with-sidebar`]: this.shortcuts.length
|
||||
}
|
||||
];
|
||||
},
|
||||
yearLabel () {
|
||||
const tYear = this.t('i.datepicker.year');
|
||||
const year = this.year;
|
||||
if (!year) return '';
|
||||
if (this.currentView === 'year') {
|
||||
const startYear = Math.floor(year / 10) * 10;
|
||||
return `${startYear}${tYear} - ${startYear + 9}${tYear}`;
|
||||
}
|
||||
return `${year}${tYear}`;
|
||||
},
|
||||
monthLabel () {
|
||||
const month = this.month + 1;
|
||||
return this.t(`i.datepicker.month${month}`);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value (newVal) {
|
||||
if (!newVal) return;
|
||||
newVal = new Date(newVal);
|
||||
if (!isNaN(newVal)) {
|
||||
this.date = newVal;
|
||||
this.year = newVal.getFullYear();
|
||||
this.month = newVal.getMonth();
|
||||
}
|
||||
if (this.showTime) this.$refs.timePicker.value = newVal;
|
||||
},
|
||||
date (val) {
|
||||
if (this.showTime) this.$refs.timePicker.date = val;
|
||||
},
|
||||
format (val) {
|
||||
if (this.showTime) this.$refs.timePicker.format = val;
|
||||
},
|
||||
currentView (val) {
|
||||
if (val === 'time') this.$refs.timePicker.updateScroll();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetDate () {
|
||||
this.date = new Date(this.date);
|
||||
},
|
||||
handleClear () {
|
||||
this.date = new Date();
|
||||
this.$emit('on-pick', '');
|
||||
if (this.showTime) this.$refs.timePicker.handleClear();
|
||||
},
|
||||
resetView (reset = false) {
|
||||
if (this.currentView !== 'time' || reset) {
|
||||
if (this.selectionMode === 'month') {
|
||||
this.currentView = 'month';
|
||||
} else if (this.selectionMode === 'year') {
|
||||
this.currentView = 'year';
|
||||
} else {
|
||||
this.currentView = 'date';
|
||||
}
|
||||
}
|
||||
|
||||
this.year = this.date.getFullYear();
|
||||
this.month = this.date.getMonth();
|
||||
if (reset) this.isTime = false;
|
||||
},
|
||||
prevYear () {
|
||||
if (this.currentView === 'year') {
|
||||
this.$refs.yearTable.prevTenYear();
|
||||
} else {
|
||||
this.year--;
|
||||
this.date.setFullYear(this.year);
|
||||
this.resetDate();
|
||||
}
|
||||
},
|
||||
nextYear () {
|
||||
if (this.currentView === 'year') {
|
||||
this.$refs.yearTable.nextTenYear();
|
||||
} else {
|
||||
this.year++;
|
||||
this.date.setFullYear(this.year);
|
||||
this.resetDate();
|
||||
}
|
||||
},
|
||||
prevMonth () {
|
||||
this.month--;
|
||||
if (this.month < 0) {
|
||||
this.month = 11;
|
||||
this.year--;
|
||||
}
|
||||
},
|
||||
nextMonth () {
|
||||
this.month++;
|
||||
if (this.month > 11) {
|
||||
this.month = 0;
|
||||
this.year++;
|
||||
}
|
||||
},
|
||||
showYearPicker () {
|
||||
this.currentView = 'year';
|
||||
},
|
||||
showMonthPicker () {
|
||||
this.currentView = 'month';
|
||||
},
|
||||
handleToggleTime () {
|
||||
if (this.currentView === 'date') {
|
||||
this.currentView = 'time';
|
||||
this.isTime = true;
|
||||
} else if (this.currentView === 'time') {
|
||||
this.currentView = 'date';
|
||||
this.isTime = false;
|
||||
}
|
||||
},
|
||||
handleYearPick(year, close = true) {
|
||||
this.year = year;
|
||||
if (!close) return;
|
||||
|
||||
this.date.setFullYear(year);
|
||||
if (this.selectionMode === 'year') {
|
||||
this.$emit('on-pick', new Date(year, 0, 1));
|
||||
} else {
|
||||
this.currentView = 'month';
|
||||
}
|
||||
|
||||
this.resetDate();
|
||||
},
|
||||
handleMonthPick (month) {
|
||||
this.month = month;
|
||||
const selectionMode = this.selectionMode;
|
||||
if (selectionMode !== 'month') {
|
||||
this.date.setMonth(month);
|
||||
this.currentView = 'date';
|
||||
this.resetDate();
|
||||
} else {
|
||||
this.date.setMonth(month);
|
||||
this.year && this.date.setFullYear(this.year);
|
||||
this.resetDate();
|
||||
const value = new Date(this.date.getFullYear(), month, 1);
|
||||
this.$emit('on-pick', value);
|
||||
}
|
||||
},
|
||||
handleDatePick (value) {
|
||||
if (this.selectionMode === 'day') {
|
||||
this.$emit('on-pick', new Date(value.getTime()));
|
||||
this.date.setFullYear(value.getFullYear());
|
||||
this.date.setMonth(value.getMonth());
|
||||
this.date.setDate(value.getDate());
|
||||
}
|
||||
|
||||
this.resetDate();
|
||||
},
|
||||
handleTimePick (date) {
|
||||
this.handleDatePick(date);
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
if (this.selectionMode === 'month') {
|
||||
this.currentView = 'month';
|
||||
}
|
||||
|
||||
if (this.date && !this.year) {
|
||||
this.year = this.date.getFullYear();
|
||||
this.month = this.date.getMonth();
|
||||
}
|
||||
if (this.showTime) {
|
||||
// todo 这里可能有问题，并不能进入到这里，但不影响正常使用
|
||||
this.$refs.timePicker.date = this.date;
|
||||
this.$refs.timePicker.value = this.value;
|
||||
this.$refs.timePicker.format = this.format;
|
||||
this.$refs.timePicker.showDate = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
const prefixCls = 'ivu-picker-panel';
|
||||
const datePrefixCls = 'ivu-date-picker';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
iconBtnCls (direction, type = '') {
|
||||
return [
|
||||
`${prefixCls}-icon-btn`,
|
||||
`${datePrefixCls}-${direction}-btn`,
|
||||
`${datePrefixCls}-${direction}-btn-arrow${type}`,
|
||||
];
|
||||
},
|
||||
handleShortcutClick (shortcut) {
|
||||
if (shortcut.value) this.$emit('on-pick', shortcut.value());
|
||||
if (shortcut.onClick) shortcut.onClick(this);
|
||||
},
|
||||
handlePickClear () {
|
||||
this.$emit('on-pick-clear');
|
||||
},
|
||||
handlePickSuccess () {
|
||||
this.$emit('on-pick-success');
|
||||
},
|
||||
handlePickClick () {
|
||||
this.$emit('on-pick-click');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -1,207 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<div :class="[prefixCls + '-body']">
|
||||
<div :class="[prefixCls + '-content', prefixCls + '-content-left']">
|
||||
<div :class="[timePrefixCls + '-header']">
|
||||
<template v-if="showDate">{{ visibleDate }}</template>
|
||||
<template v-else>{{ t('i.datepicker.startTime') }}</template>
|
||||
</div>
|
||||
<time-spinner
|
||||
v-ref:time-spinner
|
||||
:show-seconds="showSeconds"
|
||||
:hours="hours"
|
||||
:minutes="minutes"
|
||||
:seconds="seconds"
|
||||
:disabled-hours="disabledHours"
|
||||
:disabled-minutes="disabledMinutes"
|
||||
:disabled-seconds="disabledSeconds"
|
||||
:hide-disabled-options="hideDisabledOptions"
|
||||
@on-change="handleStartChange"
|
||||
@on-pick-click="handlePickClick"></time-spinner>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-content', prefixCls + '-content-right']">
|
||||
<div :class="[timePrefixCls + '-header']">
|
||||
<template v-if="showDate">{{ visibleDateEnd }}</template>
|
||||
<template v-else>{{ t('i.datepicker.endTime') }}</template>
|
||||
</div>
|
||||
<time-spinner
|
||||
v-ref:time-spinner-end
|
||||
:show-seconds="showSeconds"
|
||||
:hours="hoursEnd"
|
||||
:minutes="minutesEnd"
|
||||
:seconds="secondsEnd"
|
||||
:disabled-hours="disabledHours"
|
||||
:disabled-minutes="disabledMinutes"
|
||||
:disabled-seconds="disabledSeconds"
|
||||
:hide-disabled-options="hideDisabledOptions"
|
||||
@on-change="handleEndChange"
|
||||
@on-pick-click="handlePickClick"></time-spinner>
|
||||
</div>
|
||||
<Confirm
|
||||
v-if="confirm"
|
||||
@on-pick-clear="handlePickClear"
|
||||
@on-pick-success="handlePickSuccess"></Confirm>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TimeSpinner from '../base/time-spinner.vue';
|
||||
import Confirm from '../base/confirm.vue';
|
||||
|
||||
import Mixin from './mixin';
|
||||
import Locale from '../../../mixins/locale';
|
||||
|
||||
import { initTimeDate, toDate, formatDate } from '../util';
|
||||
|
||||
const prefixCls = 'ivu-picker-panel';
|
||||
const timePrefixCls = 'ivu-time-picker';
|
||||
|
||||
export default {
|
||||
mixins: [ Mixin, Locale ],
|
||||
components: { TimeSpinner, Confirm },
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
timePrefixCls: timePrefixCls,
|
||||
format: 'HH:mm:ss',
|
||||
showDate: false,
|
||||
date: initTimeDate(),
|
||||
dateEnd: initTimeDate(),
|
||||
value: '',
|
||||
hours: '',
|
||||
minutes: '',
|
||||
seconds: '',
|
||||
hoursEnd: '',
|
||||
minutesEnd: '',
|
||||
secondsEnd: '',
|
||||
disabledHours: [],
|
||||
disabledMinutes: [],
|
||||
disabledSeconds: [],
|
||||
hideDisabledOptions: false,
|
||||
confirm: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}-body-wrapper`,
|
||||
`${timePrefixCls}-with-range`,
|
||||
{
|
||||
[`${timePrefixCls}-with-seconds`]: this.showSeconds
|
||||
}
|
||||
];
|
||||
},
|
||||
showSeconds () {
|
||||
return (this.format || '').indexOf('ss') !== -1;
|
||||
},
|
||||
visibleDate () {
|
||||
const date = this.date || initTimeDate();
|
||||
const tYear = this.t('i.datepicker.year');
|
||||
const month = date.getMonth() + 1;
|
||||
const tMonth = this.t(`i.datepicker.month${month}`);
|
||||
return `${date.getFullYear()}${tYear} ${tMonth}`;
|
||||
},
|
||||
visibleDateEnd () {
|
||||
const date = this.dateEnd || initTimeDate();
|
||||
const tYear = this.t('i.datepicker.year');
|
||||
const month = date.getMonth() + 1;
|
||||
const tMonth = this.t(`i.datepicker.month${month}`);
|
||||
return `${date.getFullYear()}${tYear} ${tMonth}`;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value (newVal) {
|
||||
if (!newVal) return;
|
||||
if (Array.isArray(newVal)) {
|
||||
const valStart = newVal[0] ? toDate(newVal[0]) : false;
|
||||
const valEnd = newVal[1] ? toDate(newVal[1]) : false;
|
||||
|
||||
if (valStart && valEnd) {
|
||||
this.handleChange(
|
||||
{
|
||||
hours: valStart.getHours(),
|
||||
minutes: valStart.getMinutes(),
|
||||
seconds: valStart.getSeconds()
|
||||
},
|
||||
{
|
||||
hours: valEnd.getHours(),
|
||||
minutes: valEnd.getMinutes(),
|
||||
seconds: valEnd.getSeconds()
|
||||
},
|
||||
false
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClear() {
|
||||
this.date = initTimeDate();
|
||||
this.dateEnd = initTimeDate();
|
||||
this.hours = '';
|
||||
this.minutes = '';
|
||||
this.seconds = '';
|
||||
this.hoursEnd = '';
|
||||
this.minutesEnd = '';
|
||||
this.secondsEnd = '';
|
||||
},
|
||||
handleChange (date, dateEnd, emit = true) {
|
||||
const oldDateEnd = new Date(this.dateEnd);
|
||||
|
||||
if (date.hours !== undefined) {
|
||||
this.date.setHours(date.hours);
|
||||
this.hours = this.date.getHours();
|
||||
}
|
||||
if (date.minutes !== undefined) {
|
||||
this.date.setMinutes(date.minutes);
|
||||
this.minutes = this.date.getMinutes();
|
||||
}
|
||||
if (date.seconds !== undefined) {
|
||||
this.date.setSeconds(date.seconds);
|
||||
this.seconds = this.date.getSeconds();
|
||||
}
|
||||
if (dateEnd.hours !== undefined) {
|
||||
this.dateEnd.setHours(dateEnd.hours);
|
||||
this.hoursEnd = this.dateEnd.getHours();
|
||||
}
|
||||
if (dateEnd.minutes !== undefined) {
|
||||
this.dateEnd.setMinutes(dateEnd.minutes);
|
||||
this.minutesEnd = this.dateEnd.getMinutes();
|
||||
}
|
||||
if (dateEnd.seconds !== undefined) {
|
||||
this.dateEnd.setSeconds(dateEnd.seconds);
|
||||
this.secondsEnd = this.dateEnd.getSeconds();
|
||||
}
|
||||
// judge endTime > startTime?
|
||||
if (this.dateEnd < this.date) {
|
||||
this.$nextTick(() => {
|
||||
this.dateEnd = new Date(this.date);
|
||||
this.hoursEnd = this.dateEnd.getHours();
|
||||
this.minutesEnd = this.dateEnd.getMinutes();
|
||||
this.secondsEnd = this.dateEnd.getSeconds();
|
||||
|
||||
const format = 'yyyy-MM-dd HH:mm:ss';
|
||||
if (formatDate(oldDateEnd, format) !== formatDate(this.dateEnd, format)) {
|
||||
if (emit) this.$emit('on-pick', [this.date, this.dateEnd], true);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (emit) this.$emit('on-pick', [this.date, this.dateEnd], true);
|
||||
}
|
||||
},
|
||||
handleStartChange (date) {
|
||||
this.handleChange(date, {});
|
||||
},
|
||||
handleEndChange (date) {
|
||||
this.handleChange({}, date);
|
||||
},
|
||||
updateScroll () {
|
||||
this.$refs.timeSpinner.updateScroll();
|
||||
this.$refs.timeSpinnerEnd.updateScroll();
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
<template>
|
||||
<div :class="[prefixCls + '-body-wrapper']">
|
||||
<div :class="[prefixCls + '-body']">
|
||||
<div :class="[timePrefixCls + '-header']" v-if="showDate">{{ visibleDate }}</div>
|
||||
<div :class="[prefixCls + '-content']">
|
||||
<time-spinner
|
||||
v-ref:time-spinner
|
||||
:show-seconds="showSeconds"
|
||||
:hours="hours"
|
||||
:minutes="minutes"
|
||||
:seconds="seconds"
|
||||
:disabled-hours="disabledHours"
|
||||
:disabled-minutes="disabledMinutes"
|
||||
:disabled-seconds="disabledSeconds"
|
||||
:hide-disabled-options="hideDisabledOptions"
|
||||
@on-change="handleChange"
|
||||
@on-pick-click="handlePickClick"></time-spinner>
|
||||
</div>
|
||||
<Confirm
|
||||
v-if="confirm"
|
||||
@on-pick-clear="handlePickClear"
|
||||
@on-pick-success="handlePickSuccess"></Confirm>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TimeSpinner from '../base/time-spinner.vue';
|
||||
import Confirm from '../base/confirm.vue';
|
||||
|
||||
import Mixin from './mixin';
|
||||
import Locale from '../../../mixins/locale';
|
||||
|
||||
import { initTimeDate } from '../util';
|
||||
|
||||
const prefixCls = 'ivu-picker-panel';
|
||||
const timePrefixCls = 'ivu-time-picker';
|
||||
|
||||
export default {
|
||||
mixins: [ Mixin, Locale ],
|
||||
components: { TimeSpinner, Confirm },
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
timePrefixCls: timePrefixCls,
|
||||
date: initTimeDate(),
|
||||
value: '',
|
||||
showDate: false,
|
||||
format: 'HH:mm:ss',
|
||||
hours: '',
|
||||
minutes: '',
|
||||
seconds: '',
|
||||
disabledHours: [],
|
||||
disabledMinutes: [],
|
||||
disabledSeconds: [],
|
||||
hideDisabledOptions: false,
|
||||
confirm: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
showSeconds () {
|
||||
return (this.format || '').indexOf('ss') !== -1;
|
||||
},
|
||||
visibleDate () {
|
||||
const date = this.date;
|
||||
const month = date.getMonth() + 1;
|
||||
const tYear = this.t('i.datepicker.year');
|
||||
const tMonth = this.t(`i.datepicker.month${month}`);
|
||||
return `${date.getFullYear()}${tYear} ${tMonth}`;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value (newVal) {
|
||||
if (!newVal) return;
|
||||
newVal = new Date(newVal);
|
||||
if (!isNaN(newVal)) {
|
||||
this.date = newVal;
|
||||
this.handleChange({
|
||||
hours: newVal.getHours(),
|
||||
minutes: newVal.getMinutes(),
|
||||
seconds: newVal.getSeconds()
|
||||
}, false);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClear() {
|
||||
this.date = initTimeDate();
|
||||
this.hours = '';
|
||||
this.minutes = '';
|
||||
this.seconds = '';
|
||||
},
|
||||
handleChange (date, emit = true) {
|
||||
if (date.hours !== undefined) {
|
||||
this.date.setHours(date.hours);
|
||||
this.hours = this.date.getHours();
|
||||
}
|
||||
if (date.minutes !== undefined) {
|
||||
this.date.setMinutes(date.minutes);
|
||||
this.minutes = this.date.getMinutes();
|
||||
}
|
||||
if (date.seconds !== undefined) {
|
||||
this.date.setSeconds(date.seconds);
|
||||
this.seconds = this.date.getSeconds();
|
||||
}
|
||||
if (emit) this.$emit('on-pick', this.date, true);
|
||||
},
|
||||
updateScroll () {
|
||||
this.$refs.timeSpinner.updateScroll();
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,496 +0,0 @@
|
|||
<template>
|
||||
<div
|
||||
:class="[prefixCls]"
|
||||
v-clickoutside="handleClose">
|
||||
<div v-el:reference :class="[prefixCls + '-rel']">
|
||||
<slot>
|
||||
<i-input
|
||||
:class="[prefixCls + '-editor']"
|
||||
:readonly="!editable || readonly"
|
||||
:disabled="disabled"
|
||||
:size="size"
|
||||
:placeholder="placeholder"
|
||||
:value="visualValue"
|
||||
@on-change="handleInputChange"
|
||||
@on-focus="handleFocus"
|
||||
@on-click="handleIconClick"
|
||||
@mouseenter="handleInputMouseenter"
|
||||
@mouseleave="handleInputMouseleave"
|
||||
:icon="iconType"></i-input>
|
||||
</slot>
|
||||
</div>
|
||||
<Drop v-show="opened" :placement="placement" :transition="transition" 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';
|
||||
import { formatDate, parseDate } from './util';
|
||||
|
||||
const prefixCls = 'ivu-date-picker';
|
||||
|
||||
const DEFAULT_FORMATS = {
|
||||
date: 'yyyy-MM-dd',
|
||||
month: 'yyyy-MM',
|
||||
year: 'yyyy',
|
||||
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 RANGE_SEPARATOR = ' - ';
|
||||
|
||||
const DATE_FORMATTER = function(value, format) {
|
||||
return formatDate(value, format);
|
||||
};
|
||||
const DATE_PARSER = function(text, format) {
|
||||
return parseDate(text, format);
|
||||
};
|
||||
const RANGE_FORMATTER = function(value, format) {
|
||||
if (Array.isArray(value) && value.length === 2) {
|
||||
const start = value[0];
|
||||
const end = value[1];
|
||||
|
||||
if (start && end) {
|
||||
return formatDate(start, format) + RANGE_SEPARATOR + formatDate(end, format);
|
||||
}
|
||||
}
|
||||
return '';
|
||||
};
|
||||
const RANGE_PARSER = function(text, format) {
|
||||
const array = text.split(RANGE_SEPARATOR);
|
||||
if (array.length === 2) {
|
||||
const range1 = array[0];
|
||||
const range2 = array[1];
|
||||
|
||||
return [parseDate(range1, format), parseDate(range2, format)];
|
||||
}
|
||||
return [];
|
||||
};
|
||||
|
||||
const TYPE_VALUE_RESOLVER_MAP = {
|
||||
default: {
|
||||
formatter(value) {
|
||||
if (!value) return '';
|
||||
return '' + value;
|
||||
},
|
||||
parser(text) {
|
||||
if (text === undefined || text === '') return null;
|
||||
return text;
|
||||
}
|
||||
},
|
||||
date: {
|
||||
formatter: DATE_FORMATTER,
|
||||
parser: DATE_PARSER
|
||||
},
|
||||
datetime: {
|
||||
formatter: DATE_FORMATTER,
|
||||
parser: DATE_PARSER
|
||||
},
|
||||
daterange: {
|
||||
formatter: RANGE_FORMATTER,
|
||||
parser: RANGE_PARSER
|
||||
},
|
||||
datetimerange: {
|
||||
formatter: RANGE_FORMATTER,
|
||||
parser: RANGE_PARSER
|
||||
},
|
||||
timerange: {
|
||||
formatter: RANGE_FORMATTER,
|
||||
parser: RANGE_PARSER
|
||||
},
|
||||
time: {
|
||||
formatter: DATE_FORMATTER,
|
||||
parser: DATE_PARSER
|
||||
},
|
||||
month: {
|
||||
formatter: DATE_FORMATTER,
|
||||
parser: DATE_PARSER
|
||||
},
|
||||
year: {
|
||||
formatter: DATE_FORMATTER,
|
||||
parser: DATE_PARSER
|
||||
},
|
||||
number: {
|
||||
formatter(value) {
|
||||
if (!value) return '';
|
||||
return '' + value;
|
||||
},
|
||||
parser(text) {
|
||||
let result = Number(text);
|
||||
|
||||
if (!isNaN(text)) {
|
||||
return result;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
components: { iInput, Drop },
|
||||
directives: { clickoutside },
|
||||
props: {
|
||||
format: {
|
||||
type: String
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
confirm: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
open: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
size: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['small', 'large']);
|
||||
}
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
placement: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']);
|
||||
},
|
||||
default: 'bottom-start'
|
||||
},
|
||||
options: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
showClose: false,
|
||||
visible: false,
|
||||
picker: null,
|
||||
internalValue: '',
|
||||
disableClickOutSide: false // fixed when click a date,trigger clickoutside to close picker
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
opened () {
|
||||
return this.open === null ? this.visible : this.open;
|
||||
},
|
||||
iconType () {
|
||||
let icon = 'ios-calendar-outline';
|
||||
if (this.type === 'time' || this.type === 'timerange') icon = 'ios-clock-outline';
|
||||
if (this.showClose) icon = 'ios-close';
|
||||
return icon;
|
||||
},
|
||||
transition () {
|
||||
if (this.placement === 'bottom-start' || this.placement === 'bottom' || this.placement === 'bottom-end') {
|
||||
return 'slide-up';
|
||||
} else {
|
||||
return 'slide-down';
|
||||
}
|
||||
},
|
||||
selectionMode() {
|
||||
if (this.type === 'month') {
|
||||
return 'month';
|
||||
} else if (this.type === 'year') {
|
||||
return 'year';
|
||||
}
|
||||
|
||||
return 'day';
|
||||
},
|
||||
visualValue: {
|
||||
get () {
|
||||
const value = this.internalValue;
|
||||
if (!value) return;
|
||||
const formatter = (
|
||||
TYPE_VALUE_RESOLVER_MAP[this.type] ||
|
||||
TYPE_VALUE_RESOLVER_MAP['default']
|
||||
).formatter;
|
||||
const format = DEFAULT_FORMATS[this.type];
|
||||
|
||||
return formatter(value, this.format || format);
|
||||
},
|
||||
|
||||
set (value) {
|
||||
if (value) {
|
||||
const type = this.type;
|
||||
const parser = (
|
||||
TYPE_VALUE_RESOLVER_MAP[type] ||
|
||||
TYPE_VALUE_RESOLVER_MAP['default']
|
||||
).parser;
|
||||
const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]);
|
||||
if (parsedValue) {
|
||||
if (this.picker) this.picker.value = parsedValue;
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (this.picker) this.picker.value = value;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClose () {
|
||||
if (this.open !== null) return;
|
||||
if (!this.disableClickOutSide) this.visible = false;
|
||||
this.disableClickOutSide = false;
|
||||
},
|
||||
handleFocus () {
|
||||
if (this.readonly) return;
|
||||
this.visible = true;
|
||||
},
|
||||
handleInputChange (event) {
|
||||
const oldValue = this.visualValue;
|
||||
const value = event.target.value;
|
||||
|
||||
let correctValue = '';
|
||||
let correctDate = '';
|
||||
const type = this.type;
|
||||
const format = this.format || DEFAULT_FORMATS[type];
|
||||
|
||||
if (type === 'daterange' || type === 'timerange' || type === 'datetimerange') {
|
||||
const parser = (
|
||||
TYPE_VALUE_RESOLVER_MAP[type] ||
|
||||
TYPE_VALUE_RESOLVER_MAP['default']
|
||||
).parser;
|
||||
|
||||
const formatter = (
|
||||
TYPE_VALUE_RESOLVER_MAP[type] ||
|
||||
TYPE_VALUE_RESOLVER_MAP['default']
|
||||
).formatter;
|
||||
|
||||
const parsedValue = parser(value, format);
|
||||
|
||||
if (parsedValue[0] instanceof Date && parsedValue[1] instanceof Date) {
|
||||
if (parsedValue[0].getTime() > parsedValue[1].getTime()) {
|
||||
correctValue = oldValue;
|
||||
} else {
|
||||
correctValue = formatter(parsedValue, format);
|
||||
}
|
||||
// todo 判断disabledDate
|
||||
} else {
|
||||
correctValue = oldValue;
|
||||
}
|
||||
|
||||
correctDate = parser(correctValue, format);
|
||||
} else if (type === 'time') {
|
||||
const parsedDate = parseDate(value, format);
|
||||
|
||||
if (parsedDate instanceof Date) {
|
||||
if (this.disabledHours.length || this.disabledMinutes.length || this.disabledSeconds.length) {
|
||||
const hours = parsedDate.getHours();
|
||||
const minutes = parsedDate.getMinutes();
|
||||
const seconds = parsedDate.getSeconds();
|
||||
|
||||
if ((this.disabledHours.length && this.disabledHours.indexOf(hours) > -1) ||
|
||||
(this.disabledMinutes.length && this.disabledMinutes.indexOf(minutes) > -1) ||
|
||||
(this.disabledSeconds.length && this.disabledSeconds.indexOf(seconds) > -1)) {
|
||||
correctValue = oldValue;
|
||||
} else {
|
||||
correctValue = formatDate(parsedDate, format);
|
||||
}
|
||||
} else {
|
||||
correctValue = formatDate(parsedDate, format);
|
||||
}
|
||||
} else {
|
||||
correctValue = oldValue;
|
||||
}
|
||||
|
||||
correctDate = parseDate(correctValue, format);
|
||||
} else {
|
||||
const parsedDate = parseDate(value, format);
|
||||
|
||||
if (parsedDate instanceof Date) {
|
||||
const options = this.options || false;
|
||||
if (options && options.disabledDate && typeof options.disabledDate === 'function' && options.disabledDate(new Date(parsedDate))) {
|
||||
correctValue = oldValue;
|
||||
} else {
|
||||
correctValue = formatDate(parsedDate, format);
|
||||
}
|
||||
} else {
|
||||
correctValue = oldValue;
|
||||
}
|
||||
|
||||
correctDate = parseDate(correctValue, format);
|
||||
}
|
||||
|
||||
this.visualValue = correctValue;
|
||||
event.target.value = correctValue;
|
||||
this.internalValue = correctDate;
|
||||
|
||||
if (correctValue !== oldValue) this.emitChange(correctDate);
|
||||
},
|
||||
handleInputMouseenter () {
|
||||
if (this.readonly || this.disabled) return;
|
||||
if (this.visualValue && this.clearable) {
|
||||
this.showClose = true;
|
||||
}
|
||||
},
|
||||
handleInputMouseleave () {
|
||||
this.showClose = false;
|
||||
},
|
||||
handleIconClick () {
|
||||
if (this.showClose) {
|
||||
this.handleClear();
|
||||
} else {
|
||||
this.handleFocus();
|
||||
}
|
||||
},
|
||||
handleClear () {
|
||||
this.visible = false;
|
||||
this.internalValue = '';
|
||||
this.value = '';
|
||||
this.$emit('on-clear');
|
||||
this.$dispatch('on-form-change', '');
|
||||
},
|
||||
showPicker () {
|
||||
if (!this.picker) {
|
||||
const type = this.type;
|
||||
|
||||
this.picker = new Vue(this.panel).$mount(this.$els.picker);
|
||||
if (type === 'datetime' || type === 'datetimerange') {
|
||||
this.confirm = true;
|
||||
this.picker.showTime = true;
|
||||
}
|
||||
this.picker.value = this.internalValue;
|
||||
this.picker.confirm = this.confirm;
|
||||
this.picker.selectionMode = this.selectionMode;
|
||||
if (this.format) this.picker.format = this.format;
|
||||
|
||||
// TimePicker
|
||||
if (this.disabledHours) this.picker.disabledHours = this.disabledHours;
|
||||
if (this.disabledMinutes) this.picker.disabledMinutes = this.disabledMinutes;
|
||||
if (this.disabledSeconds) this.picker.disabledSeconds = this.disabledSeconds;
|
||||
if (this.hideDisabledOptions) this.picker.hideDisabledOptions = this.hideDisabledOptions;
|
||||
|
||||
const options = this.options;
|
||||
for (const option in options) {
|
||||
this.picker[option] = options[option];
|
||||
}
|
||||
|
||||
this.picker.$on('on-pick', (date, visible = false) => {
|
||||
if (!this.confirm) this.visible = visible;
|
||||
this.value = date;
|
||||
this.picker.value = date;
|
||||
this.picker.resetView && this.picker.resetView();
|
||||
this.emitChange(date);
|
||||
});
|
||||
|
||||
this.picker.$on('on-pick-clear', () => {
|
||||
this.handleClear();
|
||||
});
|
||||
this.picker.$on('on-pick-success', () => {
|
||||
this.visible = false;
|
||||
this.$emit('on-ok');
|
||||
});
|
||||
this.picker.$on('on-pick-click', () => this.disableClickOutSide = true);
|
||||
}
|
||||
if (this.internalValue instanceof Date) {
|
||||
this.picker.date = new Date(this.internalValue.getTime());
|
||||
} else {
|
||||
this.picker.value = this.internalValue;
|
||||
}
|
||||
this.picker.resetView && this.picker.resetView();
|
||||
},
|
||||
emitChange (date) {
|
||||
const type = this.type;
|
||||
const format = this.format || DEFAULT_FORMATS[type];
|
||||
const formatter = (
|
||||
TYPE_VALUE_RESOLVER_MAP[type] ||
|
||||
TYPE_VALUE_RESOLVER_MAP['default']
|
||||
).formatter;
|
||||
|
||||
let newDate = formatter(date, format);
|
||||
if (type === 'daterange' || type === 'timerange') {
|
||||
newDate = [newDate.split(RANGE_SEPARATOR)[0], newDate.split(RANGE_SEPARATOR)[1]];
|
||||
}
|
||||
|
||||
this.$emit('on-change', newDate);
|
||||
this.$dispatch('on-form-change', newDate);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible (val) {
|
||||
if (val) {
|
||||
this.showPicker();
|
||||
this.$refs.drop.update();
|
||||
if (this.open === null) this.$emit('on-open-change', true);
|
||||
} else {
|
||||
if (this.picker) this.picker.resetView && this.picker.resetView(true);
|
||||
this.$refs.drop.destroy();
|
||||
if (this.open === null) this.$emit('on-open-change', false);
|
||||
}
|
||||
},
|
||||
internalValue(val) {
|
||||
if (!val && this.picker && typeof this.picker.handleClear === 'function') {
|
||||
this.picker.handleClear();
|
||||
}
|
||||
},
|
||||
value: {
|
||||
immediate: true,
|
||||
handler (val) {
|
||||
const type = this.type;
|
||||
const parser = (
|
||||
TYPE_VALUE_RESOLVER_MAP[type] ||
|
||||
TYPE_VALUE_RESOLVER_MAP['default']
|
||||
).parser;
|
||||
|
||||
if (val && type === 'time' && !(val instanceof Date)) {
|
||||
val = parser(val, this.format || DEFAULT_FORMATS[type]);
|
||||
} else if (val && type === 'timerange' && Array.isArray(val) && val.length === 2 && !(val[0] instanceof Date) && !(val[1] instanceof Date)) {
|
||||
val = val.join(RANGE_SEPARATOR);
|
||||
val = parser(val, this.format || DEFAULT_FORMATS[type]);
|
||||
}
|
||||
|
||||
this.internalValue = val;
|
||||
}
|
||||
},
|
||||
open (val) {
|
||||
if (val === true) {
|
||||
this.visible = val;
|
||||
this.$emit('on-open-change', true);
|
||||
} else if (val === false) {
|
||||
this.$emit('on-open-change', false);
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.picker) {
|
||||
this.picker.$destroy();
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
if (this.open !== null) this.visible = this.open;
|
||||
},
|
||||
events: {
|
||||
'on-form-blur' () {
|
||||
return false;
|
||||
},
|
||||
'on-form-change' () {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
import Picker from '../picker.vue';
|
||||
import DatePanel from '../panel/date.vue';
|
||||
import DateRangePanel from '../panel/date-range.vue';
|
||||
|
||||
const getPanel = function (type) {
|
||||
if (type === 'daterange' || type === 'datetimerange') {
|
||||
return DateRangePanel;
|
||||
}
|
||||
return DatePanel;
|
||||
};
|
||||
|
||||
import { oneOf } from '../../../utils/assist';
|
||||
|
||||
export default {
|
||||
mixins: [Picker],
|
||||
props: {
|
||||
type: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['year', 'month', 'date', 'daterange', 'datetime', 'datetimerange']);
|
||||
},
|
||||
default: 'date'
|
||||
},
|
||||
value: {}
|
||||
},
|
||||
created () {
|
||||
if (!this.value) {
|
||||
if (this.type === 'daterange' || this.type === 'datetimerange') {
|
||||
this.value = ['',''];
|
||||
} else {
|
||||
this.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
this.panel = getPanel(this.type);
|
||||
}
|
||||
};
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
import Picker from '../picker.vue';
|
||||
import TimePanel from '../panel/time.vue';
|
||||
import TimeRangePanel from '../panel/time-range.vue';
|
||||
import Options from '../time-mixins';
|
||||
|
||||
const getPanel = function (type) {
|
||||
if (type === 'timerange') {
|
||||
return TimeRangePanel;
|
||||
}
|
||||
return TimePanel;
|
||||
};
|
||||
|
||||
import { oneOf } from '../../../utils/assist';
|
||||
|
||||
export default {
|
||||
mixins: [Picker, Options],
|
||||
props: {
|
||||
type: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['time', 'timerange']);
|
||||
},
|
||||
default: 'time'
|
||||
},
|
||||
value: {}
|
||||
},
|
||||
created () {
|
||||
if (!this.value) {
|
||||
if (this.type === 'timerange') {
|
||||
this.value = ['',''];
|
||||
} else {
|
||||
this.value = '';
|
||||
}
|
||||
}
|
||||
this.panel = getPanel(this.type);
|
||||
}
|
||||
};
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
export default {
|
||||
props: {
|
||||
disabledHours: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
disabledMinutes: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
disabledSeconds: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
hideDisabledOptions: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
import dateUtil from '../../utils/date';
|
||||
|
||||
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 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 initTimeDate = function () {
|
||||
const date = new Date();
|
||||
date.setHours(0);
|
||||
date.setMinutes(0);
|
||||
date.setSeconds(0);
|
||||
return date;
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue