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
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();
|
||||
}
|
||||
}
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue