@@ -358,7 +367,8 @@ export default {
currentSecond: null,
pm: null,
focused: false,
- overlayVisible: false
+ overlayVisible: false,
+ currentView: this.view
}
},
watch: {
@@ -413,6 +423,9 @@ export default {
isMonthSelected(month) {
return this.isComparable() ? (this.modelValue.getMonth() === month && this.modelValue.getFullYear() === this.currentYear) : false;
},
+ isYearSelected(year) {
+ return this.isComparable() ? (this.modelValue.getFullYear() === year) : false;
+ },
isDateEquals(value, dateMeta) {
if (value)
return value.getDate() === dateMeta.day && value.getMonth() === dateMeta.month && value.getFullYear() === dateMeta.year;
@@ -557,6 +570,7 @@ export default {
}
},
onOverlayLeave() {
+ this.currentView = this.view;
this.unbindOutsideClickListener();
this.unbindScrollListener();
this.unbindResizeListener();
@@ -587,9 +601,12 @@ export default {
return;
}
- if (this.view === 'month') {
+ if (this.currentView === 'month') {
this.decrementYear();
}
+ else if (this.currentView === 'year') {
+ this.decrementDecade();
+ }
else {
if (this.currentMonth === 0) {
this.currentMonth = 11;
@@ -609,9 +626,12 @@ export default {
return;
}
- if (this.view === 'month') {
+ if (this.currentView === 'month') {
this.incrementYear();
}
+ else if (this.currentView === 'year') {
+ this.incrementDecade();
+ }
else {
if (this.currentMonth === 11) {
this.currentMonth = 0;
@@ -627,9 +647,27 @@ export default {
decrementYear() {
this.currentYear--;
},
+ decrementDecade() {
+ this.currentYear = this.currentYear - 10;
+ },
incrementYear() {
this.currentYear++;
},
+ incrementDecade() {
+ this.currentYear = this.currentYear + 10;
+ },
+ switchToMonthView(event) {
+ this.currentView = 'month';
+ setTimeout(() => {
+
+ this.alignOverlay();
+ }, 1000);
+ event.preventDefault();
+ },
+ switchToYearView(event) {
+ this.currentView = 'year';
+ event.preventDefault();
+ },
isEnabled() {
return !this.$attrs.disabled && !this.$attrs.readonly;
},
@@ -1285,7 +1323,24 @@ export default {
}
},
onMonthSelect(event, index) {
- this.onDateSelect(event, {year: this.currentYear, month: index, day: 1, selectable: true});
+ if (this.view === 'month') {
+ this.onDateSelect(event, {year: this.currentYear, month: index, day: 1, selectable: true});
+ }
+ else {
+ this.currentMonth = index;
+ this.currentView = 'date';
+ this.$emit('month-change', {month: this.currentMonth + 1, year: this.currentYear});
+ }
+ },
+ onYearSelect(event, year) {
+ if (this.view === 'year') {
+ this.onDateSelect(event, {year: year, month: 0, day: 1, selectable: true});
+ }
+ else {
+ this.currentYear = year;
+ this.currentView = 'month';
+ this.$emit('year-change', {month: this.currentMonth + 1, year: this.currentYear});
+ }
},
enableModality() {
if (!this.mask) {
@@ -1508,7 +1563,7 @@ export default {
iValue++;
};
- if (this.view === 'month') {
+ if (this.currentView === 'month') {
day = 1;
}
@@ -1824,6 +1879,74 @@ export default {
break;
}
},
+ onYearCellKeydown(event, index) {
+ const cell = event.currentTarget;
+
+ switch (event.which) {
+ //arrows
+ case 38:
+ case 40: {
+ cell.tabIndex = '-1';
+ var cells = cell.parentElement.children;
+ var cellIndex = DomHandler.index(cell);
+ let nextCell = cells[event.which === 40 ? cellIndex + 3 : cellIndex -3];
+ if (nextCell) {
+ nextCell.tabIndex = '0';
+ nextCell.focus();
+ }
+ event.preventDefault();
+ break;
+ }
+
+ //left arrow
+ case 37: {
+ cell.tabIndex = '-1';
+ let prevCell = cell.previousElementSibling;
+ if (prevCell) {
+ prevCell.tabIndex = '0';
+ prevCell.focus();
+ }
+ event.preventDefault();
+ break;
+ }
+
+ //right arrow
+ case 39: {
+ cell.tabIndex = '-1';
+ let nextCell = cell.nextElementSibling;
+ if (nextCell) {
+ nextCell.tabIndex = '0';
+ nextCell.focus();
+ }
+ event.preventDefault();
+ break;
+ }
+
+ //enter
+ case 13: {
+ this.onMonthSelect(event, index);
+ event.preventDefault();
+ break;
+ }
+
+ //escape
+ case 27: {
+ this.overlayVisible = false;
+ event.preventDefault();
+ break;
+ }
+
+ //tab
+ case 9: {
+ this.trapFocus(event);
+ break;
+ }
+
+ default:
+ //no op
+ break;
+ }
+ },
updateFocus() {
let cell;
if (this.navigationState) {
@@ -1859,7 +1982,7 @@ export default {
initFocusableCell() {
let cell;
- if (this.view === 'month') {
+ if (this.currentView === 'month') {
let cells = DomHandler.find(this.overlay, '.p-monthpicker .p-monthpicker-month');
let selectedCell= DomHandler.findSingle(this.overlay, '.p-monthpicker .p-monthpicker-month.p-highlight');
cells.forEach(cell => cell.tabIndex = -1);
@@ -2024,7 +2147,8 @@ export default {
'p-disabled': this.$attrs.disabled,
'p-datepicker-timeonly': this.timeOnly,
'p-datepicker-multiple-month': this.numberOfMonths > 1,
- 'p-datepicker-monthpicker': (this.view === 'month'),
+ 'p-datepicker-monthpicker': (this.currentView === 'month'),
+ 'p-datepicker-yearpicker': (this.currentView === 'year'),
'p-datepicker-touch-ui': this.touchUI,
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': this.$primevue.config.ripple === false
@@ -2152,6 +2276,15 @@ export default {
return monthPickerValues;
},
+ yearPickerValues() {
+ let yearPickerValues = [];
+ let base = this.currentYear - (this.currentYear % 10);
+ for (let i = 0; i < 10; i++) {
+ yearPickerValues.push(base + i);
+ }
+
+ return yearPickerValues;
+ },
formattedCurrentHour() {
return this.currentHour < 10 ? '0' + this.currentHour : this.currentHour;
},
@@ -2233,7 +2366,7 @@ export default {
}
.p-datepicker-inline {
- display: inline-flex;
+ display: inline-block;
position: static;
}
@@ -2290,6 +2423,17 @@ export default {
position: relative;
}
+/* Year Picker */
+.p-yearpicker-year {
+ width: 50%;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ overflow: hidden;
+ position: relative;
+}
+
/* Button Bar */
.p-datepicker-buttonbar {
display: flex;
diff --git a/src/views/calendar/CalendarDemo.vue b/src/views/calendar/CalendarDemo.vue
index 2971452b7..6ce5f1029 100755
--- a/src/views/calendar/CalendarDemo.vue
+++ b/src/views/calendar/CalendarDemo.vue
@@ -14,7 +14,7 @@