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

Update Calendar disable year and month when set max-min 

Fix onYearCellKeydown
pull/3588/head
King-Ponpawit 2023-01-25 15:42:15 +07:00
parent b23b31461c
commit 1cfc495c87
1 changed files with 51 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
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"> {{ yearPickerValues[0] }} - {{ yearPickerValues[yearPickerValues.length - 1] }} </slot> <slot name="decade" :years="yearPickerValues.map((e) => e.value)"> {{ yearPickerValues[0].value }} - {{ yearPickerValues[yearPickerValues.length - 1].value }} </slot>
</span> </span>
</div> </div>
<button <button
@ -154,18 +154,34 @@
</div> </div>
</div> </div>
<div v-if="currentView === 'month'" class="p-monthpicker"> <div v-if="currentView === 'month'" class="p-monthpicker">
<span v-for="(m, i) of monthPickerValues" :key="m" v-ripple @click="onMonthSelect($event, i)" @keydown="onMonthCellKeydown($event, i)" class="p-monthpicker-month" :class="{ 'p-highlight': isMonthSelected(i) }"> <span
{{ m }} v-for="(m, i) of monthPickerValues"
:key="m"
v-ripple
@click="onMonthSelect($event, { month: m, index: i })"
@keydown="onMonthCellKeydown($event, { month: m, index: i })"
class="p-monthpicker-month"
:class="{ 'p-highlight': isMonthSelected(i), 'p-disabled': m.isDisabled }"
>
{{ m.label }}
<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 }} {{ m.label }}
</div> </div>
</span> </span>
</div> </div>
<div v-if="currentView === 'year'" class="p-yearpicker"> <div v-if="currentView === 'year'" class="p-yearpicker">
<span v-for="y of yearPickerValues" :key="y" v-ripple @click="onYearSelect($event, y)" @keydown="onYearCellKeydown($event, y)" class="p-yearpicker-year" :class="{ 'p-highlight': isYearSelected(y) }"> <span
{{ y }} v-for="y of yearPickerValues"
<div v-if="isYearSelected(y)" class="p-hidden-accessible" aria-live="polite"> :key="y.value"
{{ y }} v-ripple
@click="onYearSelect($event, y)"
@keydown="onYearCellKeydown($event, y)"
class="p-yearpicker-year"
:class="{ 'p-highlight': isYearSelected(y.value), 'p-disabled': y.isDisabled }"
>
{{ y.value }}
<div v-if="isYearSelected(y.value)" class="p-hidden-accessible" aria-live="polite">
{{ y.value }}
</div> </div>
</span> </span>
</div> </div>
@ -1632,7 +1648,9 @@ export default {
clearInterval(this.timePickerTimer); clearInterval(this.timePickerTimer);
} }
}, },
onMonthSelect(event, index) { onMonthSelect(event, { month, index }) {
if (month.isDisabled) 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 });
} else { } else {
@ -1644,10 +1662,12 @@ export default {
setTimeout(this.updateFocus, 0); setTimeout(this.updateFocus, 0);
}, },
onYearSelect(event, year) { onYearSelect(event, year) {
if (year.isDisabled) return;
if (this.view === 'year') { if (this.view === 'year') {
this.onDateSelect(event, { year: year, month: 0, day: 1, selectable: true }); this.onDateSelect(event, { year: year.value, month: 0, day: 1, selectable: true });
} else { } else {
this.currentYear = year; this.currentYear = year.value;
this.currentView = 'month'; this.currentView = 'month';
this.$emit('year-change', { month: this.currentMonth + 1, year: this.currentYear }); this.$emit('year-change', { month: this.currentMonth + 1, year: this.currentYear });
} }
@ -2878,8 +2898,21 @@ export default {
monthPickerValues() { monthPickerValues() {
let monthPickerValues = []; let monthPickerValues = [];
const fromYear = this.minDate?.getFullYear();
const fromMonth = this.minDate?.getMonth();
const toYear = this.maxDate?.getFullYear();
const toMonth = this.maxDate?.getMonth();
let monthStart = this.currentYear === fromYear ? fromMonth : 0;
const monthEnd = this.currentYear === toYear ? toMonth : 11;
for (let i = 0; i <= 11; i++) { for (let i = 0; i <= 11; i++) {
monthPickerValues.push(this.$primevue.config.locale.monthNamesShort[i]); const label = this.$primevue.config.locale.monthNamesShort[i];
monthPickerValues.push({
label,
isDisabled: this.currentYear < fromYear || this.currentYear > toYear || i < monthStart || i > monthEnd
});
} }
return monthPickerValues; return monthPickerValues;
@ -2889,7 +2922,12 @@ export default {
let base = this.currentYear - (this.currentYear % 10); let base = this.currentYear - (this.currentYear % 10);
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
yearPickerValues.push(base + i); const value = base + i;
yearPickerValues.push({
value,
isDisabled: (this.minDate || this.maxDate) && (value < this.minDate?.getFullYear() || value > this.maxDate?.getFullYear())
});
} }
return yearPickerValues; return yearPickerValues;