drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add keyboard navigation to date|time picker

Browse source
This commit is contained in:
Sergio Crisostomo 2018-05-18 13:06:43 +02:00
parent 2bf3e04753
commit 75cb299868
16 changed files with 467 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/components/date-picker/panel/Date/date-range.vue
View file

@ -41,6 +41,8 @@
: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"
@ -80,6 +82,8 @@
: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>
@ -178,7 +182,7 @@
[prefixCls + '-body-time']: this.showTime,
[prefixCls + '-body-date']: !this.showTime,
}
]
];
},
leftDatePanelLabel(){
return this.panelLabelConfig('left');
@ -224,10 +228,7 @@
// set panels positioning
const leftPanelDate = this.startDate || this.dates[0] || new Date();
this.leftPanelDate = leftPanelDate;
const rightPanelDate = new Date(leftPanelDate.getFullYear(), leftPanelDate.getMonth() + 1, leftPanelDate.getDate());
this.rightPanelDate = this.splitPanels ? new Date(Math.max(this.dates[1], rightPanelDate)) : rightPanelDate;
this.setPanelDates(this.startDate || this.dates[0] || new Date());
},
currentView(currentView){
const leftMonth = this.leftPanelDate.getMonth();
@ -246,6 +247,9 @@
},
selectionMode(type){
this.currentView = type || 'range';
},
focusedDate(date){
this.setPanelDates(date || new Date());
}
},
methods: {
@ -254,6 +258,11 @@
this.leftPickerTable = `${this.currentView}-table`;
this.rightPickerTable = `${this.currentView}-table`;
},
setPanelDates(leftPanelDate){
this.leftPanelDate = leftPanelDate;
const rightPanelDate = new Date(leftPanelDate.getFullYear(), leftPanelDate.getMonth() + 1, leftPanelDate.getDate());
this.rightPanelDate = this.splitPanels ? new Date(Math.max(this.dates[1], rightPanelDate)) : rightPanelDate;
},
panelLabelConfig (direction) {
const locale = this.t('i.locale');
const datePanelLabel = this.t('i.datepicker.datePanelLabel');