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

4
src/components/date-picker/panel/Date/date-panel-mixin.js
View file

@ -46,6 +46,10 @@ export default {
pickerType: {
type: String,
require: true
},
focusedDate: {
type: Date,
required: true,
}
},
computed: {

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');

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

@ -39,6 +39,8 @@
:value="dates"
:selection-mode="selectionMode"
:disabled-date="disabledDate"
:focused-date="focusedDate"
@on-pick="panelPickerHandlers"
@on-pick-click="handlePickClick"
></component>
@ -51,6 +53,8 @@
:format="format"
:time-disabled="timeDisabled"
:disabled-date="disabledDate"
:focused-date="focusedDate"
v-bind="timePickerOptions"
@on-pick="handlePick"
@on-pick-click="handlePickClick"
@ -150,7 +154,6 @@
},
currentView (currentView) {
this.$emit('on-selection-mode-change', currentView);
this.pickertable = this.getTableType(currentView);
if (this.currentView === 'time') {
this.$nextTick(() => {
@ -162,6 +165,13 @@
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){
this.panelDate = date;
}
}
},
methods: {