move date-range.vue to subfolder
This commit is contained in:
Sergio Crisostomo
parent
e32b86e97f
commit
c4e3fe331f
2 changed files with 268 additions and 414 deletions
268
src/components/date-picker/panel/Date/date-range.vue
Normal file
268
src/components/date-picker/panel/Date/date-range.vue
Normal file
|
|
@ -0,0 +1,268 @@
|
||||||
|
<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="[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-left"></Icon></span>
|
||||||
|
<span
|
||||||
|
:class="iconBtnCls('prev')"
|
||||||
|
@click="prevMonth('left')"
|
||||||
|
v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
|
||||||
|
<date-panel-label
|
||||||
|
:date-panel-label="leftDatePanelLabel"
|
||||||
|
:current-view="currentView"
|
||||||
|
:date-prefix-cls="datePrefixCls"></date-panel-label>
|
||||||
|
<span
|
||||||
|
:class="iconBtnCls('next', '-double')"
|
||||||
|
@click="nextYear('left')"><Icon type="ios-arrow-right"></Icon></span>
|
||||||
|
<span
|
||||||
|
:class="iconBtnCls('next')"
|
||||||
|
@click="nextMonth('left')"
|
||||||
|
v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
|
||||||
|
</div>
|
||||||
|
<component
|
||||||
|
:is="pickerTable"
|
||||||
|
ref="leftYearTable"
|
||||||
|
v-if="currentView !== 'time'"
|
||||||
|
:table-date="leftPanelDate"
|
||||||
|
selection-mode="range"
|
||||||
|
:disabled-date="disabledDate"
|
||||||
|
:range-state="rangeState"
|
||||||
|
:value="dates"
|
||||||
|
@on-change-range="handleChangeRange"
|
||||||
|
@on-pick="handleRangePick"
|
||||||
|
@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
|
||||||
|
:class="iconBtnCls('prev', '-double')"
|
||||||
|
@click="prevYear('right')"><Icon type="ios-arrow-left"></Icon></span>
|
||||||
|
<span
|
||||||
|
:class="iconBtnCls('prev')"
|
||||||
|
@click="prevMonth('right')"
|
||||||
|
v-show="currentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
|
||||||
|
<date-panel-label
|
||||||
|
:date-panel-label="rightDatePanelLabel"
|
||||||
|
:current-view="currentView"
|
||||||
|
:date-prefix-cls="datePrefixCls"></date-panel-label>
|
||||||
|
<span
|
||||||
|
:class="iconBtnCls('next', '-double')"
|
||||||
|
@click="nextYear('right')"><Icon type="ios-arrow-right"></Icon></span>
|
||||||
|
<span
|
||||||
|
:class="iconBtnCls('next')"
|
||||||
|
@click="nextMonth('right')"
|
||||||
|
v-show="currentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
|
||||||
|
</div>
|
||||||
|
<component
|
||||||
|
:is="pickerTable"
|
||||||
|
ref="rightYearTable"
|
||||||
|
v-if="currentView !== 'time'"
|
||||||
|
:table-date="rightPanelDate"
|
||||||
|
selection-mode="range"
|
||||||
|
:range-state="rangeState"
|
||||||
|
:disabled-date="disabledDate"
|
||||||
|
:value="dates"
|
||||||
|
@on-change-range="handleChangeRange"
|
||||||
|
@on-pick="handleRangePick"
|
||||||
|
@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"
|
||||||
|
@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';
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'RangeDatePickerPanel',
|
||||||
|
mixins: [ Mixin, Locale, DateMixin ],
|
||||||
|
components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm, datePanelLabel },
|
||||||
|
props: {
|
||||||
|
// in the mixin
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
const [minDate, maxDate] = this.value.map(date => date || initTimeDate());
|
||||||
|
return {
|
||||||
|
prefixCls: prefixCls,
|
||||||
|
datePrefixCls: datePrefixCls,
|
||||||
|
dates: this.value,
|
||||||
|
rangeState: {from: this.value[0], to: this.value[1], selecting: minDate && !maxDate},
|
||||||
|
currentView: this.selectionMode || 'range',
|
||||||
|
leftPanelDate: minDate,
|
||||||
|
rightPanelDate: new Date(minDate.getFullYear(), minDate.getMonth() + 1, minDate.getDate())
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
classes(){
|
||||||
|
return [
|
||||||
|
`${prefixCls}-body-wrapper`,
|
||||||
|
`${datePrefixCls}-with-range`,
|
||||||
|
{
|
||||||
|
[`${prefixCls}-with-sidebar`]: this.shortcuts.length
|
||||||
|
}
|
||||||
|
];
|
||||||
|
},
|
||||||
|
pickerTable(){
|
||||||
|
return `${this.currentView}-table`;
|
||||||
|
},
|
||||||
|
leftDatePanelLabel(){
|
||||||
|
return this.panelLabelConfig('left');
|
||||||
|
},
|
||||||
|
rightDatePanelLabel(){
|
||||||
|
return this.panelLabelConfig('right');
|
||||||
|
},
|
||||||
|
timeDisabled(){
|
||||||
|
return !(this.dates[0] && this.dates[1]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value(newVal) {
|
||||||
|
const minDate = newVal[0] ? toDate(newVal[0]) : null;
|
||||||
|
const maxDate = newVal[1] ? toDate(newVal[1]) : null;
|
||||||
|
this.dates = [minDate, maxDate];
|
||||||
|
this.rangeState = {
|
||||||
|
from: minDate,
|
||||||
|
to: maxDate,
|
||||||
|
selecting: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
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 (direction) {
|
||||||
|
this.changePanelDate(direction, 'FullYear', -1);
|
||||||
|
},
|
||||||
|
nextYear (direction) {
|
||||||
|
this.changePanelDate(direction, 'FullYear', 1);
|
||||||
|
},
|
||||||
|
prevMonth(direction){
|
||||||
|
this.changePanelDate(direction, 'Month', -1);
|
||||||
|
},
|
||||||
|
nextMonth(direction){
|
||||||
|
this.changePanelDate(direction, 'Month', 1);
|
||||||
|
},
|
||||||
|
changePanelDate(panel, type, increment){
|
||||||
|
const current = new Date(this[`${panel}PanelDate`]);
|
||||||
|
current[`set${type}`](current[`get${type}`]() + increment);
|
||||||
|
this[`${panel}PanelDate`] = current;
|
||||||
|
|
||||||
|
// change other panels if they 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);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showYearPicker () {
|
||||||
|
this.currentView = 'year';
|
||||||
|
},
|
||||||
|
showMonthPicker () {
|
||||||
|
this.currentView = 'month';
|
||||||
|
},
|
||||||
|
handleRangePick (val) {
|
||||||
|
if (this.rangeState.selecting || this.currentView === 'time'){
|
||||||
|
const [minDate, maxDate] = [this.rangeState.from, val].sort((a, b) => a - b);
|
||||||
|
this.dates = [minDate, maxDate];
|
||||||
|
if (this.currentView === 'time'){
|
||||||
|
this.dates = val;
|
||||||
|
} else {
|
||||||
|
this.rangeState = {
|
||||||
|
from: minDate,
|
||||||
|
to: maxDate,
|
||||||
|
selecting: false
|
||||||
|
};
|
||||||
|
}
|
||||||
|
this.handleConfirm(false);
|
||||||
|
} else {
|
||||||
|
this.rangeState = {
|
||||||
|
from: val,
|
||||||
|
to: null,
|
||||||
|
selecting: true
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleChangeRange (val) {
|
||||||
|
this.rangeState.to = val;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -1,414 +0,0 @@
|
||||||
<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="[prefixCls + '-content', prefixCls + '-content-left']" v-show="!isTime">
|
|
||||||
<div :class="[datePrefixCls + '-header']" v-show="leftCurrentView !== 'time'">
|
|
||||||
<span
|
|
||||||
:class="iconBtnCls('prev', '-double')"
|
|
||||||
@click="prevYear('left')"><Icon type="ios-arrow-left"></Icon></span>
|
|
||||||
<span
|
|
||||||
:class="iconBtnCls('prev')"
|
|
||||||
@click="prevMonth"
|
|
||||||
v-show="leftCurrentView === 'date'"><Icon type="ios-arrow-left"></Icon></span>
|
|
||||||
<date-panel-label
|
|
||||||
:date-panel-label="leftDatePanelLabel"
|
|
||||||
:current-view="leftCurrentView"
|
|
||||||
:date-prefix-cls="datePrefixCls"/>
|
|
||||||
<span
|
|
||||||
:class="iconBtnCls('next', '-double')"
|
|
||||||
@click="nextYear('left')"
|
|
||||||
v-show="leftCurrentView === 'year' || leftCurrentView === 'month'"><Icon type="ios-arrow-right"></Icon></span>
|
|
||||||
</div>
|
|
||||||
<date-table
|
|
||||||
v-show="leftCurrentView === 'date'"
|
|
||||||
:year="leftYear"
|
|
||||||
:month="leftMonth"
|
|
||||||
:date="date"
|
|
||||||
:min-date="minDate"
|
|
||||||
:max-date="maxDate"
|
|
||||||
:range-state="rangeState"
|
|
||||||
selection-mode="range"
|
|
||||||
:disabled-date="disabledDate"
|
|
||||||
@on-changerange="handleChangeRange"
|
|
||||||
@on-pick="handleRangePick"
|
|
||||||
@on-pick-click="handlePickClick"></date-table>
|
|
||||||
<year-table
|
|
||||||
ref="leftYearTable"
|
|
||||||
v-show="leftCurrentView === 'year'"
|
|
||||||
:year="leftTableYear"
|
|
||||||
:date="leftTableDate"
|
|
||||||
selection-mode="range"
|
|
||||||
:disabled-date="disabledDate"
|
|
||||||
@on-pick="handleLeftYearPick"
|
|
||||||
@on-pick-click="handlePickClick"></year-table>
|
|
||||||
<month-table
|
|
||||||
ref="leftMonthTable"
|
|
||||||
v-show="leftCurrentView === 'month'"
|
|
||||||
:month="leftMonth"
|
|
||||||
:date="leftTableDate"
|
|
||||||
selection-mode="range"
|
|
||||||
:disabled-date="disabledDate"
|
|
||||||
@on-pick="handleLeftMonthPick"
|
|
||||||
@on-pick-click="handlePickClick"></month-table>
|
|
||||||
</div>
|
|
||||||
<div :class="[prefixCls + '-content', prefixCls + '-content-right']" v-show="!isTime">
|
|
||||||
<div :class="[datePrefixCls + '-header']" v-show="rightCurrentView !== 'time'">
|
|
||||||
<span
|
|
||||||
:class="iconBtnCls('prev', '-double')"
|
|
||||||
@click="prevYear('right')"
|
|
||||||
v-show="rightCurrentView === 'year' || rightCurrentView === 'month'"><Icon type="ios-arrow-left"></Icon></span>
|
|
||||||
<date-panel-label
|
|
||||||
:date-panel-label="rightDatePanelLabel"
|
|
||||||
:current-view="rightCurrentView"
|
|
||||||
:date-prefix-cls="datePrefixCls"/>
|
|
||||||
<span
|
|
||||||
:class="iconBtnCls('next', '-double')"
|
|
||||||
@click="nextYear('right')"><Icon type="ios-arrow-right"></Icon></span>
|
|
||||||
<span
|
|
||||||
:class="iconBtnCls('next')"
|
|
||||||
@click="nextMonth"
|
|
||||||
v-show="rightCurrentView === 'date'"><Icon type="ios-arrow-right"></Icon></span>
|
|
||||||
</div>
|
|
||||||
<date-table
|
|
||||||
v-show="rightCurrentView === 'date'"
|
|
||||||
:year="rightYear"
|
|
||||||
:month="rightMonth"
|
|
||||||
:date="rightDate"
|
|
||||||
:min-date="minDate"
|
|
||||||
:max-date="maxDate"
|
|
||||||
:range-state="rangeState"
|
|
||||||
selection-mode="range"
|
|
||||||
:disabled-date="disabledDate"
|
|
||||||
@on-changerange="handleChangeRange"
|
|
||||||
@on-pick="handleRangePick"
|
|
||||||
@on-pick-click="handlePickClick"></date-table>
|
|
||||||
<year-table
|
|
||||||
ref="rightYearTable"
|
|
||||||
v-show="rightCurrentView === 'year'"
|
|
||||||
:year="rightTableYear"
|
|
||||||
:date="rightTableDate"
|
|
||||||
selection-mode="range"
|
|
||||||
:disabled-date="disabledDate"
|
|
||||||
@on-pick="handleRightYearPick"
|
|
||||||
@on-pick-click="handlePickClick"></year-table>
|
|
||||||
<month-table
|
|
||||||
ref="rightMonthTable"
|
|
||||||
v-show="rightCurrentView === 'month'"
|
|
||||||
:month="rightMonth"
|
|
||||||
:date="rightTableDate"
|
|
||||||
selection-mode="range"
|
|
||||||
:disabled-date="disabledDate"
|
|
||||||
@on-pick="handleRightMonthPick"
|
|
||||||
@on-pick-click="handlePickClick"></month-table>
|
|
||||||
</div>
|
|
||||||
<div :class="[prefixCls + '-content']" v-show="isTime">
|
|
||||||
<time-picker
|
|
||||||
ref="timePicker"
|
|
||||||
v-show="isTime"
|
|
||||||
@on-pick="handleTimePick"
|
|
||||||
@on-pick-click="handlePickClick"></time-picker>
|
|
||||||
</div>
|
|
||||||
<Confirm
|
|
||||||
v-if="confirm"
|
|
||||||
:show-time="showTime"
|
|
||||||
:is-time="isTime"
|
|
||||||
:time-disabled="timeDisabled"
|
|
||||||
@on-pick-toggle-time="handleToggleTime"
|
|
||||||
@on-pick-clear="handlePickClear"
|
|
||||||
@on-pick-success="handlePickSuccess"></Confirm>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import Icon from '../../icon/icon.vue';
|
|
||||||
import DateTable from '../base/date-table.vue';
|
|
||||||
import YearTable from '../base/year-table.vue';
|
|
||||||
import MonthTable from '../base/month-table.vue';
|
|
||||||
import TimePicker from './time-range.vue';
|
|
||||||
import Confirm from '../base/confirm.vue';
|
|
||||||
import { toDate, prevMonth, nextMonth, initTimeDate, formatDateLabels } from '../util';
|
|
||||||
import datePanelLabel from './date-panel-label.vue';
|
|
||||||
|
|
||||||
import Mixin from './mixin';
|
|
||||||
import Locale from '../../../mixins/locale';
|
|
||||||
|
|
||||||
const prefixCls = 'ivu-picker-panel';
|
|
||||||
const datePrefixCls = 'ivu-date-picker';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'DatePicker',
|
|
||||||
mixins: [ Mixin, Locale ],
|
|
||||||
components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm, datePanelLabel },
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
prefixCls: prefixCls,
|
|
||||||
datePrefixCls: datePrefixCls,
|
|
||||||
shortcuts: [],
|
|
||||||
date: initTimeDate(),
|
|
||||||
value: '',
|
|
||||||
minDate: '',
|
|
||||||
maxDate: '',
|
|
||||||
confirm: false,
|
|
||||||
rangeState: {
|
|
||||||
endDate: null,
|
|
||||||
selecting: false
|
|
||||||
},
|
|
||||||
showTime: false,
|
|
||||||
disabledDate: '',
|
|
||||||
leftCurrentView: 'date',
|
|
||||||
rightCurrentView: 'date',
|
|
||||||
selectionMode: 'range',
|
|
||||||
leftTableYear: null,
|
|
||||||
rightTableYear: null,
|
|
||||||
isTime: false,
|
|
||||||
format: 'yyyy-MM-dd'
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
classes () {
|
|
||||||
return [
|
|
||||||
`${prefixCls}-body-wrapper`,
|
|
||||||
`${datePrefixCls}-with-range`,
|
|
||||||
{
|
|
||||||
[`${prefixCls}-with-sidebar`]: this.shortcuts.length
|
|
||||||
}
|
|
||||||
];
|
|
||||||
},
|
|
||||||
leftYear () {
|
|
||||||
return this.date.getFullYear();
|
|
||||||
},
|
|
||||||
leftTableDate () {
|
|
||||||
if (this.leftCurrentView === 'year' || this.leftCurrentView === 'month') {
|
|
||||||
return new Date(this.leftTableYear);
|
|
||||||
} else {
|
|
||||||
return this.date;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
leftMonth () {
|
|
||||||
return this.date.getMonth();
|
|
||||||
},
|
|
||||||
rightYear () {
|
|
||||||
return this.rightDate.getFullYear();
|
|
||||||
},
|
|
||||||
rightTableDate () {
|
|
||||||
if (this.rightCurrentView === 'year' || this.rightCurrentView === 'month') {
|
|
||||||
return new Date(this.rightTableYear);
|
|
||||||
} else {
|
|
||||||
return this.date;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
rightMonth () {
|
|
||||||
return this.rightDate.getMonth();
|
|
||||||
},
|
|
||||||
rightDate () {
|
|
||||||
const newDate = new Date(this.date);
|
|
||||||
const month = newDate.getMonth();
|
|
||||||
newDate.setDate(1);
|
|
||||||
|
|
||||||
if (month === 11) {
|
|
||||||
newDate.setFullYear(newDate.getFullYear() + 1);
|
|
||||||
newDate.setMonth(0);
|
|
||||||
} else {
|
|
||||||
newDate.setMonth(month + 1);
|
|
||||||
}
|
|
||||||
return newDate;
|
|
||||||
},
|
|
||||||
leftDatePanelLabel () {
|
|
||||||
if (!this.leftYear) return null; // not ready yet
|
|
||||||
return this.panelLabelConfig('left');
|
|
||||||
},
|
|
||||||
rightDatePanelLabel () {
|
|
||||||
if (!this.leftYear) return null; // not ready yet
|
|
||||||
return this.panelLabelConfig('right');
|
|
||||||
},
|
|
||||||
timeDisabled () {
|
|
||||||
return !(this.minDate && this.maxDate);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
value(newVal) {
|
|
||||||
if (!newVal) {
|
|
||||||
this.minDate = null;
|
|
||||||
this.maxDate = null;
|
|
||||||
} else if (Array.isArray(newVal)) {
|
|
||||||
this.minDate = newVal[0] ? toDate(newVal[0]) : null;
|
|
||||||
this.maxDate = newVal[1] ? toDate(newVal[1]) : null;
|
|
||||||
if (this.minDate) this.date = new Date(this.minDate);
|
|
||||||
}
|
|
||||||
if (this.showTime) this.$refs.timePicker.value = newVal;
|
|
||||||
},
|
|
||||||
minDate (val) {
|
|
||||||
if (this.showTime) this.$refs.timePicker.date = val;
|
|
||||||
},
|
|
||||||
maxDate (val) {
|
|
||||||
if (this.showTime) this.$refs.timePicker.dateEnd = val;
|
|
||||||
},
|
|
||||||
format (val) {
|
|
||||||
if (this.showTime) this.$refs.timePicker.format = val;
|
|
||||||
},
|
|
||||||
isTime (val) {
|
|
||||||
if (val) this.$refs.timePicker.updateScroll();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
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 = new Date(this[`${direction}Year`], this[`${direction}Month`]);
|
|
||||||
const { labels, separator } = formatDateLabels(locale, datePanelLabel, date);
|
|
||||||
|
|
||||||
return {
|
|
||||||
separator: separator,
|
|
||||||
labels: labels.map(obj => ((obj.handler = handler(obj.type)), obj))
|
|
||||||
};
|
|
||||||
},
|
|
||||||
resetDate () {
|
|
||||||
this.date = new Date(this.date);
|
|
||||||
this.leftTableYear = this.date.getFullYear();
|
|
||||||
this.rightTableYear = this.rightDate.getFullYear();
|
|
||||||
},
|
|
||||||
handleClear() {
|
|
||||||
this.minDate = null;
|
|
||||||
this.maxDate = null;
|
|
||||||
this.date = new Date();
|
|
||||||
this.handleConfirm();
|
|
||||||
if (this.showTime) this.$refs.timePicker.handleClear();
|
|
||||||
},
|
|
||||||
resetView(reset = false) {
|
|
||||||
this.leftCurrentView = 'date';
|
|
||||||
this.rightCurrentView = 'date';
|
|
||||||
|
|
||||||
this.leftTableYear = this.leftYear;
|
|
||||||
this.rightTableYear = this.rightYear;
|
|
||||||
|
|
||||||
if (reset) this.isTime = false;
|
|
||||||
},
|
|
||||||
prevYear (direction) {
|
|
||||||
if (this[`${direction}CurrentView`] === 'year') {
|
|
||||||
this.$refs[`${direction}YearTable`].prevTenYear();
|
|
||||||
} else if (this[`${direction}CurrentView`] === 'month') {
|
|
||||||
this[`${direction}TableYear`]--;
|
|
||||||
} else {
|
|
||||||
const date = this.date;
|
|
||||||
date.setFullYear(date.getFullYear() - 1);
|
|
||||||
this.resetDate();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
nextYear (direction) {
|
|
||||||
if (this[`${direction}CurrentView`] === 'year') {
|
|
||||||
this.$refs[`${direction}YearTable`].nextTenYear();
|
|
||||||
} else if (this[`${direction}CurrentView`] === 'month') {
|
|
||||||
this[`${direction}TableYear`]++;
|
|
||||||
} else {
|
|
||||||
const date = this.date;
|
|
||||||
date.setFullYear(date.getFullYear() + 1);
|
|
||||||
this.resetDate();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
prevMonth () {
|
|
||||||
this.date = prevMonth(this.date);
|
|
||||||
},
|
|
||||||
nextMonth () {
|
|
||||||
this.date = nextMonth(this.date);
|
|
||||||
},
|
|
||||||
handleLeftYearPick (year, close = true) {
|
|
||||||
this.handleYearPick(year, close, 'left');
|
|
||||||
},
|
|
||||||
handleRightYearPick (year, close = true) {
|
|
||||||
this.handleYearPick(year, close, 'right');
|
|
||||||
},
|
|
||||||
handleYearPick (year, close, direction) {
|
|
||||||
this[`${direction}TableYear`] = year;
|
|
||||||
if (!close) return;
|
|
||||||
|
|
||||||
this[`${direction}CurrentView`] = 'month';
|
|
||||||
},
|
|
||||||
handleLeftMonthPick (month) {
|
|
||||||
this.handleMonthPick(month, 'left');
|
|
||||||
},
|
|
||||||
handleRightMonthPick (month) {
|
|
||||||
this.handleMonthPick(month, 'right');
|
|
||||||
},
|
|
||||||
handleMonthPick (month, direction) {
|
|
||||||
let year = this[`${direction}TableYear`];
|
|
||||||
if (direction === 'right') {
|
|
||||||
if (month === 0) {
|
|
||||||
month = 11;
|
|
||||||
year--;
|
|
||||||
} else {
|
|
||||||
month--;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.date.setYear(year);
|
|
||||||
this.date.setMonth(month);
|
|
||||||
this[`${direction}CurrentView`] = 'date';
|
|
||||||
this.resetDate();
|
|
||||||
},
|
|
||||||
showYearPicker (direction) {
|
|
||||||
this[`${direction}CurrentView`] = 'year';
|
|
||||||
this[`${direction}TableYear`] = this[`${direction}Year`];
|
|
||||||
},
|
|
||||||
showMonthPicker (direction) {
|
|
||||||
this[`${direction}CurrentView`] = 'month';
|
|
||||||
},
|
|
||||||
handleConfirm(visible) {
|
|
||||||
this.$emit('on-pick', [this.minDate, this.maxDate], visible);
|
|
||||||
},
|
|
||||||
handleRangePick (val, close = true) {
|
|
||||||
if (this.maxDate === val.maxDate && this.minDate === val.minDate) return;
|
|
||||||
|
|
||||||
this.minDate = val.minDate;
|
|
||||||
this.maxDate = val.maxDate;
|
|
||||||
|
|
||||||
// todo Remove when Chromium has fixed bug
|
|
||||||
// https://github.com/iview/iview/issues/2122
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.minDate = val.minDate;
|
|
||||||
this.maxDate = val.maxDate;
|
|
||||||
});
|
|
||||||
/* end of #2122 patch */
|
|
||||||
|
|
||||||
if (!close) return;
|
|
||||||
// if (!this.showTime) {
|
|
||||||
// this.handleConfirm(false);
|
|
||||||
// }
|
|
||||||
this.handleConfirm(false);
|
|
||||||
},
|
|
||||||
handleChangeRange (val) {
|
|
||||||
this.minDate = val.minDate;
|
|
||||||
this.maxDate = val.maxDate;
|
|
||||||
this.rangeState = val.rangeState;
|
|
||||||
},
|
|
||||||
handleToggleTime () {
|
|
||||||
this.isTime = !this.isTime;
|
|
||||||
},
|
|
||||||
handleTimePick (date) {
|
|
||||||
this.minDate = date[0];
|
|
||||||
this.maxDate = date[1];
|
|
||||||
this.handleConfirm(false);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
if (this.showTime) {
|
|
||||||
// todo 这里也到不了
|
|
||||||
this.$refs.timePicker.date = this.minDate;
|
|
||||||
this.$refs.timePicker.dateEnd = this.maxDate;
|
|
||||||
this.$refs.timePicker.value = this.value;
|
|
||||||
this.$refs.timePicker.format = this.format;
|
|
||||||
this.$refs.timePicker.showDate = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue