Fix #4113: Calendar showMonthAfterYear locale option

pull/4114/head
melloware 2023-07-09 10:46:01 -04:00
parent f3d1033c37
commit 12174a1f96
3 changed files with 58 additions and 24 deletions

View File

@ -85,30 +85,62 @@
</slot> </slot>
</button> </button>
<div :class="cx('title')" v-bind="ptm('title')"> <div :class="cx('title')" v-bind="ptm('title')">
<button <span v-if="$primevue.config.locale.showMonthAfterYear">
v-if="currentView === 'date'" <button
type="button" v-if="currentView !== 'year'"
@click="switchToMonthView" type="button"
@keydown="onContainerButtonKeydown" @click="switchToYearView"
:class="cx('monthTitle')" @keydown="onContainerButtonKeydown"
:disabled="switchViewButtonDisabled" :class="cx('yearTitle')"
:aria-label="$primevue.config.locale.chooseMonth" :disabled="switchViewButtonDisabled"
v-bind="ptm('monthTitle')" :aria-label="$primevue.config.locale.chooseYear"
> v-bind="ptm('yearTitle')"
{{ getMonthName(month.month) }} data-pc-group-section="view"
</button> >
<button {{ getYear(month) }}
v-if="currentView !== 'year'" </button>
type="button" <button
@click="switchToYearView" v-if="currentView === 'date'"
@keydown="onContainerButtonKeydown" type="button"
:class="cx('yearTitle')" @click="switchToMonthView"
:disabled="switchViewButtonDisabled" @keydown="onContainerButtonKeydown"
:aria-label="$primevue.config.locale.chooseYear" :class="cx('monthTitle')"
v-bind="ptm('yearTitle')" :disabled="switchViewButtonDisabled"
> :aria-label="$primevue.config.locale.chooseMonth"
{{ getYear(month) }} v-bind="ptm('monthTitle')"
</button> data-pc-group-section="view"
>
{{ getMonthName(month.month) }}
</button>
</span>
<span v-else>
<button
v-if="currentView === 'date'"
type="button"
@click="switchToMonthView"
@keydown="onContainerButtonKeydown"
:class="cx('monthTitle')"
:disabled="switchViewButtonDisabled"
:aria-label="$primevue.config.locale.chooseMonth"
v-bind="ptm('monthTitle')"
data-pc-group-section="view"
>
{{ getMonthName(month.month) }}
</button>
<button
v-if="currentView !== 'year'"
type="button"
@click="switchToYearView"
@keydown="onContainerButtonKeydown"
:class="cx('yearTitle')"
:disabled="switchViewButtonDisabled"
:aria-label="$primevue.config.locale.chooseYear"
v-bind="ptm('yearTitle')"
data-pc-group-section="view"
>
{{ getYear(month) }}
</button>
</span>
<span v-if="currentView === 'year'" :class="cx('decadeTitle')" v-bind="ptm('decadeTitle')"> <span v-if="currentView === 'year'" :class="cx('decadeTitle')" v-bind="ptm('decadeTitle')">
<slot name="decade" :years="yearPickerValues"> {{ 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>

View File

@ -303,6 +303,7 @@ interface PrimeVueLocaleOptions {
today?: string; today?: string;
weekHeader?: string; weekHeader?: string;
firstDayOfWeek?: number; firstDayOfWeek?: number;
showMonthAfterYear?: boolean;
dateFormat?: string; dateFormat?: string;
weak?: string; weak?: string;
medium?: string; medium?: string;

View File

@ -58,6 +58,7 @@ export const defaultOptions = {
today: 'Today', today: 'Today',
weekHeader: 'Wk', weekHeader: 'Wk',
firstDayOfWeek: 0, firstDayOfWeek: 0,
showMonthAfterYear: false,
dateFormat: 'mm/dd/yy', dateFormat: 'mm/dd/yy',
weak: 'Weak', weak: 'Weak',
medium: 'Medium', medium: 'Medium',