diff --git a/src/components/date-picker/panel/Date/date-panel-mixin.js b/src/components/date-picker/panel/Date/date-panel-mixin.js
index b56a513..b2f666b 100644
--- a/src/components/date-picker/panel/Date/date-panel-mixin.js
+++ b/src/components/date-picker/panel/Date/date-panel-mixin.js
@@ -42,6 +42,10 @@ export default {
},
startDate: {
type: Date
+ },
+ pickerType: {
+ type: String,
+ require: true
}
},
computed: {
diff --git a/src/components/date-picker/panel/Date/date-range.vue b/src/components/date-picker/panel/Date/date-range.vue
index 8cfd3d4..83e4eb8 100644
--- a/src/components/date-picker/panel/Date/date-range.vue
+++ b/src/components/date-picker/panel/Date/date-range.vue
@@ -31,7 +31,7 @@
v-show="currentView === 'date'">
@@ -69,7 +69,7 @@
v-show="currentView === 'date'">
@@ -147,6 +147,8 @@
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, leftPanelDate.getDate())
};
@@ -161,9 +163,6 @@
}
];
},
- pickerTable(){
- return `${this.currentView}-table`;
- },
leftDatePanelLabel(){
return this.panelLabelConfig('left');
},
@@ -172,6 +171,13 @@
},
timeDisabled(){
return !(this.dates[0] && this.dates[1]);
+ },
+ panelPickerHandlers(){
+ const tableType = `${this.currentView}-table`;
+ return {
+ left: this.leftPickerTable === tableType ? this.handleRangePick : this.handlePreSelection.bind(this, 'left'),
+ right: this.leftPickerTable === tableType ? this.handleRangePick : this.handlePreSelection.bind(this, 'right'),
+ }
}
},
watch: {
@@ -190,6 +196,9 @@
const rightMonth = this.rightPanelDate.getMonth();
const isSameYear = this.leftPanelDate.getFullYear() === this.rightPanelDate.getFullYear();
+ this.leftPickerTable = `${currentView}-table`;
+ this.rightPickerTable = `${currentView}-table`;
+
if (currentView === 'date' && isSameYear && leftMonth === rightMonth){
this.changePanelDate('right', 'Month', 1);
}
@@ -257,11 +266,15 @@
}
}
},
- showYearPicker () {
- this.currentView = 'year';
+ showYearPicker (panel) {
+ this[`${panel}PickerTable`] = 'year-table';
+ },
+ showMonthPicker (panel) {
+ this[`${panel}PickerTable`] = 'month-table';
},
- showMonthPicker () {
- this.currentView = 'month';
+ handlePreSelection(panel, value){
+ this[`${panel}PanelDate`] = value;
+ this[`${panel}PickerTable`] = `${this.currentView}-table`;
},
handleRangePick (val) {
if (this.rangeState.selecting || this.currentView === 'time'){
diff --git a/src/components/date-picker/panel/Date/date.vue b/src/components/date-picker/panel/Date/date.vue
index 118799d..3aaa90b 100644
--- a/src/components/date-picker/panel/Date/date.vue
+++ b/src/components/date-picker/panel/Date/date.vue
@@ -37,7 +37,7 @@
:value="dates"
:selection-mode="selectionMode"
:disabled-date="disabledDate"
- @on-pick="handlePick"
+ @on-pick="panelPickerHandlers"
@on-pick-click="handlePickClick"
>
@@ -92,11 +92,14 @@
// in the mixin
},
data () {
- const dates = this.value.slice().sort();
+ const {selectionMode, value} = this;
+
+ const dates = value.slice().sort();
return {
prefixCls: prefixCls,
datePrefixCls: datePrefixCls,
- currentView: this.selectionMode || 'date',
+ currentView: selectionMode || 'date',
+ pickerTable: this.getTableType(selectionMode),
dates: dates,
panelDate: this.startDate || dates[0] || new Date()
};
@@ -110,8 +113,8 @@
}
];
},
- pickerTable(){
- return this.currentView.match(/^time/) ? 'time-picker' : `${this.currentView}-table`;
+ panelPickerHandlers(){
+ return this.pickerTable === `${this.currentView}-table` ? this.handlePick : this.handlePreSelection
},
datePanelLabel () {
const locale = this.t('i.locale');
@@ -120,7 +123,7 @@
const { labels, separator } = formatDateLabels(locale, datePanelLabel, date);
const handler = type => {
- return () => (this.currentView = type);
+ return () => this.pickerTable = this.getTableType(type);
};
return {
@@ -139,8 +142,9 @@
selectionMode(){
this.currentView = this.selectionMode;
},
- currentView (val) {
- this.$emit('on-selection-mode-change', val);
+ currentView (currentView) {
+ this.$emit('on-selection-mode-change', currentView);
+ this.pickertable = this.getTableType(currentView);
}
},
methods: {
@@ -151,16 +155,29 @@
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;
+ this.pickerTable = this.getTableType(this.currentView);
+ },
handlePick (value) {
- const {selectionMode, panelDate} = this;
+ const {selectionMode, panelDate, pickerType} = 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.$emit('on-pick', value);
+ if (pickerType === selectionMode){
+ this.$emit('on-pick', value);
+ } else {
+ this.selectionMode
+ }
+
+
},
},
};
diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index 70dd1e0..2a0449c 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -45,6 +45,7 @@
:start-date="startDate"
:split-panels="splitPanels"
:show-week-numbers="showWeekNumbers"
+ :picker-type="type"
v-bind="ownPickerProps"
--
libgit2 0.21.4