update the master branch to the latest
This commit is contained in:
梁灏
parent
67d534df27
commit
23a0ba9831
611 changed files with 122648 additions and 0 deletions
72
src/components/date-picker/base/confirm.vue
Normal file
72
src/components/date-picker/base/confirm.vue
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<template>
|
||||
<div :class="[prefixCls + '-confirm']" @keydown.tab.capture="handleTab">
|
||||
<i-button :class="timeClasses" size="small" type="text" :disabled="timeDisabled" v-if="showTime" @click="handleToggleTime">
|
||||
{{labels.time}}
|
||||
</i-button>
|
||||
<i-button size="small" @click.native="handleClear" @keydown.enter.native="handleClear">
|
||||
{{labels.clear}}
|
||||
</i-button>
|
||||
<i-button size="small" type="primary" @click.native="handleSuccess" @keydown.enter.native="handleSuccess">
|
||||
{{labels.ok}}
|
||||
</i-button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import iButton from '../../button/button.vue';
|
||||
import Locale from '../../../mixins/locale';
|
||||
import Emitter from '../../../mixins/emitter';
|
||||
|
||||
const prefixCls = 'ivu-picker';
|
||||
|
||||
export default {
|
||||
mixins: [Locale, Emitter],
|
||||
components: {iButton},
|
||||
props: {
|
||||
showTime: false,
|
||||
isTime: false,
|
||||
timeDisabled: false
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
prefixCls: prefixCls
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
timeClasses () {
|
||||
return `${prefixCls}-confirm-time`;
|
||||
},
|
||||
labels(){
|
||||
const labels = ['time', 'clear', 'ok'];
|
||||
const values = [(this.isTime ? 'selectDate' : 'selectTime'), 'clear', 'ok'];
|
||||
return labels.reduce((obj, key, i) => {
|
||||
obj[key] = this.t('i.datepicker.' + values[i]);
|
||||
return obj;
|
||||
}, {});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClear () {
|
||||
this.$emit('on-pick-clear');
|
||||
},
|
||||
handleSuccess () {
|
||||
this.$emit('on-pick-success');
|
||||
},
|
||||
handleToggleTime () {
|
||||
if (this.timeDisabled) return;
|
||||
this.$emit('on-pick-toggle-time');
|
||||
this.dispatch('CalendarPicker', 'focus-input');
|
||||
this.dispatch('CalendarPicker', 'update-popper');
|
||||
},
|
||||
handleTab(e) {
|
||||
const tabbables = [...this.$el.children];
|
||||
const expectedFocus = tabbables[e.shiftKey ? 'shift' : 'pop']();
|
||||
|
||||
if (document.activeElement === expectedFocus) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.dispatch('CalendarPicker', 'focus-input');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
114
src/components/date-picker/base/date-table.vue
Normal file
114
src/components/date-picker/base/date-table.vue
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<div :class="[prefixCls + '-header']">
|
||||
<span v-for="day in headerDays" :key="day">
|
||||
{{day}}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
:class="getCellCls(cell)"
|
||||
v-for="(cell, i) in cells"
|
||||
:key="String(cell.date) + i"
|
||||
@click="handleClick(cell, $event)"
|
||||
@mouseenter="handleMouseMove(cell)"
|
||||
>
|
||||
<em>{{ cell.desc }}</em>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { clearHours, isInRange } from '../util';
|
||||
import Locale from '../../../mixins/locale';
|
||||
import jsCalendar from 'js-calendar';
|
||||
|
||||
import mixin from './mixin';
|
||||
import prefixCls from './prefixCls';
|
||||
|
||||
|
||||
export default {
|
||||
mixins: [ Locale, mixin ],
|
||||
|
||||
props: {
|
||||
/* more props in mixin */
|
||||
showWeekNumbers: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-show-week-numbers`]: this.showWeekNumbers
|
||||
}
|
||||
];
|
||||
},
|
||||
calendar(){
|
||||
const weekStartDay = Number(this.t('i.datepicker.weekStartDay'));
|
||||
return new jsCalendar.Generator({onlyDays: !this.showWeekNumbers, weekStart: weekStartDay});
|
||||
},
|
||||
headerDays () {
|
||||
const weekStartDay = Number(this.t('i.datepicker.weekStartDay'));
|
||||
const translatedDays = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'].map(item => {
|
||||
return this.t('i.datepicker.weeks.' + item);
|
||||
});
|
||||
const weekDays = translatedDays.splice(weekStartDay, 7 - weekStartDay).concat(translatedDays.splice(0, weekStartDay));
|
||||
return this.showWeekNumbers ? [''].concat(weekDays) : weekDays;
|
||||
},
|
||||
cells () {
|
||||
const tableYear = this.tableDate.getFullYear();
|
||||
const tableMonth = this.tableDate.getMonth();
|
||||
const today = clearHours(new Date()); // timestamp of today
|
||||
const selectedDays = this.dates.filter(Boolean).map(clearHours); // timestamp of selected days
|
||||
const [minDay, maxDay] = this.dates.map(clearHours);
|
||||
const rangeStart = this.rangeState.from && clearHours(this.rangeState.from);
|
||||
const rangeEnd = this.rangeState.to && clearHours(this.rangeState.to);
|
||||
|
||||
const isRange = this.selectionMode === 'range';
|
||||
const disabledTestFn = typeof this.disabledDate === 'function' && this.disabledDate;
|
||||
|
||||
return this.calendar(tableYear, tableMonth, (cell) => {
|
||||
// normalize date offset from the dates provided by jsCalendar
|
||||
if (cell.date instanceof Date) cell.date.setTime(cell.date.getTime() + cell.date.getTimezoneOffset() * 60000);
|
||||
|
||||
const time = cell.date && clearHours(cell.date);
|
||||
const dateIsInCurrentMonth = cell.date && tableMonth === cell.date.getMonth();
|
||||
return {
|
||||
...cell,
|
||||
type: time === today ? 'today' : cell.type,
|
||||
selected: dateIsInCurrentMonth && selectedDays.includes(time),
|
||||
disabled: (cell.date && disabledTestFn) && disabledTestFn(new Date(time)),
|
||||
range: dateIsInCurrentMonth && isRange && isInRange(time, rangeStart, rangeEnd),
|
||||
start: dateIsInCurrentMonth && isRange && time === minDay,
|
||||
end: dateIsInCurrentMonth && isRange && time === maxDay
|
||||
};
|
||||
}).cells.slice(this.showWeekNumbers ? 8 : 0);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
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 === 'prevMonth',
|
||||
[`${prefixCls}-cell-next-month`]: cell.type === 'nextMonth',
|
||||
[`${prefixCls}-cell-week-label`]: cell.type === 'weekLabel',
|
||||
[`${prefixCls}-cell-range`]: cell.range && !cell.start && !cell.end,
|
||||
[`${prefixCls}-focused`]: clearHours(cell.date) === clearHours(this.focusedDate)
|
||||
|
||||
}
|
||||
];
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
57
src/components/date-picker/base/mixin.js
Normal file
57
src/components/date-picker/base/mixin.js
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
|
||||
import {clearHours} from '../util';
|
||||
|
||||
export default {
|
||||
name: 'PanelTable',
|
||||
props: {
|
||||
tableDate: {
|
||||
type: Date,
|
||||
required: true
|
||||
},
|
||||
disabledDate: {
|
||||
type: Function
|
||||
},
|
||||
selectionMode: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
rangeState: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
from: null,
|
||||
to: null,
|
||||
selecting: false
|
||||
})
|
||||
},
|
||||
focusedDate: {
|
||||
type: Date,
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dates(){
|
||||
const {selectionMode, value, rangeState} = this;
|
||||
const rangeSelecting = selectionMode === 'range' && rangeState.selecting;
|
||||
return rangeSelecting ? [rangeState.from] : value;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleClick (cell) {
|
||||
if (cell.disabled || cell.type === 'weekLabel') return;
|
||||
const newDate = new Date(clearHours(cell.date));
|
||||
|
||||
this.$emit('on-pick', newDate);
|
||||
this.$emit('on-pick-click');
|
||||
},
|
||||
handleMouseMove (cell) {
|
||||
if (!this.rangeState.selecting) return;
|
||||
if (cell.disabled) return;
|
||||
const newDate = cell.date;
|
||||
this.$emit('on-change-range', newDate);
|
||||
},
|
||||
}
|
||||
};
|
||||
74
src/components/date-picker/base/month-table.vue
Normal file
74
src/components/date-picker/base/month-table.vue
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<span
|
||||
:class="getCellCls(cell)"
|
||||
v-for="cell in cells"
|
||||
@click="handleClick(cell)"
|
||||
@mouseenter="handleMouseMove(cell)"
|
||||
|
||||
>
|
||||
<em>{{ cell.text }}</em>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { clearHours } from '../util';
|
||||
import { deepCopy } from '../../../utils/assist';
|
||||
import Locale from '../../../mixins/locale';
|
||||
import mixin from './mixin';
|
||||
import prefixCls from './prefixCls';
|
||||
|
||||
export default {
|
||||
mixins: [ Locale, mixin ],
|
||||
props: {/* in mixin */},
|
||||
computed: {
|
||||
classes() {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
`${prefixCls}-month`
|
||||
];
|
||||
},
|
||||
cells () {
|
||||
let cells = [];
|
||||
const cell_tmpl = {
|
||||
text: '',
|
||||
selected: false,
|
||||
disabled: false
|
||||
};
|
||||
|
||||
const tableYear = this.tableDate.getFullYear();
|
||||
const selectedDays = this.dates.filter(Boolean).map(date => clearHours(new Date(date.getFullYear(), date.getMonth(), 1)));
|
||||
const focusedDate = clearHours(new Date(this.focusedDate.getFullYear(), this.focusedDate.getMonth(), 1));
|
||||
|
||||
for (let i = 0; i < 12; i++) {
|
||||
const cell = deepCopy(cell_tmpl);
|
||||
cell.date = new Date(tableYear, i, 1);
|
||||
cell.text = this.tCell(i + 1);
|
||||
const day = clearHours(cell.date);
|
||||
cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(cell.date) && this.selectionMode === 'month';
|
||||
cell.selected = selectedDays.includes(day);
|
||||
cell.focused = day === focusedDate;
|
||||
cells.push(cell);
|
||||
}
|
||||
|
||||
return cells;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCellCls (cell) {
|
||||
return [
|
||||
`${prefixCls}-cell`,
|
||||
{
|
||||
[`${prefixCls}-cell-selected`]: cell.selected,
|
||||
[`${prefixCls}-cell-disabled`]: cell.disabled,
|
||||
[`${prefixCls}-cell-focused`]: cell.focused,
|
||||
[`${prefixCls}-cell-range`]: cell.range && !cell.start && !cell.end
|
||||
}
|
||||
];
|
||||
},
|
||||
tCell (nr) {
|
||||
return this.t(`i.datepicker.months.m${nr}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
2
src/components/date-picker/base/prefixCls.js
Normal file
2
src/components/date-picker/base/prefixCls.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
|
||||
export default 'ivu-date-picker-cells';
|
||||
238
src/components/date-picker/base/time-spinner.vue
Normal file
238
src/components/date-picker/base/time-spinner.vue
Normal file
|
|
@ -0,0 +1,238 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<div :class="[prefixCls+ '-list']" ref="hours">
|
||||
<ul :class="[prefixCls + '-ul']">
|
||||
<li :class="getCellCls(item)" v-for="item in hoursList" v-show="!item.hide" @click="handleClick('hours', item)">{{ formatTime(item.text) }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div :class="[prefixCls+ '-list']" ref="minutes">
|
||||
<ul :class="[prefixCls + '-ul']">
|
||||
<li :class="getCellCls(item)" v-for="item in minutesList" v-show="!item.hide" @click="handleClick('minutes', item)">{{ formatTime(item.text) }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div :class="[prefixCls+ '-list']" v-show="showSeconds" ref="seconds">
|
||||
<ul :class="[prefixCls + '-ul']">
|
||||
<li :class="getCellCls(item)" v-for="item in secondsList" v-show="!item.hide" @click="handleClick('seconds', item)">{{ 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';
|
||||
const timeParts = ['hours', 'minutes', 'seconds'];
|
||||
|
||||
export default {
|
||||
name: 'TimeSpinner',
|
||||
mixins: [Options],
|
||||
props: {
|
||||
hours: {
|
||||
type: [Number, String],
|
||||
default: NaN
|
||||
},
|
||||
minutes: {
|
||||
type: [Number, String],
|
||||
default: NaN
|
||||
},
|
||||
seconds: {
|
||||
type: [Number, String],
|
||||
default: NaN
|
||||
},
|
||||
showSeconds: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
steps: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
spinerSteps: [1, 1, 1].map((one, i) => Math.abs(this.steps[i]) || one),
|
||||
prefixCls: prefixCls,
|
||||
compiled: false,
|
||||
focusedColumn: -1, // which column inside the picker
|
||||
focusedTime: [0, 0, 0] // the values array into [hh, mm, ss]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-with-seconds`]: this.showSeconds
|
||||
}
|
||||
];
|
||||
},
|
||||
hoursList () {
|
||||
let hours = [];
|
||||
const step = this.spinerSteps[0];
|
||||
const focusedHour = this.focusedColumn === 0 && this.focusedTime[0];
|
||||
const hour_tmpl = {
|
||||
text: 0,
|
||||
selected: false,
|
||||
disabled: false,
|
||||
hide: false
|
||||
};
|
||||
|
||||
for (let i = 0; i < 24; i += step) {
|
||||
const hour = deepCopy(hour_tmpl);
|
||||
hour.text = i;
|
||||
hour.focused = i === focusedHour;
|
||||
|
||||
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 step = this.spinerSteps[1];
|
||||
const focusedMinute = this.focusedColumn === 1 && this.focusedTime[1];
|
||||
const minute_tmpl = {
|
||||
text: 0,
|
||||
selected: false,
|
||||
disabled: false,
|
||||
hide: false
|
||||
};
|
||||
|
||||
for (let i = 0; i < 60; i += step) {
|
||||
const minute = deepCopy(minute_tmpl);
|
||||
minute.text = i;
|
||||
minute.focused = i === focusedMinute;
|
||||
|
||||
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 step = this.spinerSteps[2];
|
||||
const focusedMinute = this.focusedColumn === 2 && this.focusedTime[2];
|
||||
const second_tmpl = {
|
||||
text: 0,
|
||||
selected: false,
|
||||
disabled: false,
|
||||
hide: false
|
||||
};
|
||||
|
||||
for (let i = 0; i < 60; i += step) {
|
||||
const second = deepCopy(second_tmpl);
|
||||
second.text = i;
|
||||
second.focused = i === focusedMinute;
|
||||
|
||||
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-focused`]: cell.focused,
|
||||
[`${prefixCls}-cell-disabled`]: cell.disabled
|
||||
|
||||
}
|
||||
];
|
||||
},
|
||||
chooseValue(values){
|
||||
const changes = timeParts.reduce((obj, part, i) => {
|
||||
const value = values[i];
|
||||
if (this[part] === value) return obj;
|
||||
return {
|
||||
...obj,
|
||||
[part]: value
|
||||
};
|
||||
}, {});
|
||||
if (Object.keys(changes).length > 0) {
|
||||
this.emitChange(changes);
|
||||
}
|
||||
},
|
||||
handleClick (type, cell) {
|
||||
if (cell.disabled) return;
|
||||
const data = {[type]: cell.text};
|
||||
this.emitChange(data);
|
||||
},
|
||||
emitChange(changes){
|
||||
this.$emit('on-change', changes);
|
||||
this.$emit('on-pick-click');
|
||||
},
|
||||
scroll (type, index) {
|
||||
const from = this.$refs[type].scrollTop;
|
||||
const to = 24 * this.getScrollIndex(type, index);
|
||||
scrollTop(this.$refs[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 () {
|
||||
this.$nextTick(() => {
|
||||
timeParts.forEach(type => {
|
||||
this.$refs[type].scrollTop = 24 * this[`${type}List`].findIndex(obj => obj.text == this[type]);
|
||||
});
|
||||
});
|
||||
},
|
||||
formatTime (text) {
|
||||
return text < 10 ? '0' + text : text;
|
||||
},
|
||||
updateFocusedTime(col, time) {
|
||||
this.focusedColumn = col;
|
||||
this.focusedTime = time.slice();
|
||||
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
hours (val) {
|
||||
if (!this.compiled) return;
|
||||
this.scroll('hours', this.hoursList.findIndex(obj => obj.text == val));
|
||||
},
|
||||
minutes (val) {
|
||||
if (!this.compiled) return;
|
||||
this.scroll('minutes', this.minutesList.findIndex(obj => obj.text == val));
|
||||
},
|
||||
seconds (val) {
|
||||
if (!this.compiled) return;
|
||||
this.scroll('seconds', this.secondsList.findIndex(obj => obj.text == val));
|
||||
},
|
||||
focusedTime(updated, old){
|
||||
timeParts.forEach((part, i) => {
|
||||
if (updated[i] === old[i] || typeof updated[i] === 'undefined') return;
|
||||
const valueIndex = this[`${part}List`].findIndex(obj => obj.text === updated[i]);
|
||||
this.scroll(part, valueIndex);
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => this.compiled = true);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
71
src/components/date-picker/base/year-table.vue
Normal file
71
src/components/date-picker/base/year-table.vue
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<span
|
||||
:class="getCellCls(cell)"
|
||||
v-for="cell in cells"
|
||||
@click="handleClick(cell)"
|
||||
@mouseenter="handleMouseMove(cell)"
|
||||
>
|
||||
<em>{{ cell.date.getFullYear() }}</em>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { clearHours } from '../util';
|
||||
import { deepCopy } from '../../../utils/assist';
|
||||
import mixin from './mixin';
|
||||
import prefixCls from './prefixCls';
|
||||
|
||||
export default {
|
||||
mixins: [ mixin ],
|
||||
|
||||
props: {/* in mixin */},
|
||||
computed: {
|
||||
classes() {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
`${prefixCls}-year`
|
||||
];
|
||||
},
|
||||
startYear() {
|
||||
return Math.floor(this.tableDate.getFullYear() / 10) * 10;
|
||||
},
|
||||
cells () {
|
||||
let cells = [];
|
||||
const cell_tmpl = {
|
||||
text: '',
|
||||
selected: false,
|
||||
disabled: false
|
||||
};
|
||||
|
||||
const selectedDays = this.dates.filter(Boolean).map(date => clearHours(new Date(date.getFullYear(), 0, 1)));
|
||||
const focusedDate = clearHours(new Date(this.focusedDate.getFullYear(), 0, 1));
|
||||
|
||||
for (let i = 0; i < 10; i++) {
|
||||
const cell = deepCopy(cell_tmpl);
|
||||
cell.date = new Date(this.startYear + i, 0, 1);
|
||||
cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(cell.date) && this.selectionMode === 'year';
|
||||
const day = clearHours(cell.date);
|
||||
cell.selected = selectedDays.includes(day);
|
||||
cell.focused = day === focusedDate;
|
||||
cells.push(cell);
|
||||
}
|
||||
|
||||
return cells;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCellCls (cell) {
|
||||
return [
|
||||
`${prefixCls}-cell`,
|
||||
{
|
||||
[`${prefixCls}-cell-selected`]: cell.selected,
|
||||
[`${prefixCls}-cell-disabled`]: cell.disabled,
|
||||
[`${prefixCls}-cell-focused`]: cell.focused,
|
||||
[`${prefixCls}-cell-range`]: cell.range && !cell.start && !cell.end
|
||||
}
|
||||
];
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
3
src/components/date-picker/index.js
Normal file
3
src/components/date-picker/index.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import DatePicker from './picker/date-picker';
|
||||
|
||||
export default DatePicker;
|
||||
25
src/components/date-picker/panel/Date/date-panel-label.vue
Normal file
25
src/components/date-picker/panel/Date/date-panel-label.vue
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<template>
|
||||
<span>
|
||||
<span
|
||||
v-if="datePanelLabel"
|
||||
v-show="datePanelLabel.labels[0].type === 'year' || currentView === 'date'"
|
||||
:class="[datePrefixCls + '-header-label']"
|
||||
@click="datePanelLabel.labels[0].handler">{{ datePanelLabel.labels[0].label }}</span>
|
||||
<template v-if="datePanelLabel && currentView === 'date'">{{ datePanelLabel.separator }}</template>
|
||||
<span
|
||||
v-if="datePanelLabel"
|
||||
v-show="datePanelLabel.labels[1].type === 'year' || currentView === 'date'"
|
||||
:class="[datePrefixCls + '-header-label']"
|
||||
@click="datePanelLabel.labels[1].handler">{{ datePanelLabel.labels[1].label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
datePanelLabel: Object,
|
||||
currentView: String,
|
||||
datePrefixCls: String
|
||||
}
|
||||
};
|
||||
</script>
|
||||
65
src/components/date-picker/panel/Date/date-panel-mixin.js
Normal file
65
src/components/date-picker/panel/Date/date-panel-mixin.js
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
|
||||
import { oneOf } from '../../../../utils/assist';
|
||||
import {initTimeDate } from '../../util';
|
||||
|
||||
|
||||
export default {
|
||||
props: {
|
||||
showTime: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
format: {
|
||||
type: String,
|
||||
default: 'yyyy-MM-dd'
|
||||
},
|
||||
selectionMode: {
|
||||
type: String,
|
||||
validator (value) {
|
||||
return oneOf(value, ['year', 'month', 'date', 'time']);
|
||||
},
|
||||
default: 'date'
|
||||
},
|
||||
shortcuts: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
disabledDate: {
|
||||
type: Function,
|
||||
default: () => false
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => [initTimeDate(), initTimeDate()]
|
||||
},
|
||||
timePickerOptions: {
|
||||
default: () => ({}),
|
||||
type: Object,
|
||||
},
|
||||
showWeekNumbers: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
startDate: {
|
||||
type: Date
|
||||
},
|
||||
pickerType: {
|
||||
type: String,
|
||||
require: true
|
||||
},
|
||||
focusedDate: {
|
||||
type: Date,
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isTime(){
|
||||
return this.currentView === 'time';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleToggleTime(){
|
||||
this.currentView = this.currentView === 'time' ? 'date' : 'time';
|
||||
},
|
||||
}
|
||||
};
|
||||
378
src/components/date-picker/panel/Date/date-range.vue
Normal file
378
src/components/date-picker/panel/Date/date-range.vue
Normal file
|
|
@ -0,0 +1,378 @@
|
|||
<template>
|
||||
<div :class="classes" @mousedown.prevent>
|
||||
<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="panelBodyClasses">
|
||||
<div :class="[prefixCls + '-content', prefixCls + '-content-left']" v-show="!isTime">
|
||||
<div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
|
||||
<span
|
||||
:class="iconBtnCls('prev', '-double')"
|
||||
@click="prevYear('left')"><Icon type="ios-arrow-back"></Icon></span>
|
||||
<span
|
||||
v-if="leftPickerTable === 'date-table'"
|
||||
:class="iconBtnCls('prev')"
|
||||
@click="prevMonth('left')"
|
||||
v-show="currentView === 'date'"><Icon type="ios-arrow-back"></Icon></span>
|
||||
<date-panel-label
|
||||
:date-panel-label="leftDatePanelLabel"
|
||||
:current-view="leftDatePanelView"
|
||||
:date-prefix-cls="datePrefixCls"></date-panel-label>
|
||||
<span
|
||||
v-if="splitPanels || leftPickerTable !== 'date-table'"
|
||||
:class="iconBtnCls('next', '-double')"
|
||||
@click="nextYear('left')"><Icon type="ios-arrow-forward"></Icon></span>
|
||||
<span
|
||||
v-if="splitPanels && leftPickerTable === 'date-table'"
|
||||
:class="iconBtnCls('next')"
|
||||
@click="nextMonth('left')"
|
||||
v-show="currentView === 'date'"><Icon type="ios-arrow-forward"></Icon></span>
|
||||
</div>
|
||||
<component
|
||||
:is="leftPickerTable"
|
||||
ref="leftYearTable"
|
||||
v-if="currentView !== 'time'"
|
||||
:table-date="leftPanelDate"
|
||||
selection-mode="range"
|
||||
:disabled-date="disabledDate"
|
||||
:range-state="rangeState"
|
||||
:show-week-numbers="showWeekNumbers"
|
||||
:value="preSelecting.left ? [dates[0]] : dates"
|
||||
:focused-date="focusedDate"
|
||||
|
||||
@on-change-range="handleChangeRange"
|
||||
@on-pick="panelPickerHandlers.left"
|
||||
@on-pick-click="handlePickClick"
|
||||
></component>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-content', prefixCls + '-content-right']" v-show="!isTime">
|
||||
<div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
|
||||
<span
|
||||
v-if="splitPanels || rightPickerTable !== 'date-table'"
|
||||
:class="iconBtnCls('prev', '-double')"
|
||||
@click="prevYear('right')"><Icon type="ios-arrow-back"></Icon></span>
|
||||
<span
|
||||
v-if="splitPanels && rightPickerTable === 'date-table'"
|
||||
:class="iconBtnCls('prev')"
|
||||
@click="prevMonth('right')"
|
||||
v-show="currentView === 'date'"><Icon type="ios-arrow-back"></Icon></span>
|
||||
<date-panel-label
|
||||
:date-panel-label="rightDatePanelLabel"
|
||||
:current-view="rightDatePanelView"
|
||||
:date-prefix-cls="datePrefixCls"></date-panel-label>
|
||||
<span
|
||||
:class="iconBtnCls('next', '-double')"
|
||||
@click="nextYear('right')"><Icon type="ios-arrow-forward"></Icon></span>
|
||||
<span
|
||||
v-if="rightPickerTable === 'date-table'"
|
||||
:class="iconBtnCls('next')"
|
||||
@click="nextMonth('right')"
|
||||
v-show="currentView === 'date'"><Icon type="ios-arrow-forward"></Icon></span>
|
||||
</div>
|
||||
<component
|
||||
:is="rightPickerTable"
|
||||
ref="rightYearTable"
|
||||
v-if="currentView !== 'time'"
|
||||
:table-date="rightPanelDate"
|
||||
selection-mode="range"
|
||||
:range-state="rangeState"
|
||||
:disabled-date="disabledDate"
|
||||
:show-week-numbers="showWeekNumbers"
|
||||
:value="preSelecting.right ? [dates[dates.length - 1]] : dates"
|
||||
:focused-date="focusedDate"
|
||||
|
||||
@on-change-range="handleChangeRange"
|
||||
@on-pick="panelPickerHandlers.right"
|
||||
@on-pick-click="handlePickClick"></component>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-content']" v-show="isTime">
|
||||
<time-picker
|
||||
ref="timePicker"
|
||||
v-if="currentView === 'time'"
|
||||
:value="dates"
|
||||
:format="format"
|
||||
:time-disabled="timeDisabled"
|
||||
v-bind="timePickerOptions"
|
||||
@on-pick="handleRangePick"
|
||||
@on-pick-click="handlePickClick"
|
||||
@on-pick-clear="handlePickClear"
|
||||
@on-pick-success="handlePickSuccess"
|
||||
@on-pick-toggle-time="handleToggleTime"
|
||||
></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/time-range.vue';
|
||||
import Confirm from '../../base/confirm.vue';
|
||||
|
||||
import { toDate, initTimeDate, formatDateLabels } from '../../util';
|
||||
import datePanelLabel from './date-panel-label.vue';
|
||||
|
||||
import Mixin from '../panel-mixin';
|
||||
import DateMixin from './date-panel-mixin';
|
||||
import Locale from '../../../../mixins/locale';
|
||||
|
||||
const prefixCls = 'ivu-picker-panel';
|
||||
const datePrefixCls = 'ivu-date-picker';
|
||||
|
||||
const dateSorter = (a, b) => {
|
||||
if (!a || !b) return 0;
|
||||
return a.getTime() - b.getTime();
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'RangeDatePickerPanel',
|
||||
mixins: [ Mixin, Locale, DateMixin ],
|
||||
components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm, datePanelLabel },
|
||||
props: {
|
||||
// more props in the mixin
|
||||
splitPanels: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data(){
|
||||
const [minDate, maxDate] = this.value.map(date => date || initTimeDate());
|
||||
const leftPanelDate = this.startDate ? this.startDate : minDate;
|
||||
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
datePrefixCls: datePrefixCls,
|
||||
dates: this.value,
|
||||
rangeState: {from: this.value[0], to: this.value[1], selecting: minDate && !maxDate},
|
||||
currentView: this.selectionMode || 'range',
|
||||
leftPickerTable: `${this.selectionMode}-table`,
|
||||
rightPickerTable: `${this.selectionMode}-table`,
|
||||
leftPanelDate: leftPanelDate,
|
||||
rightPanelDate: new Date(leftPanelDate.getFullYear(), leftPanelDate.getMonth() + 1, 1)
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes(){
|
||||
return [
|
||||
`${prefixCls}-body-wrapper`,
|
||||
`${datePrefixCls}-with-range`,
|
||||
{
|
||||
[`${prefixCls}-with-sidebar`]: this.shortcuts.length,
|
||||
[`${datePrefixCls}-with-week-numbers`]: this.showWeekNumbers
|
||||
}
|
||||
];
|
||||
},
|
||||
panelBodyClasses(){
|
||||
return [
|
||||
prefixCls + '-body',
|
||||
{
|
||||
[prefixCls + '-body-time']: this.showTime,
|
||||
[prefixCls + '-body-date']: !this.showTime,
|
||||
}
|
||||
];
|
||||
},
|
||||
leftDatePanelLabel(){
|
||||
return this.panelLabelConfig('left');
|
||||
},
|
||||
rightDatePanelLabel(){
|
||||
return this.panelLabelConfig('right');
|
||||
},
|
||||
leftDatePanelView(){
|
||||
return this.leftPickerTable.split('-').shift();
|
||||
},
|
||||
rightDatePanelView(){
|
||||
return this.rightPickerTable.split('-').shift();
|
||||
},
|
||||
timeDisabled(){
|
||||
return !(this.dates[0] && this.dates[1]);
|
||||
},
|
||||
preSelecting(){
|
||||
const tableType = `${this.currentView}-table`;
|
||||
|
||||
return {
|
||||
left: this.leftPickerTable !== tableType,
|
||||
right: this.rightPickerTable !== tableType,
|
||||
};
|
||||
},
|
||||
panelPickerHandlers(){
|
||||
return {
|
||||
left: this.preSelecting.left ? this.handlePreSelection.bind(this, 'left') : this.handleRangePick,
|
||||
right: this.preSelecting.right ? this.handlePreSelection.bind(this, 'right') : this.handleRangePick,
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(newVal) {
|
||||
const minDate = newVal[0] ? toDate(newVal[0]) : null;
|
||||
const maxDate = newVal[1] ? toDate(newVal[1]) : null;
|
||||
this.dates = [minDate, maxDate].sort(dateSorter);
|
||||
|
||||
this.rangeState = {
|
||||
from: this.dates[0],
|
||||
to: this.dates[1],
|
||||
selecting: false
|
||||
};
|
||||
|
||||
|
||||
// set panels positioning
|
||||
this.setPanelDates(this.startDate || this.dates[0] || new Date());
|
||||
},
|
||||
currentView(currentView){
|
||||
const leftMonth = this.leftPanelDate.getMonth();
|
||||
const rightMonth = this.rightPanelDate.getMonth();
|
||||
const isSameYear = this.leftPanelDate.getFullYear() === this.rightPanelDate.getFullYear();
|
||||
|
||||
if (currentView === 'date' && isSameYear && leftMonth === rightMonth){
|
||||
this.changePanelDate('right', 'Month', 1);
|
||||
}
|
||||
if (currentView === 'month' && isSameYear){
|
||||
this.changePanelDate('right', 'FullYear', 1);
|
||||
}
|
||||
if (currentView === 'year' && isSameYear){
|
||||
this.changePanelDate('right', 'FullYear', 10);
|
||||
}
|
||||
},
|
||||
selectionMode(type){
|
||||
this.currentView = type || 'range';
|
||||
},
|
||||
focusedDate(date){
|
||||
this.setPanelDates(date || new Date());
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reset(){
|
||||
this.currentView = this.selectionMode;
|
||||
this.leftPickerTable = `${this.currentView}-table`;
|
||||
this.rightPickerTable = `${this.currentView}-table`;
|
||||
},
|
||||
setPanelDates(leftPanelDate){
|
||||
this.leftPanelDate = leftPanelDate;
|
||||
const rightPanelDate = new Date(leftPanelDate.getFullYear(), leftPanelDate.getMonth() + 1, 1);
|
||||
const splitRightPanelDate = this.dates[1]? this.dates[1].getTime() : this.dates[1];
|
||||
this.rightPanelDate = this.splitPanels ? new Date(Math.max(splitRightPanelDate, rightPanelDate.getTime())) : rightPanelDate;
|
||||
},
|
||||
panelLabelConfig (direction) {
|
||||
const locale = this.t('i.locale');
|
||||
const datePanelLabel = this.t('i.datepicker.datePanelLabel');
|
||||
const handler = type => {
|
||||
const fn = type == 'month' ? this.showMonthPicker : this.showYearPicker;
|
||||
return () => fn(direction);
|
||||
};
|
||||
|
||||
const date = this[`${direction}PanelDate`];
|
||||
const { labels, separator } = formatDateLabels(locale, datePanelLabel, date);
|
||||
|
||||
return {
|
||||
separator: separator,
|
||||
labels: labels.map(obj => ((obj.handler = handler(obj.type)), obj))
|
||||
};
|
||||
},
|
||||
prevYear (panel) {
|
||||
const increment = this.currentView === 'year' ? -10 : -1;
|
||||
this.changePanelDate(panel, 'FullYear', increment);
|
||||
},
|
||||
nextYear (panel) {
|
||||
const increment = this.currentView === 'year' ? 10 : 1;
|
||||
this.changePanelDate(panel, 'FullYear', increment);
|
||||
},
|
||||
prevMonth(panel){
|
||||
this.changePanelDate(panel, 'Month', -1);
|
||||
},
|
||||
nextMonth(panel){
|
||||
this.changePanelDate(panel, 'Month', 1);
|
||||
},
|
||||
changePanelDate(panel, type, increment, updateOtherPanel = true){
|
||||
const current = new Date(this[`${panel}PanelDate`]);
|
||||
current[`set${type}`](current[`get${type}`]() + increment);
|
||||
this[`${panel}PanelDate`] = current;
|
||||
|
||||
if (!updateOtherPanel) return;
|
||||
|
||||
if (this.splitPanels){
|
||||
// change other panel if dates overlap
|
||||
const otherPanel = panel === 'left' ? 'right' : 'left';
|
||||
if (panel === 'left' && this.leftPanelDate >= this.rightPanelDate){
|
||||
this.changePanelDate(otherPanel, type, 1);
|
||||
}
|
||||
if (panel === 'right' && this.rightPanelDate <= this.leftPanelDate){
|
||||
this.changePanelDate(otherPanel, type, -1);
|
||||
}
|
||||
} else {
|
||||
// keep the panels together
|
||||
const otherPanel = panel === 'left' ? 'right' : 'left';
|
||||
const currentDate = this[`${otherPanel}PanelDate`];
|
||||
const temp = new Date(currentDate);
|
||||
|
||||
if (type === 'Month') {
|
||||
const nextMonthLastDate = new Date(
|
||||
temp.getFullYear(), temp.getMonth() + increment + 1, 0
|
||||
).getDate();
|
||||
temp.setDate(Math.min(nextMonthLastDate, temp.getDate()));
|
||||
}
|
||||
|
||||
temp[`set${type}`](temp[`get${type}`]() + increment);
|
||||
this[`${otherPanel}PanelDate`] = temp;
|
||||
}
|
||||
},
|
||||
showYearPicker (panel) {
|
||||
this[`${panel}PickerTable`] = 'year-table';
|
||||
},
|
||||
showMonthPicker (panel) {
|
||||
this[`${panel}PickerTable`] = 'month-table';
|
||||
},
|
||||
handlePreSelection(panel, value){
|
||||
this[`${panel}PanelDate`] = value;
|
||||
const currentViewType = this[`${panel}PickerTable`];
|
||||
if (currentViewType === 'year-table') this[`${panel}PickerTable`] = 'month-table';
|
||||
else this[`${panel}PickerTable`] = `${this.currentView}-table`;
|
||||
|
||||
if (!this.splitPanels){
|
||||
const otherPanel = panel === 'left' ? 'right' : 'left';
|
||||
this[`${otherPanel}PanelDate`] = value;
|
||||
|
||||
const increment = otherPanel === 'left' ? -1 : 1; // #3973
|
||||
|
||||
this.changePanelDate(otherPanel, 'Month', increment, false);
|
||||
}
|
||||
},
|
||||
handleRangePick (val, type) {
|
||||
if (this.rangeState.selecting || this.currentView === 'time'){
|
||||
if (this.currentView === 'time'){
|
||||
this.dates = val;
|
||||
} else {
|
||||
const [minDate, maxDate] = [this.rangeState.from, val].sort(dateSorter);
|
||||
this.dates = [minDate, maxDate];
|
||||
this.rangeState = {
|
||||
from: minDate,
|
||||
to: maxDate,
|
||||
selecting: false
|
||||
};
|
||||
}
|
||||
this.handleConfirm(false, type || 'date');
|
||||
} else {
|
||||
this.rangeState = {
|
||||
from: val,
|
||||
to: null,
|
||||
selecting: true
|
||||
};
|
||||
}
|
||||
},
|
||||
handleChangeRange (val) {
|
||||
this.rangeState.to = val;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
213
src/components/date-picker/panel/Date/date.vue
Normal file
213
src/components/date-picker/panel/Date/date.vue
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
<template>
|
||||
<div :class="classes" @mousedown.prevent>
|
||||
<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="changeYear(-1)"><Icon type="ios-arrow-back"></Icon></span>
|
||||
<span
|
||||
v-if="pickerTable === 'date-table'"
|
||||
:class="iconBtnCls('prev')"
|
||||
@click="changeMonth(-1)"
|
||||
v-show="currentView === 'date'"><Icon type="ios-arrow-back"></Icon></span>
|
||||
<date-panel-label
|
||||
:date-panel-label="datePanelLabel"
|
||||
:current-view="pickerTable.split('-').shift()"
|
||||
:date-prefix-cls="datePrefixCls"></date-panel-label>
|
||||
<span
|
||||
:class="iconBtnCls('next', '-double')"
|
||||
@click="changeYear(+1)"><Icon type="ios-arrow-forward"></Icon></span>
|
||||
<span
|
||||
v-if="pickerTable === 'date-table'"
|
||||
:class="iconBtnCls('next')"
|
||||
@click="changeMonth(+1)"
|
||||
v-show="currentView === 'date'"><Icon type="ios-arrow-forward"></Icon></span>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-content']">
|
||||
<component
|
||||
:is="pickerTable"
|
||||
ref="pickerTable"
|
||||
v-if="currentView !== 'time'"
|
||||
:table-date="panelDate"
|
||||
:show-week-numbers="showWeekNumbers"
|
||||
:value="dates"
|
||||
:selection-mode="selectionMode"
|
||||
:disabled-date="disabledDate"
|
||||
:focused-date="focusedDate"
|
||||
|
||||
@on-pick="panelPickerHandlers"
|
||||
@on-pick-click="handlePickClick"
|
||||
></component>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-content']" v-show="isTime">
|
||||
<time-picker
|
||||
ref="timePicker"
|
||||
v-if="currentView === 'time'"
|
||||
:value="dates"
|
||||
:format="format"
|
||||
:time-disabled="timeDisabled"
|
||||
:disabled-date="disabledDate"
|
||||
:focused-date="focusedDate"
|
||||
|
||||
v-bind="timePickerOptions"
|
||||
@on-pick="handlePick"
|
||||
@on-pick-click="handlePickClick"
|
||||
@on-pick-clear="handlePickClear"
|
||||
@on-pick-success="handlePickSuccess"
|
||||
@on-pick-toggle-time="handleToggleTime"
|
||||
></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/time.vue';
|
||||
import Confirm from '../../base/confirm.vue';
|
||||
import datePanelLabel from './date-panel-label.vue';
|
||||
|
||||
import Mixin from '../panel-mixin';
|
||||
import DateMixin from './date-panel-mixin';
|
||||
import Locale from '../../../../mixins/locale';
|
||||
|
||||
import { siblingMonth, formatDateLabels } from '../../util';
|
||||
|
||||
const prefixCls = 'ivu-picker-panel';
|
||||
const datePrefixCls = 'ivu-date-picker';
|
||||
|
||||
export default {
|
||||
name: 'DatePickerPanel',
|
||||
mixins: [ Mixin, Locale, DateMixin ],
|
||||
components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm, datePanelLabel },
|
||||
props: {
|
||||
// more props in the mixin
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
const {selectionMode, value} = this;
|
||||
|
||||
const dates = value.slice().sort();
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
datePrefixCls: datePrefixCls,
|
||||
currentView: selectionMode || 'date',
|
||||
pickerTable: this.getTableType(selectionMode),
|
||||
dates: dates,
|
||||
panelDate: this.startDate || dates[0] || new Date()
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}-body-wrapper`,
|
||||
{
|
||||
[`${prefixCls}-with-sidebar`]: this.shortcuts.length
|
||||
}
|
||||
];
|
||||
},
|
||||
panelPickerHandlers(){
|
||||
return this.pickerTable === `${this.currentView}-table` ? this.handlePick : this.handlePreSelection;
|
||||
},
|
||||
datePanelLabel () {
|
||||
const locale = this.t('i.locale');
|
||||
const datePanelLabel = this.t('i.datepicker.datePanelLabel');
|
||||
const date = this.panelDate;
|
||||
const { labels, separator } = formatDateLabels(locale, datePanelLabel, date);
|
||||
|
||||
const handler = type => {
|
||||
return () => this.pickerTable = this.getTableType(type);
|
||||
};
|
||||
|
||||
return {
|
||||
separator: separator,
|
||||
labels: labels.map(obj => ((obj.handler = handler(obj.type)), obj))
|
||||
};
|
||||
},
|
||||
timeDisabled(){
|
||||
return !this.dates[0];
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value (newVal) {
|
||||
this.dates = newVal;
|
||||
const panelDate = this.multiple ? this.dates[this.dates.length - 1] : (this.startDate || this.dates[0]);
|
||||
this.panelDate = panelDate || new Date();
|
||||
},
|
||||
currentView (currentView) {
|
||||
this.$emit('on-selection-mode-change', currentView);
|
||||
|
||||
if (this.currentView === 'time') {
|
||||
this.$nextTick(() => {
|
||||
const spinner = this.$refs.timePicker.$refs.timeSpinner;
|
||||
spinner.updateScroll();
|
||||
});
|
||||
}
|
||||
},
|
||||
selectionMode(type){
|
||||
this.currentView = type;
|
||||
this.pickerTable = this.getTableType(type);
|
||||
},
|
||||
focusedDate(date){
|
||||
const isDifferentYear = date.getFullYear() !== this.panelDate.getFullYear();
|
||||
const isDifferentMonth = isDifferentYear || date.getMonth() !== this.panelDate.getMonth();
|
||||
if (isDifferentYear || isDifferentMonth){
|
||||
if (!this.multiple) this.panelDate = date;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reset(){
|
||||
this.currentView = this.selectionMode;
|
||||
this.pickerTable = this.getTableType(this.currentView);
|
||||
},
|
||||
changeYear(dir){
|
||||
if (this.selectionMode === 'year' || this.pickerTable === 'year-table'){
|
||||
this.panelDate = new Date(this.panelDate.getFullYear() + dir * 10, 0, 1);
|
||||
} else {
|
||||
this.panelDate = siblingMonth(this.panelDate, dir * 12);
|
||||
}
|
||||
},
|
||||
getTableType(currentView){
|
||||
return currentView.match(/^time/) ? 'time-picker' : `${currentView}-table`;
|
||||
},
|
||||
changeMonth(dir){
|
||||
this.panelDate = siblingMonth(this.panelDate, dir);
|
||||
},
|
||||
handlePreSelection(value){
|
||||
this.panelDate = value;
|
||||
if (this.pickerTable === 'year-table') this.pickerTable = 'month-table';
|
||||
else this.pickerTable = this.getTableType(this.currentView);
|
||||
|
||||
},
|
||||
handlePick (value, type) {
|
||||
const {selectionMode, panelDate} = this;
|
||||
if (selectionMode === 'year') value = new Date(value.getFullYear(), 0, 1);
|
||||
else if (selectionMode === 'month') value = new Date(panelDate.getFullYear(), value.getMonth(), 1);
|
||||
else value = new Date(value);
|
||||
|
||||
this.dates = [value];
|
||||
this.$emit('on-pick', value, false, type || selectionMode);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
162
src/components/date-picker/panel/Time/time-range.vue
Normal file
162
src/components/date-picker/panel/Time/time-range.vue
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
<template>
|
||||
<div :class="classes" @mousedown.prevent>
|
||||
<div :class="[prefixCls + '-body']">
|
||||
<div :class="[prefixCls + '-content', prefixCls + '-content-left']">
|
||||
<div :class="[timePrefixCls + '-header']">
|
||||
<template v-if="showDate">{{ leftDatePanelLabel }}</template>
|
||||
<template v-else>{{ t('i.datepicker.startTime') }}</template>
|
||||
</div>
|
||||
<time-spinner
|
||||
ref="timeSpinner"
|
||||
:steps="steps"
|
||||
:show-seconds="showSeconds"
|
||||
:hours="value[0] && dateStart.getHours()"
|
||||
:minutes="value[0] && dateStart.getMinutes()"
|
||||
:seconds="value[0] && dateStart.getSeconds()"
|
||||
: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">{{ rightDatePanelLabel }}</template>
|
||||
<template v-else>{{ t('i.datepicker.endTime') }}</template>
|
||||
</div>
|
||||
<time-spinner
|
||||
ref="timeSpinnerEnd"
|
||||
:steps="steps"
|
||||
:show-seconds="showSeconds"
|
||||
:hours="value[1] && dateEnd.getHours()"
|
||||
:minutes="value[1] && dateEnd.getMinutes()"
|
||||
:seconds="value[1] && dateEnd.getSeconds()"
|
||||
: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 Options from '../../time-mixins';
|
||||
|
||||
|
||||
import Mixin from '../panel-mixin';
|
||||
import Locale from '../../../../mixins/locale';
|
||||
|
||||
import { initTimeDate, formatDateLabels } from '../../util';
|
||||
|
||||
const prefixCls = 'ivu-picker-panel';
|
||||
const timePrefixCls = 'ivu-time-picker';
|
||||
|
||||
const capitalize = (str) => str[0].toUpperCase() + str.slice(1);
|
||||
|
||||
export default {
|
||||
name: 'RangeTimePickerPanel',
|
||||
mixins: [ Mixin, Locale, Options ],
|
||||
components: { TimeSpinner, Confirm },
|
||||
props: {
|
||||
steps: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
format: {
|
||||
type: String,
|
||||
default: 'HH:mm:ss'
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
},
|
||||
data () {
|
||||
const [dateStart, dateEnd] = this.value.slice();
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
timePrefixCls: timePrefixCls,
|
||||
showDate: false,
|
||||
dateStart: dateStart || initTimeDate(),
|
||||
dateEnd: dateEnd || initTimeDate()
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}-body-wrapper`,
|
||||
`${timePrefixCls}-with-range`,
|
||||
{
|
||||
[`${timePrefixCls}-with-seconds`]: this.showSeconds
|
||||
}
|
||||
];
|
||||
},
|
||||
showSeconds () {
|
||||
return !(this.format || '').match(/mm$/);
|
||||
},
|
||||
leftDatePanelLabel () {
|
||||
return this.panelLabelConfig(this.date);
|
||||
},
|
||||
rightDatePanelLabel () {
|
||||
return this.panelLabelConfig(this.dateEnd);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value (dates) {
|
||||
const [dateStart, dateEnd] = dates.slice();
|
||||
this.dateStart = dateStart || initTimeDate();
|
||||
this.dateEnd = dateEnd || initTimeDate();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
panelLabelConfig (date) {
|
||||
const locale = this.t('i.locale');
|
||||
const datePanelLabel = this.t('i.datepicker.datePanelLabel');
|
||||
const { labels, separator } = formatDateLabels(locale, datePanelLabel, date || initTimeDate());
|
||||
return [labels[0].label, separator, labels[1].label].join('');
|
||||
},
|
||||
handleChange (start, end, emit = true) {
|
||||
|
||||
const dateStart = new Date(this.dateStart);
|
||||
let dateEnd = new Date(this.dateEnd);
|
||||
|
||||
// set dateStart
|
||||
Object.keys(start).forEach(type => {
|
||||
dateStart[`set${capitalize(type)}`](start[type]);
|
||||
});
|
||||
|
||||
// set dateEnd
|
||||
Object.keys(end).forEach(type => {
|
||||
dateEnd[`set${capitalize(type)}`](end[type]);
|
||||
});
|
||||
|
||||
// judge endTime > startTime?
|
||||
if (dateEnd < dateStart) dateEnd = dateStart;
|
||||
|
||||
if (emit) this.$emit('on-pick', [dateStart, dateEnd], 'time');
|
||||
},
|
||||
handleStartChange (date) {
|
||||
this.handleChange(date, {});
|
||||
},
|
||||
handleEndChange (date) {
|
||||
this.handleChange({}, date);
|
||||
},
|
||||
updateScroll () {
|
||||
this.$refs.timeSpinner.updateScroll();
|
||||
this.$refs.timeSpinnerEnd.updateScroll();
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
145
src/components/date-picker/panel/Time/time.vue
Normal file
145
src/components/date-picker/panel/Time/time.vue
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
<template>
|
||||
<div :class="[prefixCls + '-body-wrapper']" @mousedown.prevent>
|
||||
<div :class="[prefixCls + '-body']">
|
||||
<div :class="[timePrefixCls + '-header']" v-if="showDate">{{ visibleDate }}</div>
|
||||
<div :class="[prefixCls + '-content']">
|
||||
<time-spinner
|
||||
ref="timeSpinner"
|
||||
:show-seconds="showSeconds"
|
||||
:steps="steps"
|
||||
:hours="timeSlots[0]"
|
||||
:minutes="timeSlots[1]"
|
||||
:seconds="timeSlots[2]"
|
||||
:disabled-hours="disabledHMS.disabledHours"
|
||||
:disabled-minutes="disabledHMS.disabledMinutes"
|
||||
:disabled-seconds="disabledHMS.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 Options from '../../time-mixins';
|
||||
|
||||
|
||||
import Mixin from '../panel-mixin';
|
||||
import Locale from '../../../../mixins/locale';
|
||||
|
||||
import { initTimeDate } from '../../util';
|
||||
|
||||
const prefixCls = 'ivu-picker-panel';
|
||||
const timePrefixCls = 'ivu-time-picker';
|
||||
|
||||
const capitalize = (str) => str[0].toUpperCase() + str.slice(1);
|
||||
const mergeDateHMS = (date, hours, minutes, seconds) => {
|
||||
const newDate = new Date(date.getTime());
|
||||
newDate.setHours(hours);
|
||||
newDate.setMinutes(minutes);
|
||||
newDate.setSeconds(seconds);
|
||||
return newDate;
|
||||
};
|
||||
const unique = (el, i, arr) => arr.indexOf(el) === i;
|
||||
const returnFalse = () => false;
|
||||
|
||||
export default {
|
||||
name: 'TimePickerPanel',
|
||||
mixins: [ Mixin, Locale, Options ],
|
||||
components: { TimeSpinner, Confirm },
|
||||
props: {
|
||||
disabledDate: {
|
||||
type: Function,
|
||||
default: returnFalse
|
||||
},
|
||||
steps: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
format: {
|
||||
type: String,
|
||||
default: 'HH:mm:ss'
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
timePrefixCls: timePrefixCls,
|
||||
date: this.value[0] || initTimeDate(),
|
||||
showDate: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
showSeconds () {
|
||||
return !(this.format || '').match(/mm$/);
|
||||
},
|
||||
visibleDate () { // TODO
|
||||
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}`;
|
||||
},
|
||||
timeSlots(){
|
||||
if (!this.value[0]) return [];
|
||||
return ['getHours', 'getMinutes', 'getSeconds'].map(slot => this.date[slot]());
|
||||
},
|
||||
disabledHMS(){
|
||||
const disabledTypes = ['disabledHours', 'disabledMinutes', 'disabledSeconds'];
|
||||
if (this.disabledDate === returnFalse || !this.value[0]) {
|
||||
const disabled = disabledTypes.reduce(
|
||||
(obj, type) => (obj[type] = this[type], obj), {}
|
||||
);
|
||||
return disabled;
|
||||
} else {
|
||||
const slots = [24, 60, 60];
|
||||
const disabled = ['Hours', 'Minutes', 'Seconds'].map(type => this[`disabled${type}`]);
|
||||
const disabledHMS = disabled.map((preDisabled, j) => {
|
||||
const slot = slots[j];
|
||||
const toDisable = preDisabled;
|
||||
for (let i = 0; i < slot; i+= (this.steps[j] || 1)){
|
||||
const hms = this.timeSlots.map((slot, x) => x === j ? i : slot);
|
||||
const testDateTime = mergeDateHMS(this.date, ...hms);
|
||||
if (this.disabledDate(testDateTime, true)) toDisable.push(i);
|
||||
}
|
||||
return toDisable.filter(unique);
|
||||
});
|
||||
return disabledTypes.reduce(
|
||||
(obj, type, i) => (obj[type] = disabledHMS[i], obj), {}
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value (dates) {
|
||||
let newVal = dates[0] || initTimeDate();
|
||||
newVal = new Date(newVal);
|
||||
this.date = newVal;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange (date, emit = true) {
|
||||
|
||||
const newDate = new Date(this.date);
|
||||
Object.keys(date).forEach(
|
||||
type => newDate[`set${capitalize(type)}`](date[type])
|
||||
);
|
||||
|
||||
if (emit) this.$emit('on-pick', newDate, 'time');
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
56
src/components/date-picker/panel/panel-mixin.js
Normal file
56
src/components/date-picker/panel/panel-mixin.js
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
const prefixCls = 'ivu-picker-panel';
|
||||
const datePrefixCls = 'ivu-date-picker';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
confirm: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
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.resetView();
|
||||
this.$emit('on-pick-clear');
|
||||
},
|
||||
handlePickSuccess () {
|
||||
this.resetView();
|
||||
this.$emit('on-pick-success');
|
||||
},
|
||||
handlePickClick () {
|
||||
this.$emit('on-pick-click');
|
||||
},
|
||||
resetView(){
|
||||
setTimeout(
|
||||
() => this.currentView = this.selectionMode,
|
||||
500 // 500ms so the dropdown can close before changing
|
||||
);
|
||||
},
|
||||
handleClear() {
|
||||
this.dates = this.dates.map(() => null);
|
||||
this.rangeState = {};
|
||||
this.$emit('on-pick', this.dates);
|
||||
this.handleConfirm();
|
||||
// if (this.showTime) this.$refs.timePicker.handleClear();
|
||||
},
|
||||
handleConfirm(visible, type) {
|
||||
this.$emit('on-pick', this.dates, visible, type || this.type);
|
||||
},
|
||||
onToggleVisibility(open){
|
||||
const {timeSpinner, timeSpinnerEnd} = this.$refs;
|
||||
if (open && timeSpinner) timeSpinner.updateScroll();
|
||||
if (open && timeSpinnerEnd) timeSpinnerEnd.updateScroll();
|
||||
}
|
||||
}
|
||||
};
|
||||
798
src/components/date-picker/picker.vue
Normal file
798
src/components/date-picker/picker.vue
Normal file
|
|
@ -0,0 +1,798 @@
|
|||
<template>
|
||||
<div
|
||||
:class="wrapperClasses"
|
||||
v-click-outside:mousedown.capture="handleClose"
|
||||
v-click-outside:touchstart.capture="handleClose"
|
||||
v-click-outside.capture="handleClose"
|
||||
>
|
||||
<div ref="reference" :class="[prefixCls + '-rel']">
|
||||
<slot>
|
||||
<i-input
|
||||
:key="forceInputRerender"
|
||||
:element-id="elementId"
|
||||
:class="[prefixCls + '-editor']"
|
||||
:readonly="!editable || readonly"
|
||||
:disabled="disabled"
|
||||
:size="size"
|
||||
:placeholder="placeholder"
|
||||
:value="visualValue"
|
||||
:name="name"
|
||||
ref="input"
|
||||
|
||||
@on-input-change="handleInputChange"
|
||||
@on-focus="handleFocus"
|
||||
@on-blur="handleBlur"
|
||||
@click.native="handleFocus"
|
||||
@keydown.native="handleKeydown"
|
||||
@mouseenter.native="handleInputMouseenter"
|
||||
@mouseleave.native="handleInputMouseleave"
|
||||
>
|
||||
<Icon @click="handleIconClick" :type="arrowType" :custom="customArrowType" :size="arrowSize" slot="suffix" />
|
||||
</i-input>
|
||||
</slot>
|
||||
</div>
|
||||
<transition name="transition-drop">
|
||||
<Drop
|
||||
@click.native="handleTransferClick"
|
||||
v-show="opened"
|
||||
:class="{ [prefixCls + '-transfer']: transfer }"
|
||||
:placement="placement"
|
||||
ref="drop"
|
||||
:data-transfer="transfer"
|
||||
:transfer="transfer"
|
||||
v-transfer-dom>
|
||||
<div>
|
||||
<component
|
||||
:is="panel"
|
||||
ref="pickerPanel"
|
||||
:visible="visible"
|
||||
:showTime="type === 'datetime' || type === 'datetimerange'"
|
||||
:confirm="isConfirm"
|
||||
:selectionMode="selectionMode"
|
||||
:steps="steps"
|
||||
:format="format"
|
||||
:value="internalValue"
|
||||
:start-date="startDate"
|
||||
:split-panels="splitPanels"
|
||||
:show-week-numbers="showWeekNumbers"
|
||||
:picker-type="type"
|
||||
:multiple="multiple"
|
||||
:focused-date="focusedDate"
|
||||
|
||||
:time-picker-options="timePickerOptions"
|
||||
|
||||
v-bind="ownPickerProps"
|
||||
|
||||
@on-pick="onPick"
|
||||
@on-pick-clear="handleClear"
|
||||
@on-pick-success="onPickSuccess"
|
||||
@on-pick-click="disableClickOutSide = true"
|
||||
@on-selection-mode-change="onSelectionModeChange"
|
||||
></component>
|
||||
</div>
|
||||
</Drop>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
|
||||
import iInput from '../../components/input/input.vue';
|
||||
import Drop from '../../components/select/dropdown.vue';
|
||||
import Icon from '../../components/icon/icon.vue';
|
||||
import {directive as clickOutside} from 'v-click-outside-x';
|
||||
import TransferDom from '../../directives/transfer-dom';
|
||||
import { oneOf } from '../../utils/assist';
|
||||
import { DEFAULT_FORMATS, TYPE_VALUE_RESOLVER_MAP, getDayCountOfMonth } from './util';
|
||||
import {findComponentsDownward} from '../../utils/assist';
|
||||
import Emitter from '../../mixins/emitter';
|
||||
|
||||
const prefixCls = 'ivu-date-picker';
|
||||
const pickerPrefixCls = 'ivu-picker';
|
||||
|
||||
const isEmptyArray = val => val.reduce((isEmpty, str) => isEmpty && !str || (typeof str === 'string' && str.trim() === ''), true);
|
||||
const keyValueMapper = {
|
||||
40: 'up',
|
||||
39: 'right',
|
||||
38: 'down',
|
||||
37: 'left',
|
||||
};
|
||||
|
||||
const mapPossibleValues = (key, horizontal, vertical) => {
|
||||
if (key === 'left') return horizontal * -1;
|
||||
if (key === 'right') return horizontal * 1;
|
||||
if (key === 'up') return vertical * 1;
|
||||
if (key === 'down') return vertical * -1;
|
||||
};
|
||||
|
||||
const pulseElement = (el) => {
|
||||
const pulseClass = 'ivu-date-picker-btn-pulse';
|
||||
el.classList.add(pulseClass);
|
||||
setTimeout(() => el.classList.remove(pulseClass), 200);
|
||||
};
|
||||
|
||||
const extractTime = date => {
|
||||
if (!date) return [0, 0, 0];
|
||||
return [
|
||||
date.getHours(), date.getMinutes(), date.getSeconds()
|
||||
];
|
||||
};
|
||||
|
||||
|
||||
export default {
|
||||
mixins: [ Emitter ],
|
||||
components: { iInput, Drop, Icon },
|
||||
directives: { clickOutside, TransferDom },
|
||||
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
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
timePickerOptions: {
|
||||
default: () => ({}),
|
||||
type: Object,
|
||||
},
|
||||
splitPanels: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showWeekNumbers: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
startDate: {
|
||||
type: Date
|
||||
},
|
||||
size: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['small', 'large', 'default']);
|
||||
},
|
||||
default () {
|
||||
return !this.$IVIEW || this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
|
||||
}
|
||||
},
|
||||
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'
|
||||
},
|
||||
transfer: {
|
||||
type: Boolean,
|
||||
default () {
|
||||
return !this.$IVIEW || this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
|
||||
}
|
||||
},
|
||||
name: {
|
||||
type: String
|
||||
},
|
||||
elementId: {
|
||||
type: String
|
||||
},
|
||||
steps: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
value: {
|
||||
type: [Date, String, Array]
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
separator: {
|
||||
type: String,
|
||||
default: ' - '
|
||||
}
|
||||
},
|
||||
data(){
|
||||
const isRange = this.type.includes('range');
|
||||
const emptyArray = isRange ? [null, null] : [null];
|
||||
const initialValue = isEmptyArray((isRange ? this.value : [this.value]) || []) ? emptyArray : this.parseDate(this.value);
|
||||
const focusedTime = initialValue.map(extractTime);
|
||||
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
showClose: false,
|
||||
visible: false,
|
||||
internalValue: initialValue,
|
||||
disableClickOutSide: false, // fixed when click a date,trigger clickoutside to close picker
|
||||
disableCloseUnderTransfer: false, // transfer 模式下，点击Drop也会触发关闭,
|
||||
selectionMode: this.onSelectionModeChange(this.type),
|
||||
forceInputRerender: 1,
|
||||
isFocused: false,
|
||||
focusedDate: initialValue[0] || this.startDate || new Date(),
|
||||
focusedTime: {
|
||||
column: 0, // which column inside the picker
|
||||
picker: 0, // which picker
|
||||
time: focusedTime, // the values array into [hh, mm, ss],
|
||||
active: false
|
||||
},
|
||||
internalFocus: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
wrapperClasses(){
|
||||
return [prefixCls, {
|
||||
[prefixCls + '-focused']: this.isFocused
|
||||
}];
|
||||
},
|
||||
publicVModelValue(){
|
||||
if (this.multiple){
|
||||
return this.internalValue.slice();
|
||||
} else {
|
||||
const isRange = this.type.includes('range');
|
||||
let val = this.internalValue.map(date => date instanceof Date ? new Date(date) : (date || ''));
|
||||
|
||||
if (this.type.match(/^time/)) val = val.map(this.formatDate);
|
||||
return (isRange || this.multiple) ? val : val[0];
|
||||
}
|
||||
},
|
||||
publicStringValue(){
|
||||
const {formatDate, publicVModelValue, type} = this;
|
||||
if (type.match(/^time/)) return publicVModelValue;
|
||||
if (this.multiple) return formatDate(publicVModelValue);
|
||||
return Array.isArray(publicVModelValue) ? publicVModelValue.map(formatDate) : formatDate(publicVModelValue);
|
||||
},
|
||||
opened () {
|
||||
return this.open === null ? this.visible : this.open;
|
||||
},
|
||||
transition () {
|
||||
const bottomPlaced = this.placement.match(/^bottom/);
|
||||
return bottomPlaced ? 'slide-up' : 'slide-down';
|
||||
},
|
||||
visualValue() {
|
||||
return this.formatDate(this.internalValue);
|
||||
},
|
||||
isConfirm(){
|
||||
return this.confirm || this.type === 'datetime' || this.type === 'datetimerange' || this.multiple;
|
||||
},
|
||||
// 3.4.0, global setting customArrow 有值时，arrow 赋值空
|
||||
arrowType () {
|
||||
let type = '';
|
||||
|
||||
if (this.type === 'time' || this.type === 'timerange') {
|
||||
type = 'ios-time-outline';
|
||||
|
||||
if (this.$IVIEW) {
|
||||
if (this.$IVIEW.timePicker.customIcon) {
|
||||
type = '';
|
||||
} else if (this.$IVIEW.timePicker.icon) {
|
||||
type = this.$IVIEW.timePicker.icon;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
type = 'ios-calendar-outline';
|
||||
|
||||
if (this.$IVIEW) {
|
||||
if (this.$IVIEW.datePicker.customIcon) {
|
||||
type = '';
|
||||
} else if (this.$IVIEW.datePicker.icon) {
|
||||
type = this.$IVIEW.datePicker.icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.showClose) type = 'ios-close-circle';
|
||||
|
||||
return type;
|
||||
},
|
||||
// 3.4.0, global setting
|
||||
customArrowType () {
|
||||
let type = '';
|
||||
|
||||
if (!this.showClose) {
|
||||
if (this.type === 'time' || this.type === 'timerange') {
|
||||
if (this.$IVIEW) {
|
||||
if (this.$IVIEW.timePicker.customIcon) {
|
||||
type = this.$IVIEW.timePicker.customIcon;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (this.$IVIEW) {
|
||||
if (this.$IVIEW.datePicker.customIcon) {
|
||||
type = this.$IVIEW.datePicker.customIcon;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return type;
|
||||
},
|
||||
// 3.4.0, global setting
|
||||
arrowSize () {
|
||||
let size = '';
|
||||
|
||||
if (!this.showClose) {
|
||||
if (this.type === 'time' || this.type === 'timerange') {
|
||||
if (this.$IVIEW) {
|
||||
if (this.$IVIEW.timePicker.iconSize) {
|
||||
size = this.$IVIEW.timePicker.iconSize;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (this.$IVIEW) {
|
||||
if (this.$IVIEW.datePicker.iconSize) {
|
||||
size = this.$IVIEW.datePicker.iconSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return size;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSelectionModeChange(type){
|
||||
if (type.match(/^date/)) type = 'date';
|
||||
this.selectionMode = oneOf(type, ['year', 'month', 'date', 'time']) && type;
|
||||
return this.selectionMode;
|
||||
},
|
||||
// 开启 transfer 时，点击 Drop 即会关闭，这里不让其关闭
|
||||
handleTransferClick () {
|
||||
if (this.transfer) this.disableCloseUnderTransfer = true;
|
||||
},
|
||||
handleClose (e) {
|
||||
if (this.disableCloseUnderTransfer) {
|
||||
this.disableCloseUnderTransfer = false;
|
||||
return false;
|
||||
}
|
||||
|
||||
if (e && e.type === 'mousedown' && this.visible) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.visible) {
|
||||
const pickerPanel = this.$refs.pickerPanel && this.$refs.pickerPanel.$el;
|
||||
if (e && pickerPanel && pickerPanel.contains(e.target)) return; // its a click inside own component, lets ignore it.
|
||||
|
||||
this.visible = false;
|
||||
e && e.preventDefault();
|
||||
e && e.stopPropagation();
|
||||
this.$emit('on-clickoutside', e);
|
||||
return;
|
||||
}
|
||||
|
||||
this.isFocused = false;
|
||||
this.disableClickOutSide = false;
|
||||
},
|
||||
handleFocus (e) {
|
||||
if (this.readonly) return;
|
||||
this.isFocused = true;
|
||||
if (e && e.type === 'focus') return; // just focus, don't open yet
|
||||
if(!this.disabled){
|
||||
this.visible = true;
|
||||
}
|
||||
},
|
||||
handleBlur (e) {
|
||||
if (this.internalFocus){
|
||||
this.internalFocus = false;
|
||||
return;
|
||||
}
|
||||
if (this.visible) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
this.isFocused = false;
|
||||
this.onSelectionModeChange(this.type);
|
||||
this.internalValue = this.internalValue.slice(); // trigger panel watchers to reset views
|
||||
this.reset();
|
||||
this.$refs.pickerPanel.onToggleVisibility(false);
|
||||
|
||||
},
|
||||
handleKeydown(e){
|
||||
const keyCode = e.keyCode;
|
||||
|
||||
// handle "tab" key
|
||||
if (keyCode === 9){
|
||||
if (this.visible){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
if (this.isConfirm){
|
||||
const selector = `.${pickerPrefixCls}-confirm > *`;
|
||||
const tabbable = this.$refs.drop.$el.querySelectorAll(selector);
|
||||
this.internalFocus = true;
|
||||
const element = [...tabbable][e.shiftKey ? 'pop' : 'shift']();
|
||||
element.focus();
|
||||
} else {
|
||||
this.handleClose();
|
||||
}
|
||||
} else {
|
||||
this.focused = false;
|
||||
}
|
||||
}
|
||||
|
||||
// open the panel
|
||||
const arrows = [37, 38, 39, 40];
|
||||
if (!this.visible && arrows.includes(keyCode)){
|
||||
this.visible = true;
|
||||
return;
|
||||
}
|
||||
|
||||
// close on "esc" key
|
||||
if (keyCode === 27){
|
||||
if (this.visible) {
|
||||
e.stopPropagation();
|
||||
this.handleClose();
|
||||
}
|
||||
}
|
||||
|
||||
// select date, "Enter" key
|
||||
if (keyCode === 13){
|
||||
const timePickers = findComponentsDownward(this, 'TimeSpinner');
|
||||
if (timePickers.length > 0){
|
||||
const columnsPerPicker = timePickers[0].showSeconds ? 3 : 2;
|
||||
const pickerIndex = Math.floor(this.focusedTime.column / columnsPerPicker);
|
||||
const value = this.focusedTime.time[pickerIndex];
|
||||
|
||||
timePickers[pickerIndex].chooseValue(value);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.type.match(/range/)){
|
||||
this.$refs.pickerPanel.handleRangePick(this.focusedDate, 'date');
|
||||
} else {
|
||||
const panels = findComponentsDownward(this, 'PanelTable');
|
||||
const compareDate = (d) => {
|
||||
const sliceIndex = ['year', 'month', 'date'].indexOf((this.type)) + 1;
|
||||
return [d.getFullYear(), d.getMonth(), d.getDate()].slice(0, sliceIndex).join('-');
|
||||
};
|
||||
const dateIsValid = panels.find(({cells}) => {
|
||||
return cells.find(({date, disabled}) => compareDate(date) === compareDate(this.focusedDate) && !disabled);
|
||||
});
|
||||
if (dateIsValid) this.onPick(this.focusedDate, false, 'date');
|
||||
}
|
||||
}
|
||||
|
||||
if (!arrows.includes(keyCode)) return; // ignore rest of keys
|
||||
|
||||
// navigate times and dates
|
||||
if (this.focusedTime.active) e.preventDefault(); // to prevent cursor from moving
|
||||
this.navigateDatePanel(keyValueMapper[keyCode], e.shiftKey);
|
||||
},
|
||||
reset(){
|
||||
this.$refs.pickerPanel.reset && this.$refs.pickerPanel.reset();
|
||||
},
|
||||
navigateTimePanel(direction){
|
||||
|
||||
this.focusedTime.active = true;
|
||||
const horizontal = direction.match(/left|right/);
|
||||
const vertical = direction.match(/up|down/);
|
||||
const timePickers = findComponentsDownward(this, 'TimeSpinner');
|
||||
|
||||
const maxNrOfColumns = (timePickers[0].showSeconds ? 3 : 2) * timePickers.length;
|
||||
const column = (currentColumn => {
|
||||
const incremented = currentColumn + (horizontal ? (direction === 'left' ? -1 : 1) : 0);
|
||||
return (incremented + maxNrOfColumns) % maxNrOfColumns;
|
||||
})(this.focusedTime.column);
|
||||
|
||||
const columnsPerPicker = maxNrOfColumns / timePickers.length;
|
||||
const pickerIndex = Math.floor(column / columnsPerPicker);
|
||||
const col = column % columnsPerPicker;
|
||||
|
||||
|
||||
if (horizontal){
|
||||
const time = this.internalValue.map(extractTime);
|
||||
|
||||
this.focusedTime = {
|
||||
...this.focusedTime,
|
||||
column: column,
|
||||
time: time
|
||||
};
|
||||
timePickers.forEach((instance, i) => {
|
||||
if (i === pickerIndex) instance.updateFocusedTime(col, time[pickerIndex]);
|
||||
else instance.updateFocusedTime(-1, instance.focusedTime);
|
||||
});
|
||||
}
|
||||
|
||||
if (vertical){
|
||||
const increment = direction === 'up' ? 1 : -1;
|
||||
const timeParts = ['hours', 'minutes', 'seconds'];
|
||||
|
||||
|
||||
const pickerPossibleValues = timePickers[pickerIndex][`${timeParts[col]}List`];
|
||||
const nextIndex = pickerPossibleValues.findIndex(({text}) => this.focusedTime.time[pickerIndex][col] === text) + increment;
|
||||
const nextValue = pickerPossibleValues[nextIndex % pickerPossibleValues.length].text;
|
||||
const times = this.focusedTime.time.map((time, i) => {
|
||||
if (i !== pickerIndex) return time;
|
||||
time[col] = nextValue;
|
||||
return time;
|
||||
});
|
||||
this.focusedTime = {
|
||||
...this.focusedTime,
|
||||
time: times
|
||||
};
|
||||
|
||||
timePickers.forEach((instance, i) => {
|
||||
if (i === pickerIndex) instance.updateFocusedTime(col, times[i]);
|
||||
else instance.updateFocusedTime(-1, instance.focusedTime);
|
||||
});
|
||||
}
|
||||
},
|
||||
navigateDatePanel(direction, shift){
|
||||
|
||||
const timePickers = findComponentsDownward(this, 'TimeSpinner');
|
||||
if (timePickers.length > 0) {
|
||||
// we are in TimePicker mode
|
||||
this.navigateTimePanel(direction, shift, timePickers);
|
||||
return;
|
||||
}
|
||||
|
||||
if (shift){
|
||||
if (this.type === 'year'){
|
||||
this.focusedDate = new Date(
|
||||
this.focusedDate.getFullYear() + mapPossibleValues(direction, 0, 10),
|
||||
this.focusedDate.getMonth(),
|
||||
this.focusedDate.getDate()
|
||||
);
|
||||
} else {
|
||||
this.focusedDate = new Date(
|
||||
this.focusedDate.getFullYear() + mapPossibleValues(direction, 0, 1),
|
||||
this.focusedDate.getMonth() + mapPossibleValues(direction, 1, 0),
|
||||
this.focusedDate.getDate()
|
||||
);
|
||||
}
|
||||
|
||||
const position = direction.match(/left|down/) ? 'prev' : 'next';
|
||||
const double = direction.match(/up|down/) ? '-double' : '';
|
||||
|
||||
// pulse button
|
||||
const button = this.$refs.drop.$el.querySelector(`.ivu-date-picker-${position}-btn-arrow${double}`);
|
||||
if (button) pulseElement(button);
|
||||
return;
|
||||
}
|
||||
|
||||
const initialDate = this.focusedDate || (this.internalValue && this.internalValue[0]) || new Date();
|
||||
const focusedDate = new Date(initialDate);
|
||||
|
||||
if (this.type.match(/^date/)){
|
||||
const lastOfMonth = getDayCountOfMonth(initialDate.getFullYear(), initialDate.getMonth());
|
||||
const startDay = initialDate.getDate();
|
||||
const nextDay = focusedDate.getDate() + mapPossibleValues(direction, 1, 7);
|
||||
|
||||
if (nextDay < 1) {
|
||||
if (direction.match(/left|right/)) {
|
||||
focusedDate.setMonth(focusedDate.getMonth() + 1);
|
||||
focusedDate.setDate(nextDay);
|
||||
} else {
|
||||
focusedDate.setDate(startDay + Math.floor((lastOfMonth - startDay) / 7) * 7);
|
||||
}
|
||||
} else if (nextDay > lastOfMonth){
|
||||
if (direction.match(/left|right/)) {
|
||||
focusedDate.setMonth(focusedDate.getMonth() - 1);
|
||||
focusedDate.setDate(nextDay);
|
||||
} else {
|
||||
focusedDate.setDate(startDay % 7);
|
||||
}
|
||||
} else {
|
||||
focusedDate.setDate(nextDay);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.type.match(/^month/)) {
|
||||
focusedDate.setMonth(focusedDate.getMonth() + mapPossibleValues(direction, 1, 3));
|
||||
}
|
||||
|
||||
if (this.type.match(/^year/)) {
|
||||
focusedDate.setFullYear(focusedDate.getFullYear() + mapPossibleValues(direction, 1, 3));
|
||||
}
|
||||
|
||||
this.focusedDate = focusedDate;
|
||||
},
|
||||
handleInputChange (event) {
|
||||
const isArrayValue = this.type.includes('range') || this.multiple;
|
||||
const oldValue = this.visualValue;
|
||||
const newValue = event.target.value;
|
||||
const newDate = this.parseDate(newValue);
|
||||
const disabledDateFn =
|
||||
this.options &&
|
||||
typeof this.options.disabledDate === 'function' &&
|
||||
this.options.disabledDate;
|
||||
const valueToTest = isArrayValue ? newDate : newDate[0];
|
||||
const isDisabled = disabledDateFn && disabledDateFn(valueToTest);
|
||||
const isValidDate = newDate.reduce((valid, date) => valid && date instanceof Date, true);
|
||||
|
||||
if (newValue !== oldValue && !isDisabled && isValidDate) {
|
||||
this.emitChange(this.type);
|
||||
this.internalValue = newDate;
|
||||
} else {
|
||||
this.forceInputRerender++;
|
||||
}
|
||||
},
|
||||
handleInputMouseenter () {
|
||||
if (this.readonly || this.disabled) return;
|
||||
if (this.visualValue && this.clearable) {
|
||||
this.showClose = true;
|
||||
}
|
||||
},
|
||||
handleInputMouseleave () {
|
||||
this.showClose = false;
|
||||
},
|
||||
handleIconClick (e) {
|
||||
if (this.showClose) {
|
||||
if (e) e.stopPropagation();
|
||||
this.handleClear();
|
||||
} else if (!this.disabled) {
|
||||
this.handleFocus();
|
||||
}
|
||||
},
|
||||
handleClear () {
|
||||
this.visible = false;
|
||||
this.internalValue = this.internalValue.map(() => null);
|
||||
this.$emit('on-clear');
|
||||
this.dispatch('FormItem', 'on-form-change', '');
|
||||
this.emitChange(this.type);
|
||||
this.reset();
|
||||
|
||||
setTimeout(
|
||||
() => this.onSelectionModeChange(this.type),
|
||||
500 // delay to improve dropdown close visual effect
|
||||
);
|
||||
},
|
||||
emitChange (type) {
|
||||
this.$nextTick(() => {
|
||||
this.$emit('on-change', this.publicStringValue, type);
|
||||
this.dispatch('FormItem', 'on-form-change', this.publicStringValue);
|
||||
});
|
||||
},
|
||||
parseDate(val) {
|
||||
const isRange = this.type.includes('range');
|
||||
const type = this.type;
|
||||
const parser = (
|
||||
TYPE_VALUE_RESOLVER_MAP[type] ||
|
||||
TYPE_VALUE_RESOLVER_MAP['default']
|
||||
).parser;
|
||||
const format = this.format || DEFAULT_FORMATS[type];
|
||||
const multipleParser = TYPE_VALUE_RESOLVER_MAP['multiple'].parser;
|
||||
|
||||
if (val && type === 'time' && !(val instanceof Date)) {
|
||||
val = parser(val, format, this.separator);
|
||||
} else if (this.multiple && val) {
|
||||
val = multipleParser(val, format, this.separator);
|
||||
} else if (isRange) {
|
||||
if (!val){
|
||||
val = [null, null];
|
||||
} else {
|
||||
if (typeof val === 'string') {
|
||||
val = parser(val, format, this.separator);
|
||||
} else if (type === 'timerange') {
|
||||
val = parser(val, format, this.separator).map(v => v || '');
|
||||
} else {
|
||||
const [start, end] = val;
|
||||
if (start instanceof Date && end instanceof Date){
|
||||
val = val.map(date => new Date(date));
|
||||
} else if (typeof start === 'string' && typeof end === 'string'){
|
||||
val = parser(val.join(this.separator), format, this.separator);
|
||||
} else if (!start || !end){
|
||||
val = [null, null];
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (typeof val === 'string' && type.indexOf('time') !== 0){
|
||||
val = parser(val, format) || null;
|
||||
}
|
||||
|
||||
return (isRange || this.multiple) ? (val || []) : [val];
|
||||
},
|
||||
formatDate(value){
|
||||
const format = DEFAULT_FORMATS[this.type];
|
||||
|
||||
if (this.multiple) {
|
||||
const formatter = TYPE_VALUE_RESOLVER_MAP.multiple.formatter;
|
||||
return formatter(value, this.format || format, this.separator);
|
||||
} else {
|
||||
const {formatter} = (
|
||||
TYPE_VALUE_RESOLVER_MAP[this.type] ||
|
||||
TYPE_VALUE_RESOLVER_MAP['default']
|
||||
);
|
||||
return formatter(value, this.format || format, this.separator);
|
||||
}
|
||||
},
|
||||
onPick(dates, visible = false, type) {
|
||||
if (this.multiple){
|
||||
const pickedTimeStamp = dates.getTime();
|
||||
const indexOfPickedDate = this.internalValue.findIndex(date => date && date.getTime() === pickedTimeStamp);
|
||||
const allDates = [...this.internalValue, dates].filter(Boolean);
|
||||
const timeStamps = allDates.map(date => date.getTime()).filter((ts, i, arr) => arr.indexOf(ts) === i && i !== indexOfPickedDate); // filter away duplicates
|
||||
this.internalValue = timeStamps.map(ts => new Date(ts));
|
||||
} else {
|
||||
dates = this.parseDate(dates);
|
||||
this.internalValue = Array.isArray(dates) ? dates : [dates];
|
||||
}
|
||||
|
||||
if (this.internalValue[0]) this.focusedDate = this.internalValue[0];
|
||||
this.focusedTime = {
|
||||
...this.focusedTime,
|
||||
time: this.internalValue.map(extractTime)
|
||||
};
|
||||
|
||||
if (!this.isConfirm) this.onSelectionModeChange(this.type); // reset the selectionMode
|
||||
if (!this.isConfirm) this.visible = visible;
|
||||
this.emitChange(type);
|
||||
},
|
||||
onPickSuccess(){
|
||||
this.visible = false;
|
||||
this.$emit('on-ok');
|
||||
this.focus();
|
||||
this.reset();
|
||||
},
|
||||
focus() {
|
||||
this.$refs.input && this.$refs.input.focus();
|
||||
},
|
||||
updatePopper () {
|
||||
this.$refs.drop.update();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible (state) {
|
||||
if (state === false){
|
||||
this.$refs.drop.destroy();
|
||||
}
|
||||
this.$refs.drop.update();
|
||||
this.$emit('on-open-change', state);
|
||||
},
|
||||
value(val) {
|
||||
this.internalValue = this.parseDate(val);
|
||||
},
|
||||
open (val) {
|
||||
this.visible = val === true;
|
||||
},
|
||||
type(type){
|
||||
this.onSelectionModeChange(type);
|
||||
},
|
||||
publicVModelValue(now, before){
|
||||
const newValue = JSON.stringify(now);
|
||||
const oldValue = JSON.stringify(before);
|
||||
const shouldEmitInput = newValue !== oldValue || typeof now !== typeof before;
|
||||
if (shouldEmitInput) this.$emit('input', now); // to update v-model
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
const initialValue = this.value;
|
||||
const parsedValue = this.publicVModelValue;
|
||||
if (typeof initialValue !== typeof parsedValue || JSON.stringify(initialValue) !== JSON.stringify(parsedValue)){
|
||||
this.$emit('input', this.publicVModelValue); // to update v-model
|
||||
}
|
||||
if (this.open !== null) this.visible = this.open;
|
||||
|
||||
// to handle focus from confirm buttons
|
||||
this.$on('focus-input', () => this.focus());
|
||||
this.$on('update-popper', () => this.updatePopper());
|
||||
}
|
||||
};
|
||||
</script>
|
||||
28
src/components/date-picker/picker/date-picker.js
Normal file
28
src/components/date-picker/picker/date-picker.js
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import Picker from '../picker.vue';
|
||||
import DatePickerPanel from '../panel/Date/date.vue';
|
||||
import RangeDatePickerPanel from '../panel/Date/date-range.vue';
|
||||
|
||||
import { oneOf } from '../../../utils/assist';
|
||||
|
||||
export default {
|
||||
name: 'CalendarPicker',
|
||||
mixins: [Picker],
|
||||
props: {
|
||||
type: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['year', 'month', 'date', 'daterange', 'datetime', 'datetimerange']);
|
||||
},
|
||||
default: 'date'
|
||||
},
|
||||
},
|
||||
components: { DatePickerPanel, RangeDatePickerPanel },
|
||||
computed: {
|
||||
panel(){
|
||||
const isRange = this.type === 'daterange' || this.type === 'datetimerange';
|
||||
return isRange ? 'RangeDatePickerPanel' : 'DatePickerPanel';
|
||||
},
|
||||
ownPickerProps(){
|
||||
return this.options;
|
||||
}
|
||||
},
|
||||
};
|
||||
43
src/components/date-picker/picker/time-picker.js
Normal file
43
src/components/date-picker/picker/time-picker.js
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import Picker from '../picker.vue';
|
||||
import TimePickerPanel from '../panel/Time/time.vue';
|
||||
import RangeTimePickerPanel from '../panel/Time/time-range.vue';
|
||||
import Options from '../time-mixins';
|
||||
|
||||
import { findComponentsDownward, oneOf } from '../../../utils/assist';
|
||||
|
||||
export default {
|
||||
mixins: [Picker, Options],
|
||||
components: { TimePickerPanel, RangeTimePickerPanel },
|
||||
props: {
|
||||
type: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['time', 'timerange']);
|
||||
},
|
||||
default: 'time'
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
panel(){
|
||||
const isRange = this.type === 'timerange';
|
||||
return isRange ? 'RangeTimePickerPanel' : 'TimePickerPanel';
|
||||
},
|
||||
ownPickerProps(){
|
||||
return {
|
||||
disabledHours: this.disabledHours,
|
||||
disabledMinutes: this.disabledMinutes,
|
||||
disabledSeconds: this.disabledSeconds,
|
||||
hideDisabledOptions: this.hideDisabledOptions
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(visible){
|
||||
if (visible) {
|
||||
this.$nextTick(() => {
|
||||
const spinners = findComponentsDownward(this, 'TimeSpinner');
|
||||
spinners.forEach(instance => instance.updateScroll());
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
26
src/components/date-picker/time-mixins.js
Normal file
26
src/components/date-picker/time-mixins.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
export default {
|
||||
props: {
|
||||
disabledHours: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
disabledMinutes: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
disabledSeconds: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
hideDisabledOptions: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
};
|
||||
258
src/components/date-picker/util.js
Normal file
258
src/components/date-picker/util.js
Normal file
|
|
@ -0,0 +1,258 @@
|
|||
import dateUtil from '../../utils/date';
|
||||
|
||||
export const toDate = function(date) {
|
||||
let _date = new Date(date);
|
||||
// IE patch start (#1422)
|
||||
if (isNaN(_date.getTime()) && typeof date === 'string'){
|
||||
_date = date.split('-').map(Number);
|
||||
_date[1] += 1;
|
||||
_date = new Date(..._date);
|
||||
}
|
||||
// IE patch end
|
||||
|
||||
if (isNaN(_date.getTime())) return null;
|
||||
return _date;
|
||||
};
|
||||
|
||||
export const clearHours = function (time) {
|
||||
const cloneDate = new Date(time);
|
||||
cloneDate.setHours(0, 0, 0, 0);
|
||||
return cloneDate.getTime();
|
||||
};
|
||||
|
||||
export const isInRange = (time, a, b) => {
|
||||
if (!a || !b) return false;
|
||||
const [start, end] = [a, b].sort();
|
||||
return time >= start && time <= end;
|
||||
};
|
||||
|
||||
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) {
|
||||
return new Date(year, month + 1, 0).getDate();
|
||||
};
|
||||
|
||||
export const getFirstDayOfMonth = function(date) {
|
||||
const temp = new Date(date.getTime());
|
||||
temp.setDate(1);
|
||||
return temp.getDay();
|
||||
};
|
||||
|
||||
export const siblingMonth = function(src, diff) {
|
||||
const temp = new Date(src); // lets copy it so we don't change the original
|
||||
const newMonth = temp.getMonth() + diff;
|
||||
const newMonthDayCount = getDayCountOfMonth(temp.getFullYear(), newMonth);
|
||||
if (newMonthDayCount < temp.getDate()) {
|
||||
temp.setDate(newMonthDayCount);
|
||||
}
|
||||
temp.setMonth(newMonth);
|
||||
|
||||
return temp;
|
||||
};
|
||||
|
||||
export const prevMonth = function(src) {
|
||||
return siblingMonth(src, -1);
|
||||
};
|
||||
|
||||
export const nextMonth = function(src) {
|
||||
return siblingMonth(src, 1);
|
||||
};
|
||||
|
||||
export const initTimeDate = function() {
|
||||
const date = new Date();
|
||||
date.setHours(0);
|
||||
date.setMinutes(0);
|
||||
date.setSeconds(0);
|
||||
return date;
|
||||
};
|
||||
|
||||
export const formatDateLabels = (function() {
|
||||
/*
|
||||
Formats:
|
||||
yyyy - 4 digit year
|
||||
m - month, numeric, 1 - 12
|
||||
mm - month, numeric, 01 - 12
|
||||
mmm - month, 3 letters, as in `toLocaleDateString`
|
||||
Mmm - month, 3 letters, capitalize the return from `toLocaleDateString`
|
||||
mmmm - month, full name, as in `toLocaleDateString`
|
||||
Mmmm - month, full name, capitalize the return from `toLocaleDateString`
|
||||
*/
|
||||
|
||||
const formats = {
|
||||
yyyy: date => date.getFullYear(),
|
||||
m: date => date.getMonth() + 1,
|
||||
mm: date => ('0' + (date.getMonth() + 1)).slice(-2),
|
||||
mmm: (date, locale) => {
|
||||
const monthName = date.toLocaleDateString(locale, {
|
||||
month: 'long'
|
||||
});
|
||||
return monthName.slice(0, 3);
|
||||
},
|
||||
Mmm: (date, locale) => {
|
||||
const monthName = date.toLocaleDateString(locale, {
|
||||
month: 'long'
|
||||
});
|
||||
return (monthName[0].toUpperCase() + monthName.slice(1).toLowerCase()).slice(0, 3);
|
||||
},
|
||||
mmmm: (date, locale) =>
|
||||
date.toLocaleDateString(locale, {
|
||||
month: 'long'
|
||||
}),
|
||||
Mmmm: (date, locale) => {
|
||||
const monthName = date.toLocaleDateString(locale, {
|
||||
month: 'long'
|
||||
});
|
||||
return monthName[0].toUpperCase() + monthName.slice(1).toLowerCase();
|
||||
}
|
||||
};
|
||||
const formatRegex = new RegExp(['yyyy', 'Mmmm', 'mmmm', 'Mmm', 'mmm', 'mm', 'm'].join('|'), 'g');
|
||||
|
||||
return function(locale, format, date) {
|
||||
const componetsRegex = /(\[[^\]]+\])([^\[\]]+)(\[[^\]]+\])/;
|
||||
const components = format.match(componetsRegex).slice(1);
|
||||
const separator = components[1];
|
||||
const labels = [components[0], components[2]].map(component => {
|
||||
const label = component.replace(/\[[^\]]+\]/, str => {
|
||||
return str.slice(1, -1).replace(formatRegex, match => formats[match](date, locale));
|
||||
});
|
||||
return {
|
||||
label: label,
|
||||
type: component.indexOf('yy') != -1 ? 'year' : 'month'
|
||||
};
|
||||
});
|
||||
return {
|
||||
separator: separator,
|
||||
labels: labels
|
||||
};
|
||||
};
|
||||
})();
|
||||
|
||||
// Parsers and Formaters
|
||||
export 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'
|
||||
};
|
||||
|
||||
// export const RANGE_SEPARATOR = ' - '; // use picker.vue prop 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, RANGE_SEPARATOR) {
|
||||
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);
|
||||
}
|
||||
} else if (!Array.isArray(value) && value instanceof Date){
|
||||
return formatDate(value, format);
|
||||
}
|
||||
return '';
|
||||
};
|
||||
const RANGE_PARSER = function(text, format, RANGE_SEPARATOR) {
|
||||
const array = Array.isArray(text) ? text : text.split(RANGE_SEPARATOR);
|
||||
if (array.length === 2) {
|
||||
const range1 = array[0];
|
||||
const range2 = array[1];
|
||||
|
||||
return [
|
||||
range1 instanceof Date ? range1 : parseDate(range1, format),
|
||||
range2 instanceof Date ? range2 : parseDate(range2, format),
|
||||
];
|
||||
}
|
||||
return [];
|
||||
};
|
||||
|
||||
export 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
|
||||
},
|
||||
multiple: {
|
||||
formatter: (value, format) => {
|
||||
return value.filter(Boolean).map(date => formatDate(date, format)).join(',');
|
||||
},
|
||||
parser: (value, format) => {
|
||||
const values = typeof value === 'string' ? value.split(',') : value;
|
||||
return values.map(value => {
|
||||
if (value instanceof Date) return value;
|
||||
if (typeof value === 'string') value = value.trim();
|
||||
else if (typeof value !== 'number' && !value) value = '';
|
||||
return parseDate(value, format);
|
||||
});
|
||||
}
|
||||
},
|
||||
number: {
|
||||
formatter(value) {
|
||||
if (!value) return '';
|
||||
return '' + value;
|
||||
},
|
||||
parser(text) {
|
||||
let result = Number(text);
|
||||
|
||||
if (!isNaN(text)) {
|
||||
return result;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue