vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #3589 - Calendar: Disable year and month when set minDate or maxDate

pull/3714/head
Tuğçe Küçükoğlu 2023-03-09 14:08:26 +03:00
parent 76dec89cc0
commit ef1adfafe8
1 changed files with 41 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
components/calendar/Calendar.vue
View File

@ -96,7 +96,7 @@
{{ getYear(month) }} {{ getYear(month) }}
</button> </button>
<span v-if="currentView === 'year'" class="p-datepicker-decade"> <span v-if="currentView === 'year'" class="p-datepicker-decade">
<slot name="decade" :years="yearPickerValues.map((e) => e.value)"> {{ yearPickerValues[0].value }} - {{ yearPickerValues[yearPickerValues.length - 1].value }} </slot> <slot name="decade" :years="yearPickerValues"> {{ yearPickerValues[0].value }} - {{ yearPickerValues[yearPickerValues.length - 1].value }} </slot>
</span> </span>
</div> </div>
<button <button
@ -161,11 +161,11 @@
@click="onMonthSelect($event, { month: m, index: i })" @click="onMonthSelect($event, { month: m, index: i })"
@keydown="onMonthCellKeydown($event, { month: m, index: i })" @keydown="onMonthCellKeydown($event, { month: m, index: i })"
class="p-monthpicker-month" class="p-monthpicker-month"
:class="{ 'p-highlight': isMonthSelected(i), 'p-disabled': m.isDisabled }" :class="{ 'p-highlight': isMonthSelected(i), 'p-disabled': !m.selectable }"
> >
{{ m.label }} {{ m.value }}
<div v-if="isMonthSelected(i)" class="p-hidden-accessible" aria-live="polite"> <div v-if="isMonthSelected(i)" class="p-hidden-accessible" aria-live="polite">
{{ m.label }} {{ m.value }}
</div> </div>
</span> </span>
</div> </div>
@ -177,7 +177,7 @@
@click="onYearSelect($event, y)" @click="onYearSelect($event, y)"
@keydown="onYearCellKeydown($event, y)" @keydown="onYearCellKeydown($event, y)"
class="p-yearpicker-year" class="p-yearpicker-year"
:class="{ 'p-highlight': isYearSelected(y.value), 'p-disabled': y.isDisabled }" :class="{ 'p-highlight': isYearSelected(y.value), 'p-disabled': !y.selectable }"
> >
{{ y.value }} {{ y.value }}
<div v-if="isYearSelected(y.value)" class="p-hidden-accessible" aria-live="polite"> <div v-if="isYearSelected(y.value)" class="p-hidden-accessible" aria-live="polite">
@ -1649,7 +1649,7 @@ export default {
} }
}, },
onMonthSelect(event, { month, index }) { onMonthSelect(event, { month, index }) {
if (month.isDisabled) return; // if (month.selectable) return;
if (this.view === 'month') { if (this.view === 'month') {
this.onDateSelect(event, { year: this.currentYear, month: index, day: 1, selectable: true }); this.onDateSelect(event, { year: this.currentYear, month: index, day: 1, selectable: true });
@ -1662,7 +1662,7 @@ export default {
setTimeout(this.updateFocus, 0); setTimeout(this.updateFocus, 0);
}, },
onYearSelect(event, year) { onYearSelect(event, year) {
if (year.isDisabled) return; // if (year.isSelectable) return;
if (this.view === 'year') { if (this.view === 'year') {
this.onDateSelect(event, { year: year.value, month: 0, day: 1, selectable: true }); this.onDateSelect(event, { year: year.value, month: 0, day: 1, selectable: true });
@ -2898,21 +2898,30 @@ export default {
monthPickerValues() { monthPickerValues() {
let monthPickerValues = []; let monthPickerValues = [];
const fromYear = this.minDate?.getFullYear(); const isSelectableMonth = (baseMonth) => {
const fromMonth = this.minDate?.getMonth(); if (this.minDate) {
const toYear = this.maxDate?.getFullYear(); const minMonth = this.minDate.getMonth();
const toMonth = this.maxDate?.getMonth(); const minYear = this.minDate.getFullYear();
let monthStart = this.currentYear === fromYear ? fromMonth : 0; if (this.currentYear < minYear || (this.currentYear === minYear && baseMonth < minMonth)) {
const monthEnd = this.currentYear === toYear ? toMonth : 11; return false;
}
}
if (this.maxDate) {
const maxMonth = this.maxDate.getMonth();
const maxYear = this.maxDate.getFullYear();
if (this.currentYear > maxYear || (this.currentYear === maxYear && baseMonth > maxMonth)) {
return false;
}
}
return true;
};
for (let i = 0; i <= 11; i++) { for (let i = 0; i <= 11; i++) {
const label = this.$primevue.config.locale.monthNamesShort[i]; monthPickerValues.push({ value: this.$primevue.config.locale.monthNamesShort[i], selectable: isSelectableMonth(i) });
monthPickerValues.push({
label,
isDisabled: this.currentYear < fromYear || this.currentYear > toYear || i < monthStart || i > monthEnd
});
} }
return monthPickerValues; return monthPickerValues;
@ -2921,13 +2930,20 @@ export default {
let yearPickerValues = []; let yearPickerValues = [];
let base = this.currentYear - (this.currentYear % 10); let base = this.currentYear - (this.currentYear % 10);
for (let i = 0; i < 10; i++) { const isSelectableYear = (baseYear) => {
const value = base + i; if (this.minDate) {
if (this.minDate.getFullYear() > baseYear) return false;
}
yearPickerValues.push({ if (this.maxDate) {
value, if (this.maxDate.getFullYear() < baseYear) return false;
isDisabled: (this.minDate || this.maxDate) && (value < this.minDate?.getFullYear() || value > this.maxDate?.getFullYear()) }
});
return true;
};
for (let i = 0; i < 10; i++) {
yearPickerValues.push({ value: base + i, selectable: isSelectableYear(base + i) });
} }
return yearPickerValues; return yearPickerValues;