fix(datetime): years displayed now more consistent with v5 datetime, max and min are now accounted for in MD mode (#23616)

resolves #23615
This commit is contained in:
Liam DeBeasi
2021-07-15 08:49:25 -04:00
committed by GitHub
parent 9ce57d2efb
commit be219a2814
6 changed files with 22 additions and 16 deletions

View File

@ -1180,13 +1180,12 @@ export class Datetime implements ComponentInterface {
this.showMonthAndYear = !this.showMonthAndYear;
}
private renderMDYearView() {
return getCalendarYears(this.activeParts, true, undefined, undefined, this.parsedYearValues).map(year => {
private renderMDYearView(calendarYears: number[] = []) {
return calendarYears.map(year => {
const { isCurrentYear, isActiveYear, disabled, ariaSelected } = getCalendarYearState(year, this.workingParts, this.todayParts, this.minParts, this.maxParts);
const { isCurrentYear, isActiveYear, ariaSelected } = getCalendarYearState(year, this.workingParts, this.todayParts);
return (
<button
disabled={disabled}
aria-selected={ariaSelected}
class={{
'datetime-year-item': true,
@ -1209,7 +1208,7 @@ export class Datetime implements ComponentInterface {
})
}
private renderiOSYearView() {
private renderiOSYearView(calendarYears: number[] = []) {
return [
<div class="datetime-picker-before"></div>,
<div class="datetime-picker-after"></div>,
@ -1238,7 +1237,7 @@ export class Datetime implements ComponentInterface {
<div class="picker-col-item picker-col-item-empty">&nbsp;</div>
<div class="picker-col-item picker-col-item-empty">&nbsp;</div>
<div class="picker-col-item picker-col-item-empty">&nbsp;</div>
{getCalendarYears(this.workingParts, false, this.minParts, this.maxParts, this.parsedYearValues).map(year => {
{calendarYears.map(year => {
return (
<div
class="picker-col-item"
@ -1258,10 +1257,11 @@ export class Datetime implements ComponentInterface {
}
private renderYearView(mode: Mode) {
const calendarYears = getCalendarYears(this.todayParts, this.minParts, this.maxParts, this.parsedYearValues);
return (
<div class="datetime-year">
<div class="datetime-year-body">
{mode === 'ios' ? this.renderiOSYearView() : this.renderMDYearView()}
{mode === 'ios' ? this.renderiOSYearView(calendarYears) : this.renderMDYearView(calendarYears)}
</div>
</div>
);