refactor Datepicker
refactor Datepicker to render subcomponents in template instead of creating new Vue instances
This commit is contained in:
Sergio Crisostomo
parent
0b51803bce
commit
95eae081bc
7 changed files with 332 additions and 439 deletions
|
|
@ -1,88 +1,40 @@
|
|||
<template>
|
||||
<div
|
||||
:class="classes"
|
||||
@mousemove="handleMouseMove">
|
||||
<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, index) in readCells"><em :index="index" @click="handleClick(cell)">{{ cell.text }}</em></span>
|
||||
<span
|
||||
:class="getCellCls(cell)"
|
||||
v-for="cell in readCells"
|
||||
@click="handleClick(cell)"
|
||||
@mouseenter="handleMouseMove(cell)"
|
||||
>
|
||||
<em>{{ cell.text }}</em>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getFirstDayOfMonth, getDayCountOfMonth } from '../util';
|
||||
import { getFirstDayOfMonth, getDayCountOfMonth, clearHours, isInRange } from '../util';
|
||||
import { deepCopy } from '../../../utils/assist';
|
||||
import Locale from '../../../mixins/locale';
|
||||
|
||||
const prefixCls = 'ivu-date-picker-cells';
|
||||
import mixin from './mixin';
|
||||
import prefixCls from './prefixCls';
|
||||
|
||||
const clearHours = function (time) {
|
||||
const cloneDate = new Date(time);
|
||||
cloneDate.setHours(0, 0, 0, 0);
|
||||
return cloneDate.getTime();
|
||||
};
|
||||
|
||||
export default {
|
||||
mixins: [ Locale ],
|
||||
mixins: [ Locale, mixin ],
|
||||
|
||||
props: {
|
||||
date: {},
|
||||
year: {},
|
||||
month: {},
|
||||
selectionMode: {
|
||||
default: 'day'
|
||||
},
|
||||
disabledDate: {},
|
||||
minDate: {},
|
||||
maxDate: {},
|
||||
rangeState: {
|
||||
default () {
|
||||
return {
|
||||
endDate: null,
|
||||
selecting: false
|
||||
};
|
||||
}
|
||||
},
|
||||
value: ''
|
||||
/* more props in mixin */
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
readCells: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'rangeState.endDate' (newVal) {
|
||||
this.markRange(newVal);
|
||||
},
|
||||
minDate(newVal, oldVal) {
|
||||
if (newVal && !oldVal) {
|
||||
this.rangeState.selecting = true;
|
||||
this.markRange(newVal);
|
||||
} else if (!newVal) {
|
||||
this.rangeState.selecting = false;
|
||||
this.markRange(newVal);
|
||||
} else {
|
||||
this.markRange();
|
||||
}
|
||||
},
|
||||
maxDate(newVal, oldVal) {
|
||||
if (newVal && !oldVal) {
|
||||
this.rangeState.selecting = false;
|
||||
this.markRange(newVal);
|
||||
// this.$emit('on-pick', {
|
||||
// minDate: this.minDate,
|
||||
// maxDate: this.maxDate
|
||||
// });
|
||||
}
|
||||
},
|
||||
cells: {
|
||||
handler (cells) {
|
||||
this.readCells = cells;
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
|
|
@ -97,14 +49,17 @@
|
|||
const weekDays = translatedDays.splice(weekStartDay, 7 - weekStartDay).concat(translatedDays.splice(0, weekStartDay));
|
||||
return weekDays;
|
||||
},
|
||||
cells () {
|
||||
const date = new Date(this.year, this.month, 1);
|
||||
readCells () {
|
||||
const tableYear = this.tableDate.getFullYear();
|
||||
const tableMonth = this.tableDate.getMonth();
|
||||
const date = new Date(tableYear, tableMonth, 1);
|
||||
const weekStartDay = Number(this.t('i.datepicker.weekStartDay'));
|
||||
const day = (getFirstDayOfMonth(date) || 7) - weekStartDay; // day of first day
|
||||
const today = clearHours(new Date()); // timestamp of today
|
||||
const selectDay = clearHours(new Date(this.value)); // timestamp of selected day
|
||||
const minDay = clearHours(new Date(this.minDate));
|
||||
const maxDay = clearHours(new Date(this.maxDate));
|
||||
const 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 dateCountOfMonth = getDayCountOfMonth(date.getFullYear(), date.getMonth());
|
||||
const dateCountOfLastMonth = getDayCountOfMonth(date.getFullYear(), (date.getMonth() === 0 ? 11 : date.getMonth() - 1));
|
||||
|
|
@ -127,7 +82,7 @@
|
|||
const cell = deepCopy(cell_tmpl);
|
||||
cell.type = 'prev-month';
|
||||
cell.text = dateCountOfLastMonth - (day - 1) + i;
|
||||
cell.date = new Date(this.year, this.month - 1, cell.text);
|
||||
cell.date = new Date(tableYear, tableMonth - 1, cell.text);
|
||||
const time = clearHours(cell.date);
|
||||
cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
|
||||
cells.push(cell);
|
||||
|
|
@ -137,15 +92,16 @@
|
|||
for (let i = 1; i <= dateCountOfMonth; i++) {
|
||||
const cell = deepCopy(cell_tmpl);
|
||||
cell.text = i;
|
||||
cell.date = new Date(this.year, this.month, cell.text);
|
||||
cell.date = new Date(tableYear, tableMonth, cell.text);
|
||||
const time = clearHours(cell.date);
|
||||
cell.type = time === today ? 'today' : 'normal';
|
||||
cell.selected = time === selectDay;
|
||||
cell.selected = selectedDays.includes(time);
|
||||
cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
|
||||
cell.range = time >= minDay && time <= maxDay;
|
||||
cell.start = this.minDate && time === minDay;
|
||||
cell.end = this.maxDate && time === maxDay;
|
||||
|
||||
if (this.selectionMode === 'range'){
|
||||
cell.range = isInRange(time, rangeStart, rangeEnd);
|
||||
cell.start = time === minDay;
|
||||
cell.end = time === maxDay;
|
||||
}
|
||||
cells.push(cell);
|
||||
}
|
||||
|
||||
|
|
@ -154,7 +110,7 @@
|
|||
const cell = deepCopy(cell_tmpl);
|
||||
cell.type = 'next-month';
|
||||
cell.text = i;
|
||||
cell.date = new Date(this.year, this.month + 1, cell.text);
|
||||
cell.date = new Date(tableYear, tableMonth + 1, cell.text);
|
||||
const time = clearHours(cell.date);
|
||||
cell.disabled = typeof disabledDate === 'function' && disabledDate(new Date(time));
|
||||
cells.push(cell);
|
||||
|
|
@ -164,74 +120,6 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick (cell) {
|
||||
|
||||
if (cell.disabled) return;
|
||||
const newDate = cell.date;
|
||||
|
||||
if (this.selectionMode === 'range') {
|
||||
if (this.minDate && this.maxDate) {
|
||||
const minDate = new Date(newDate.getTime());
|
||||
const maxDate = null;
|
||||
this.rangeState.selecting = true;
|
||||
this.markRange(this.minDate);
|
||||
|
||||
this.$emit('on-pick', {minDate, maxDate}, false);
|
||||
} else if (this.minDate && !this.maxDate) {
|
||||
if (newDate >= this.minDate) {
|
||||
const maxDate = new Date(newDate.getTime());
|
||||
this.rangeState.selecting = false;
|
||||
|
||||
this.$emit('on-pick', {minDate: this.minDate, maxDate});
|
||||
} else {
|
||||
const minDate = new Date(newDate.getTime());
|
||||
|
||||
this.$emit('on-pick', {minDate, maxDate: this.maxDate}, false);
|
||||
}
|
||||
} else if (!this.minDate) {
|
||||
const minDate = new Date(newDate.getTime());
|
||||
this.rangeState.selecting = true;
|
||||
this.markRange(this.minDate);
|
||||
|
||||
this.$emit('on-pick', {minDate, maxDate: this.maxDate}, false);
|
||||
}
|
||||
} else {
|
||||
this.$emit('on-pick', newDate);
|
||||
}
|
||||
this.$emit('on-pick-click');
|
||||
},
|
||||
handleMouseMove (event) {
|
||||
if (!this.rangeState.selecting) return;
|
||||
|
||||
this.$emit('on-changerange', {
|
||||
minDate: this.minDate,
|
||||
maxDate: this.maxDate,
|
||||
rangeState: this.rangeState
|
||||
});
|
||||
|
||||
const target = event.target;
|
||||
if (target.tagName === 'EM') {
|
||||
const cell = this.cells[parseInt(event.target.getAttribute('index'))];
|
||||
// if (cell.disabled) return; // todo 待确定
|
||||
this.rangeState.endDate = cell.date;
|
||||
}
|
||||
},
|
||||
markRange (maxDate) {
|
||||
const minDate = this.minDate;
|
||||
if (!maxDate) maxDate = this.maxDate;
|
||||
|
||||
const minDay = clearHours(new Date(minDate));
|
||||
const maxDay = clearHours(new Date(maxDate));
|
||||
|
||||
this.cells.forEach(cell => {
|
||||
if (cell.type === 'today' || cell.type === 'normal') {
|
||||
const time = clearHours(new Date(this.year, this.month, cell.text));
|
||||
cell.range = time >= minDay && time <= maxDay;
|
||||
cell.start = minDate && time === minDay;
|
||||
cell.end = maxDate && time === maxDay;
|
||||
}
|
||||
});
|
||||
},
|
||||
getCellCls (cell) {
|
||||
return [
|
||||
`${prefixCls}-cell`,
|
||||
|
|
|
|||
51
src/components/date-picker/base/mixin.js
Normal file
51
src/components/date-picker/base/mixin.js
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
|
||||
export default {
|
||||
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
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
computed: {
|
||||
dates(){
|
||||
const {selectionMode, value, rangeState} = this;
|
||||
const rangeSelecting = selectionMode === 'range' && rangeState.selecting;
|
||||
return rangeSelecting ? [rangeState.from] : value;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleClick (cell) {
|
||||
if (cell.disabled) return;
|
||||
const newDate = 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, isInRange } 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 rangeStart = this.rangeState.from && clearHours(new Date(this.rangeState.from.getFullYear(), this.rangeState.from.getMonth(), 1));
|
||||
const rangeEnd = this.rangeState.to && clearHours(new Date(this.rangeState.to.getFullYear(), this.rangeState.to.getMonth(), 1));
|
||||
const selectedDays = this.dates.filter(Boolean).map(date => clearHours(new Date(date.getFullYear(), date.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 time = clearHours(cell.date);
|
||||
cell.range = isInRange(time, rangeStart, rangeEnd);
|
||||
cell.disabled = typeof this.disabledDate === 'function' && this.disabledDate(cell.date) && this.selectionMode === 'month';
|
||||
cell.selected = selectedDays.includes(time);
|
||||
cells.push(cell);
|
||||
}
|
||||
|
||||
return cells;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCellCls (cell) {
|
||||
return [
|
||||
`${prefixCls}-cell`,
|
||||
{
|
||||
[`${prefixCls}-cell-selected`]: cell.selected,
|
||||
[`${prefixCls}-cell-disabled`]: cell.disabled,
|
||||
[`${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';
|
||||
|
|
@ -29,12 +29,33 @@
|
|||
ref="drop"
|
||||
:data-transfer="transfer"
|
||||
v-transfer-dom>
|
||||
<div ref="picker"></div>
|
||||
<div>
|
||||
<component
|
||||
:is="panel"
|
||||
:visible="visible"
|
||||
:showTime="type === 'datetime' || type === 'datetimerange'"
|
||||
:confirm="isConfirm"
|
||||
:selectionMode="selectionMode"
|
||||
:steps="steps"
|
||||
:format="format"
|
||||
:value="internalValue"
|
||||
|
||||
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 clickoutside from '../../directives/clickoutside';
|
||||
|
|
@ -179,6 +200,10 @@
|
|||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
size: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['small', 'large', 'default']);
|
||||
|
|
@ -206,21 +231,44 @@
|
|||
},
|
||||
elementId: {
|
||||
type: String
|
||||
},
|
||||
steps: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
value: {
|
||||
type: [Date, String, Array],
|
||||
validator(val){
|
||||
if (Array.isArray(val)){
|
||||
const [start, end] = val.map(v => new Date(v));
|
||||
return !isNaN(start.getTime()) && !isNaN(end.getTime());
|
||||
} else {
|
||||
if (typeof val === 'string') val = val.trim();
|
||||
const date = new Date(val);
|
||||
return val === '' || val === null || !isNaN(date.getTime());
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
data(){
|
||||
const initialValue = this.formatDate(this.value);
|
||||
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
showClose: false,
|
||||
visible: false,
|
||||
picker: null,
|
||||
internalValue: '',
|
||||
internalValue: initialValue,
|
||||
disableClickOutSide: false, // fixed when click a date,trigger clickoutside to close picker
|
||||
disableCloseUnderTransfer: false, // transfer 模式下，点击Drop也会触发关闭
|
||||
currentValue: this.value
|
||||
disableCloseUnderTransfer: false, // transfer 模式下，点击Drop也会触发关闭,
|
||||
selectionMode: this.onSelectionModeChange(this.type)
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
publicValue(){
|
||||
const isRange = this.type.includes('range');
|
||||
return isRange ? this.formatDate(this.internalValue) : this.formatDate(this.internalValue[0]);
|
||||
},
|
||||
|
||||
opened () {
|
||||
return this.open === null ? this.visible : this.open;
|
||||
},
|
||||
|
|
@ -231,52 +279,31 @@
|
|||
return icon;
|
||||
},
|
||||
transition () {
|
||||
if (this.placement === 'bottom-start' || this.placement === 'bottom' || this.placement === 'bottom-end') {
|
||||
return 'slide-up';
|
||||
} else {
|
||||
return 'slide-down';
|
||||
}
|
||||
const bottomPlaced = this.placement.match(/^bottom/);
|
||||
return bottomPlaced ? 'slide-up' : 'slide-down';
|
||||
},
|
||||
selectionMode() {
|
||||
if (this.type === 'month') {
|
||||
return 'month';
|
||||
} else if (this.type === 'year') {
|
||||
return 'year';
|
||||
}
|
||||
visualValue() {
|
||||
const value = this.internalValue;
|
||||
|
||||
return 'day';
|
||||
if (!value) return;
|
||||
const formatter = (
|
||||
TYPE_VALUE_RESOLVER_MAP[this.type] ||
|
||||
TYPE_VALUE_RESOLVER_MAP['default']
|
||||
).formatter;
|
||||
const format = DEFAULT_FORMATS[this.type];
|
||||
return formatter(value, this.format || format);
|
||||
},
|
||||
visualValue: {
|
||||
get () {
|
||||
const value = this.internalValue;
|
||||
if (!value) return;
|
||||
const formatter = (
|
||||
TYPE_VALUE_RESOLVER_MAP[this.type] ||
|
||||
TYPE_VALUE_RESOLVER_MAP['default']
|
||||
).formatter;
|
||||
const format = DEFAULT_FORMATS[this.type];
|
||||
|
||||
return formatter(value, this.format || format);
|
||||
},
|
||||
|
||||
set (value) {
|
||||
if (value) {
|
||||
const type = this.type;
|
||||
const parser = (
|
||||
TYPE_VALUE_RESOLVER_MAP[type] ||
|
||||
TYPE_VALUE_RESOLVER_MAP['default']
|
||||
).parser;
|
||||
const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]);
|
||||
if (parsedValue) {
|
||||
if (this.picker) this.picker.value = parsedValue;
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (this.picker) this.picker.value = value;
|
||||
}
|
||||
isConfirm(){
|
||||
return this.confirm || this.type === 'datetime' || this.type === 'datetimerange';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSelectionModeChange(type){
|
||||
|
||||
if (type.match(/^date/)) type = 'date';
|
||||
this.selectionMode = type;
|
||||
return type;
|
||||
},
|
||||
// 开启 transfer 时，点击 Drop 即会关闭，这里不让其关闭
|
||||
handleTransferClick () {
|
||||
if (this.transfer) this.disableCloseUnderTransfer = true;
|
||||
|
|
@ -287,7 +314,7 @@
|
|||
return false;
|
||||
}
|
||||
if (this.open !== null) return;
|
||||
// if (!this.disableClickOutSide) this.visible = false;
|
||||
|
||||
this.visible = false;
|
||||
this.disableClickOutSide = false;
|
||||
},
|
||||
|
|
@ -300,87 +327,12 @@
|
|||
},
|
||||
handleInputChange (event) {
|
||||
const oldValue = this.visualValue;
|
||||
const value = event.target.value;
|
||||
const newValue = event.target.value;
|
||||
|
||||
let correctValue = '';
|
||||
let correctDate = '';
|
||||
const type = this.type;
|
||||
const format = this.format || DEFAULT_FORMATS[type];
|
||||
|
||||
if (type === 'daterange' || type === 'timerange' || type === 'datetimerange') {
|
||||
const parser = (
|
||||
TYPE_VALUE_RESOLVER_MAP[type] ||
|
||||
TYPE_VALUE_RESOLVER_MAP['default']
|
||||
).parser;
|
||||
|
||||
const formatter = (
|
||||
TYPE_VALUE_RESOLVER_MAP[type] ||
|
||||
TYPE_VALUE_RESOLVER_MAP['default']
|
||||
).formatter;
|
||||
|
||||
const parsedValue = parser(value, format);
|
||||
|
||||
if (parsedValue[0] instanceof Date && parsedValue[1] instanceof Date) {
|
||||
if (parsedValue[0].getTime() > parsedValue[1].getTime()) {
|
||||
correctValue = oldValue;
|
||||
} else {
|
||||
correctValue = formatter(parsedValue, format);
|
||||
}
|
||||
// todo 判断disabledDate
|
||||
} else {
|
||||
correctValue = oldValue;
|
||||
}
|
||||
|
||||
correctDate = parser(correctValue, format);
|
||||
} else if (type === 'time') {
|
||||
const parsedDate = parseDate(value, format);
|
||||
|
||||
if (parsedDate instanceof Date) {
|
||||
if (this.disabledHours.length || this.disabledMinutes.length || this.disabledSeconds.length) {
|
||||
const hours = parsedDate.getHours();
|
||||
const minutes = parsedDate.getMinutes();
|
||||
const seconds = parsedDate.getSeconds();
|
||||
|
||||
if ((this.disabledHours.length && this.disabledHours.indexOf(hours) > -1) ||
|
||||
(this.disabledMinutes.length && this.disabledMinutes.indexOf(minutes) > -1) ||
|
||||
(this.disabledSeconds.length && this.disabledSeconds.indexOf(seconds) > -1)) {
|
||||
correctValue = oldValue;
|
||||
} else {
|
||||
correctValue = formatDate(parsedDate, format);
|
||||
}
|
||||
} else {
|
||||
correctValue = formatDate(parsedDate, format);
|
||||
}
|
||||
} else {
|
||||
correctValue = oldValue;
|
||||
}
|
||||
|
||||
correctDate = parseDate(correctValue, format);
|
||||
} else {
|
||||
const parsedDate = parseDate(value, format);
|
||||
|
||||
if (parsedDate instanceof Date) {
|
||||
const options = this.options || false;
|
||||
if (options && options.disabledDate && typeof options.disabledDate === 'function' && options.disabledDate(new Date(parsedDate))) {
|
||||
correctValue = oldValue;
|
||||
} else {
|
||||
correctValue = formatDate(parsedDate, format);
|
||||
}
|
||||
} else if (!parsedDate) {
|
||||
correctValue = '';
|
||||
} else {
|
||||
correctValue = oldValue;
|
||||
}
|
||||
|
||||
correctDate = parseDate(correctValue, format);
|
||||
if (newValue !== oldValue) {
|
||||
this.emitChange();
|
||||
this.internalValue = this.formatDate(newValue);
|
||||
}
|
||||
|
||||
this.visualValue = correctValue;
|
||||
event.target.value = correctValue;
|
||||
this.internalValue = correctDate;
|
||||
this.currentValue = correctDate;
|
||||
|
||||
if (correctValue !== oldValue) this.emitChange(correctDate);
|
||||
},
|
||||
handleInputMouseenter () {
|
||||
if (this.readonly || this.disabled) return;
|
||||
|
|
@ -400,146 +352,96 @@
|
|||
},
|
||||
handleClear () {
|
||||
this.visible = false;
|
||||
this.internalValue = '';
|
||||
this.currentValue = '';
|
||||
this.internalValue = this.internalValue.map(() => null);
|
||||
this.$emit('on-clear');
|
||||
this.dispatch('FormItem', 'on-form-change', '');
|
||||
// #2215，当初始设置了 value，直接点 clear，这时 this.picker 还没有加载
|
||||
if (!this.picker) {
|
||||
this.emitChange('');
|
||||
}
|
||||
this.emitChange();
|
||||
|
||||
setTimeout(
|
||||
() => this.onSelectionModeChange(this.type),
|
||||
500 // delay to improve dropdown close visual effect
|
||||
);
|
||||
},
|
||||
showPicker () {
|
||||
if (!this.picker) {
|
||||
let isConfirm = this.confirm;
|
||||
const type = this.type;
|
||||
|
||||
this.picker = this.Panel.$mount(this.$refs.picker);
|
||||
if (type === 'datetime' || type === 'datetimerange') {
|
||||
isConfirm = true;
|
||||
this.picker.showTime = true;
|
||||
}
|
||||
this.picker.value = this.internalValue;
|
||||
this.picker.confirm = isConfirm;
|
||||
this.picker.selectionMode = this.selectionMode;
|
||||
if (this.format) this.picker.format = this.format;
|
||||
|
||||
// TimePicker
|
||||
if (this.disabledHours) this.picker.disabledHours = this.disabledHours;
|
||||
if (this.disabledMinutes) this.picker.disabledMinutes = this.disabledMinutes;
|
||||
if (this.disabledSeconds) this.picker.disabledSeconds = this.disabledSeconds;
|
||||
if (this.hideDisabledOptions) this.picker.hideDisabledOptions = this.hideDisabledOptions;
|
||||
|
||||
const options = this.options;
|
||||
for (const option in options) {
|
||||
this.picker[option] = options[option];
|
||||
}
|
||||
|
||||
this.picker.$on('on-pick', (date, visible = false) => {
|
||||
if (!isConfirm) this.visible = visible;
|
||||
this.currentValue = date;
|
||||
this.picker.value = date;
|
||||
this.picker.resetView && this.picker.resetView();
|
||||
this.emitChange(date);
|
||||
});
|
||||
|
||||
this.picker.$on('on-pick-clear', () => {
|
||||
this.handleClear();
|
||||
});
|
||||
this.picker.$on('on-pick-success', () => {
|
||||
this.visible = false;
|
||||
this.$emit('on-ok');
|
||||
});
|
||||
this.picker.$on('on-pick-click', () => this.disableClickOutSide = true);
|
||||
}
|
||||
if (this.internalValue instanceof Date) {
|
||||
this.picker.date = new Date(this.internalValue.getTime());
|
||||
} else {
|
||||
this.picker.value = this.internalValue;
|
||||
}
|
||||
this.picker.resetView && this.picker.resetView();
|
||||
},
|
||||
emitChange (date) {
|
||||
const newDate = this.formattingDate(date);
|
||||
|
||||
this.$emit('on-change', newDate);
|
||||
emitChange () {
|
||||
this.$emit('on-change', this.publicValue);
|
||||
this.$nextTick(() => {
|
||||
this.dispatch('FormItem', 'on-form-change', newDate);
|
||||
this.dispatch('FormItem', 'on-form-change', this.publicValue);
|
||||
});
|
||||
},
|
||||
formattingDate (date) {
|
||||
formatDate (val) {
|
||||
const isRange = this.type.includes('range');
|
||||
|
||||
const type = this.type;
|
||||
const format = this.format || DEFAULT_FORMATS[type];
|
||||
const formatter = (
|
||||
const parser = (
|
||||
TYPE_VALUE_RESOLVER_MAP[type] ||
|
||||
TYPE_VALUE_RESOLVER_MAP['default']
|
||||
).formatter;
|
||||
).parser;
|
||||
|
||||
let newDate = formatter(date, format);
|
||||
if (type === 'daterange' || type === 'timerange' || type === 'datetimerange') {
|
||||
newDate = [newDate.split(RANGE_SEPARATOR)[0], newDate.split(RANGE_SEPARATOR)[1]];
|
||||
if (val && type === 'time' && !(val instanceof Date)) {
|
||||
val = parser(val, this.format || DEFAULT_FORMATS[type]);
|
||||
} else if (type.match(/range$/)) {
|
||||
if (!val){
|
||||
val = [null, null];
|
||||
} else {
|
||||
val = val.map(date => new Date(date)); // try to parse
|
||||
val = val.map(date => isNaN(date.getTime()) ? null : date); // check if parse passed
|
||||
}
|
||||
} else if (typeof val === 'string' && type.indexOf('time') !== 0 ){
|
||||
val = parser(val, this.format || DEFAULT_FORMATS[type]) || val;
|
||||
}
|
||||
return newDate;
|
||||
return isRange ? val : [val];
|
||||
},
|
||||
onPick(dates, visible = false) {
|
||||
|
||||
if (this.type === 'multiple'){
|
||||
this.internalValue = [...this.internalValue, dates]; // TODO: filter multiple date duplicates
|
||||
} else {
|
||||
this.internalValue = Array.isArray(dates) ? dates : [dates];
|
||||
}
|
||||
|
||||
if (!this.isConfirm) this.onSelectionModeChange(this.type); // reset the selectionMode
|
||||
if (!this.isConfirm) this.visible = visible;
|
||||
this.emitChange();
|
||||
},
|
||||
onPickSuccess(){
|
||||
this.visible = false;
|
||||
this.$emit('on-ok');
|
||||
}
|
||||
|
||||
},
|
||||
watch: {
|
||||
visible (val) {
|
||||
if (val) {
|
||||
this.showPicker();
|
||||
this.$refs.drop.update();
|
||||
if (this.open === null) this.$emit('on-open-change', true);
|
||||
} else {
|
||||
if (this.picker) this.picker.resetView && this.picker.resetView(true);
|
||||
visible (state) {
|
||||
if (state === false){
|
||||
this.$refs.drop.destroy();
|
||||
if (this.open === null) this.$emit('on-open-change', false);
|
||||
// blur the input
|
||||
const input = this.$el.querySelector('input');
|
||||
if (input) input.blur();
|
||||
}
|
||||
this.$emit('on-open-change', state);
|
||||
},
|
||||
internalValue(val) {
|
||||
if (!val && this.picker && typeof this.picker.handleClear === 'function') {
|
||||
this.picker.handleClear();
|
||||
}
|
||||
// this.$emit('input', val);
|
||||
},
|
||||
value (val) {
|
||||
this.currentValue = val;
|
||||
},
|
||||
currentValue: {
|
||||
immediate: true,
|
||||
handler (val) {
|
||||
const type = this.type;
|
||||
const parser = (
|
||||
TYPE_VALUE_RESOLVER_MAP[type] ||
|
||||
TYPE_VALUE_RESOLVER_MAP['default']
|
||||
).parser;
|
||||
value(val) {
|
||||
const type = this.type;
|
||||
const parser = (
|
||||
TYPE_VALUE_RESOLVER_MAP[type] ||
|
||||
TYPE_VALUE_RESOLVER_MAP['default']
|
||||
).parser;
|
||||
|
||||
if (val && type === 'time' && !(val instanceof Date)) {
|
||||
val = parser(val, this.format || DEFAULT_FORMATS[type]);
|
||||
} else if (val && type.match(/range$/) && Array.isArray(val) && val.filter(Boolean).length === 2 && !(val[0] instanceof Date) && !(val[1] instanceof Date)) {
|
||||
val = val.join(RANGE_SEPARATOR);
|
||||
val = parser(val, this.format || DEFAULT_FORMATS[type]);
|
||||
} else if (typeof val === 'string' && type.indexOf('time') !== 0 ){
|
||||
val = parser(val, this.format || DEFAULT_FORMATS[type]) || val;
|
||||
}
|
||||
|
||||
this.internalValue = val;
|
||||
this.$emit('input', val);
|
||||
if (val && type === 'time' && !(val instanceof Date)) {
|
||||
val = parser(val, this.format || DEFAULT_FORMATS[type]);
|
||||
} else if (val && type.match(/range$/) && Array.isArray(val) && val.filter(Boolean).length === 2 && !(val[0] instanceof Date) && !(val[1] instanceof Date)) {
|
||||
val = val.join(RANGE_SEPARATOR);
|
||||
val = parser(val, this.format || DEFAULT_FORMATS[type]);
|
||||
} else if (typeof val === 'string' && type.indexOf('time') !== 0 ){
|
||||
val = parser(val, this.format || DEFAULT_FORMATS[type]) || val;
|
||||
}
|
||||
|
||||
this.internalValue = val;
|
||||
this.$emit('input', val);
|
||||
},
|
||||
open (val) {
|
||||
if (val === true) {
|
||||
this.visible = val;
|
||||
this.$emit('on-open-change', true);
|
||||
} else if (val === false) {
|
||||
this.$emit('on-open-change', false);
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.picker) {
|
||||
this.picker.$destroy();
|
||||
this.visible = val === true;
|
||||
},
|
||||
type(type){
|
||||
this.onSelectionModeChange(type);
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,6 @@
|
|||
import Vue from 'vue';
|
||||
import Picker from '../picker.vue';
|
||||
import DatePanel from '../panel/date.vue';
|
||||
import DateRangePanel from '../panel/date-range.vue';
|
||||
|
||||
const getPanel = function (type) {
|
||||
if (type === 'daterange' || type === 'datetimerange') {
|
||||
return DateRangePanel;
|
||||
}
|
||||
return DatePanel;
|
||||
};
|
||||
import DatePickerPanel from '../panel/Date/date.vue';
|
||||
import RangeDatePickerPanel from '../panel/Date/date-range.vue';
|
||||
|
||||
import { oneOf } from '../../../utils/assist';
|
||||
|
||||
|
|
@ -21,19 +13,18 @@ export default {
|
|||
},
|
||||
default: 'date'
|
||||
},
|
||||
value: {}
|
||||
},
|
||||
watch: {
|
||||
type(value){
|
||||
const typeMap = {
|
||||
year: 'year',
|
||||
month: 'month',
|
||||
date: 'day'
|
||||
};
|
||||
const validType = oneOf(value, Object.keys(typeMap));
|
||||
if (validType) this.Panel.selectionMode = typeMap[value];
|
||||
components: { DatePickerPanel, RangeDatePickerPanel },
|
||||
computed: {
|
||||
panel(){
|
||||
const isRange = this.type === 'daterange' || this.type === 'datetimerange';
|
||||
return isRange ? 'RangeDatePickerPanel' : 'DatePickerPanel';
|
||||
},
|
||||
ownPickerProps(){
|
||||
return {};
|
||||
}
|
||||
},
|
||||
/*
|
||||
created () {
|
||||
if (!this.currentValue) {
|
||||
if (this.type === 'daterange' || this.type === 'datetimerange') {
|
||||
|
|
@ -42,8 +33,6 @@ export default {
|
|||
this.currentValue = '';
|
||||
}
|
||||
}
|
||||
|
||||
const panel = getPanel(this.type);
|
||||
this.Panel = new Vue(panel);
|
||||
}
|
||||
*/
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,20 +1,13 @@
|
|||
import Vue from 'vue';
|
||||
import Picker from '../picker.vue';
|
||||
import TimePanel from '../panel/time.vue';
|
||||
import TimeRangePanel from '../panel/time-range.vue';
|
||||
import TimePickerPanel from '../panel/Time/time.vue';
|
||||
import RangeTimePickerPanel from '../panel/Time/time-range.vue';
|
||||
import Options from '../time-mixins';
|
||||
|
||||
const getPanel = function (type) {
|
||||
if (type === 'timerange') {
|
||||
return TimeRangePanel;
|
||||
}
|
||||
return TimePanel;
|
||||
};
|
||||
|
||||
import { oneOf } from '../../../utils/assist';
|
||||
|
||||
export default {
|
||||
mixins: [Picker, Options],
|
||||
components: { TimePickerPanel, RangeTimePickerPanel },
|
||||
props: {
|
||||
type: {
|
||||
validator (value) {
|
||||
|
|
@ -22,25 +15,19 @@ export default {
|
|||
},
|
||||
default: 'time'
|
||||
},
|
||||
steps: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
value: {}
|
||||
},
|
||||
created () {
|
||||
if (!this.currentValue) {
|
||||
if (this.type === 'timerange') {
|
||||
this.currentValue = ['',''];
|
||||
} else {
|
||||
this.currentValue = '';
|
||||
}
|
||||
computed: {
|
||||
panel(){
|
||||
const isRange = this.type === 'timerange';
|
||||
return isRange ? 'RangeTimePickerPanel' : 'TimePickerPanel';
|
||||
},
|
||||
ownPickerProps(){
|
||||
return {
|
||||
...this.disabledHours,
|
||||
...this.disabledMinutes,
|
||||
...this.disabledSeconds,
|
||||
...this.hideDisabledOptions,
|
||||
};
|
||||
}
|
||||
const Panel = Vue.extend(getPanel(this.type));
|
||||
this.Panel = new Panel({
|
||||
propsData: {
|
||||
steps: this.steps
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue