Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(date-picker): open calendar on min enabled month when current month is after max date #472

Merged
merged 5 commits into from
Feb 15, 2024
22 changes: 16 additions & 6 deletions src/lib/calendar/calendar-foundation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1601,9 +1601,14 @@ export class CalendarFoundation implements ICalendarFoundation {
private _applyMin(): void {
this._adapter.toggleHostAttribute(CALENDAR_CONSTANTS.attributes.MIN, !!this._minAttribute, this._minAttribute as string);

if (this._min && (this._min.getMonth() > this._month || this._min.getFullYear() > this._year)) {
this._year = this._min.getFullYear();
this._month = this._min.getMonth();
if (this._min) {
const minFirstOfMonth = new Date(this._min.getFullYear(), this._min.getMonth(), 1);
const currentFirstOfMonth = new Date(this._year, this._month, 1);

if (minFirstOfMonth > currentFirstOfMonth) {
this._year = this._min.getFullYear();
this._month = this._min.getMonth();
}
}

if (this._isInitialized) {
Expand All @@ -1621,9 +1626,14 @@ export class CalendarFoundation implements ICalendarFoundation {
private _applyMax(): void {
this._adapter.toggleHostAttribute(CALENDAR_CONSTANTS.attributes.MAX, !!this._maxAttribute, this._maxAttribute as string);

if (this._max && (this._max.getMonth() < this._month || this._max.getFullYear() < this._year)) {
this._year = this._max.getFullYear();
this._month = this._max.getMonth();
if (this._max) {
const maxFirstOfMonth = new Date(this._max.getFullYear(), this._max.getMonth(), 1);
const currentFirstOfMonth = new Date(this._year, this._month, 1);

if (maxFirstOfMonth < currentFirstOfMonth) {
this._year = this._max.getFullYear();
this._month = this._max.getMonth();
}
}

if (this._isInitialized) {
Expand Down
5 changes: 1 addition & 4 deletions src/lib/date-picker/base/base-date-picker-adapter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -117,10 +117,7 @@ export abstract class BaseDatePickerAdapter<T extends BaseComponent> extends Bas
}

public attachCalendar(calendarConfig: Partial<ICalendarComponent>, dropdownConfig?: ICalendarDropdownPopupConfig): void {
if (this._calendarDropdown) {
this._calendarDropdown?.destroy();
}

this._calendarDropdown?.destroy();
this._initializeCalendarDropdown();

if (!this._calendarDropdown) {
Expand Down
7 changes: 7 additions & 0 deletions src/lib/date-picker/base/base-date-picker-foundation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,13 @@ export abstract class BaseDatePickerFoundation<TAdapter extends IBaseDatePickerA
activeChangeCallback: this._activeChangeListener
};

// If the max date is in the past, set the calendar to the min date
const currentDate = new Date().getTime();
if (this._min && this._max && this._max.getTime() < currentDate) {
calendarConfig.year = this._min.getFullYear();
calendarConfig.month = this._min.getMonth();
}

this._adapter.attachCalendar(calendarConfig, dropdownConfig);
this._adapter.addDateSelectListener(this._dateSelectListener);
this._open = true;
Expand Down
15 changes: 15 additions & 0 deletions src/test/spec/date-picker/date-picker.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,21 @@ describe('DatePickerComponent', function(this: ITestContext) {
expect(calendar.month).toEqual(expectedMonth);
});

it('should open calendar in month of min date if max is before current month and min is set', function(this: ITestContext) {
this.context = setupTestContext(false);
const date = new Date();
const minDate = new Date(date.getFullYear() - 1, date.getMonth() - 1, 1);
this.context.component.min = minDate;
this.context.component.max = new Date(date.getFullYear(), date.getMonth() - 1, 1);
this.context.append();

openPopup(this.context.component);
const calendar = getCalendar(this.context.component);
const expectedMonth = minDate.getMonth();

expect(calendar.month).toEqual(expectedMonth);
});

it('should automatically render a toggle button with a Forge text-field component', function(this: ITestContext) {
this.context = setupTestContext(false, true, false);

Expand Down
Loading