Skip to content

Commit a1bcd94

Browse files
kdinevkdinev
authored
Merge pull request #8510 from IgniteUI/mkirkova/fix-8173-9.1.x
fix(calendar): show right month when value is set for 9.1.x #8173
2 parents d5dfa28 + e6814d0 commit a1bcd94

File tree

3 files changed

+63
-16
lines changed

3 files changed

+63
-16
lines changed

‎projects/igniteui-angular/src/lib/calendar/calendar-base.ts‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -150,10 +150,16 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
150150
*/
151151
public set value(value: Date | Date[]) {
152152
if (!value || !!value && (value as Date[]).length === 0) {
153+
this.selectedDatesWithoutFocus = new Date();
153154
return;
154155
}
155-
156+
if (!this.selectedDatesWithoutFocus) {
157+
const valueDate = value[0] ? Math.min.apply(null, value) : value;
158+
const date = this.getDateOnly(new Date(valueDate)).setDate(1);
159+
this.viewDate = new Date(date);
160+
}
156161
this.selectDate(value);
162+
this.selectedDatesWithoutFocus = value;
157163
}
158164

159165
/**
@@ -169,7 +175,11 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
169175
* Sets the date that will be presented in the default view when the component renders.
170176
*/
171177
public set viewDate(value: Date) {
172-
this._viewDate = this.getDateOnly(value);
178+
if (this._viewDate) {
179+
this.selectedDatesWithoutFocus = value;
180+
}
181+
const date = this.getDateOnly(value).setDate(1);
182+
this._viewDate = new Date(date);
173183
}
174184

175185
/**
@@ -345,6 +355,11 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
345355
*/
346356
public selectedDates;
347357

358+
/**
359+
* @hidden
360+
*/
361+
private selectedDatesWithoutFocus;
362+
348363
/**
349364
* @hidden
350365
*/

‎projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts‎

Lines changed: 43 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,8 @@ describe('IgxCalendar - ', () => {
172172
configureTestSuite();
173173
beforeAll(async(() => {
174174
TestBed.configureTestingModule({
175-
declarations: [IgxCalendarSampleComponent, IgxCalendarRangeComponent, IgxCalendarDisabledSpecialDatesComponent],
175+
declarations: [IgxCalendarSampleComponent, IgxCalendarRangeComponent, IgxCalendarDisabledSpecialDatesComponent,
176+
IgxCalendarValueComponent],
176177
imports: [IgxCalendarModule, FormsModule, NoopAnimationsModule]
177178
}).compileComponents();
178179
}));
@@ -252,8 +253,8 @@ describe('IgxCalendar - ', () => {
252253
expect(calendar.formatOptions).toEqual(jasmine.objectContaining(defaultOptions));
253254
expect(calendar.formatViews).toEqual(jasmine.objectContaining(defaultViews));
254255
expect(headerYear.nativeElement.textContent.trim()).toMatch('2018');
255-
expect(headerWeekday.nativeElement.textContent.trim()).toMatch('Mon');
256-
expect(headerDate.nativeElement.textContent.trim()).toMatch('Sep 17');
256+
expect(headerWeekday.nativeElement.textContent.trim()).toMatch('Sat');
257+
expect(headerDate.nativeElement.textContent.trim()).toMatch('Sep 1');
257258
expect(bodyYear.nativeElement.textContent.trim()).toMatch('2018');
258259
expect(bodyMonth.nativeElement.textContent.trim()).toMatch('Sep');
259260

@@ -267,8 +268,8 @@ describe('IgxCalendar - ', () => {
267268
expect(calendar.formatOptions).toEqual(jasmine.objectContaining(Object.assign(defaultOptions, formatOptions)));
268269
expect(calendar.formatViews).toEqual(jasmine.objectContaining(Object.assign(defaultViews, formatViews)));
269270
expect(headerYear.nativeElement.textContent.trim()).toMatch('18');
270-
expect(headerWeekday.nativeElement.textContent.trim()).toMatch('Mon');
271-
expect(headerDate.nativeElement.textContent.trim()).toMatch('September 17');
271+
expect(headerWeekday.nativeElement.textContent.trim()).toMatch('Sat');
272+
expect(headerDate.nativeElement.textContent.trim()).toMatch('September 1');
272273
expect(bodyYear.nativeElement.textContent.trim()).toMatch('18');
273274
expect(bodyMonth.nativeElement.textContent.trim()).toMatch('September');
274275

@@ -283,12 +284,33 @@ describe('IgxCalendar - ', () => {
283284
expect(calendar.formatOptions).toEqual(jasmine.objectContaining(Object.assign(defaultOptions, formatOptions)));
284285
expect(calendar.formatViews).toEqual(jasmine.objectContaining(Object.assign(defaultViews, formatViews)));
285286
expect(headerYear.nativeElement.textContent.trim()).toMatch('2018');
286-
expect(headerWeekday.nativeElement.textContent.trim()).toMatch('Mon');
287-
expect(headerDate.nativeElement.textContent.trim()).toMatch('September 17');
287+
expect(headerWeekday.nativeElement.textContent.trim()).toMatch('Sat');
288+
expect(headerDate.nativeElement.textContent.trim()).toMatch('September 1');
288289
expect(bodyYear.nativeElement.textContent.trim()).toMatch('2018');
289290
expect(bodyMonth.nativeElement.textContent.trim()).toMatch('8');
290291
});
291292

293+
it('Should show right month when value is set', () => {
294+
fixture = TestBed.createComponent(IgxCalendarValueComponent);
295+
fixture.detectChanges();
296+
calendar = fixture.componentInstance.calendar;
297+
298+
expect(calendar.weekStart).toEqual(WEEKDAYS.SUNDAY);
299+
expect(calendar.selection).toEqual('single');
300+
expect(calendar.viewDate.getMonth()).toEqual(calendar.value.getMonth());
301+
302+
const date = new Date(2020, 8, 28);
303+
calendar.viewDate = date;
304+
fixture.detectChanges();
305+
306+
expect(calendar.viewDate.getMonth()).toEqual(date.getMonth());
307+
308+
calendar.value = new Date(2020, 9, 15);
309+
fixture.detectChanges();
310+
311+
expect(calendar.viewDate.getMonth()).toEqual(date.getMonth());
312+
});
313+
292314
it('Should properly set locale', () => {
293315
fixture.componentInstance.viewDate = new Date(2018, 8, 17);
294316
fixture.componentInstance.model = new Date();
@@ -305,8 +327,8 @@ describe('IgxCalendar - ', () => {
305327
fixture.detectChanges();
306328

307329
expect(headerYear.nativeElement.textContent.trim()).toMatch('2018');
308-
expect(headerWeekday.nativeElement.textContent.trim()).toMatch('Mon');
309-
expect(headerDate.nativeElement.textContent.trim()).toMatch('Sep 17');
330+
expect(headerWeekday.nativeElement.textContent.trim()).toMatch('Sat');
331+
expect(headerDate.nativeElement.textContent.trim()).toMatch('Sep 1');
310332
expect(bodyYear.nativeElement.textContent.trim()).toMatch('2018');
311333
expect(bodyMonth.nativeElement.textContent.trim()).toMatch('Sep');
312334
expect(bodyWeekday.nativeElement.textContent.trim()).toMatch('Sun');
@@ -319,8 +341,8 @@ describe('IgxCalendar - ', () => {
319341
bodyWeekday = dom.query(By.css(HelperTestFunctions.WEEKSTART_LABEL_CSSCLASS));
320342
expect(calendar.locale).toEqual(locale);
321343
expect(headerYear.nativeElement.textContent.trim()).toMatch('18');
322-
expect(headerWeekday.nativeElement.textContent.trim()).toMatch('lun.,');
323-
expect(headerDate.nativeElement.textContent.trim()).toMatch('17 sept.');
344+
expect(headerWeekday.nativeElement.textContent.trim()).toMatch('sam.,');
345+
expect(headerDate.nativeElement.textContent.trim()).toMatch('1 sept.');
324346
expect(bodyYear.nativeElement.textContent.trim()).toMatch('18');
325347
expect(bodyMonth.nativeElement.textContent.trim()).toMatch('sept.');
326348
expect(bodyWeekday.nativeElement.textContent.trim()).toMatch('Dim.');
@@ -1932,6 +1954,16 @@ export class IgxCalendarDisabledSpecialDatesComponent {
19321954
@ViewChild(IgxCalendarComponent, { static: true }) public calendar: IgxCalendarComponent;
19331955
}
19341956

1957+
@Component({
1958+
template: `
1959+
<igx-calendar [value]="value"></igx-calendar>
1960+
`
1961+
})
1962+
export class IgxCalendarValueComponent {
1963+
public value = new Date(2020, 7, 13);
1964+
@ViewChild(IgxCalendarComponent, { static: true }) public calendar: IgxCalendarComponent;
1965+
}
1966+
19351967
class DateTester {
19361968
// tests whether a date is disabled or not
19371969
static testDatesAvailability(dates: IgxDayItemComponent[], disabled: boolean) {

‎projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.spec.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ describe('IgxMonthPicker', () => {
7676
};
7777

7878
expect(monthPicker.value).toBeUndefined();
79-
expect(monthPicker.viewDate.getDate()).toEqual(instance.viewDate.getDate());
79+
expect(monthPicker.viewDate.getDate()).toEqual(1);
8080
expect(monthPicker.locale).toEqual('en');
8181

8282
const today = new Date(Date.now());
@@ -89,7 +89,7 @@ describe('IgxMonthPicker', () => {
8989
expect(monthPicker.locale).toEqual('fr');
9090
expect(monthPicker.formatOptions.year).toEqual('2-digit');
9191
expect(monthPicker.value.getDate()).toEqual(today.getDate());
92-
expect(monthPicker.viewDate.getDate()).toEqual(today.getDate());
92+
expect(monthPicker.viewDate.getDate()).toEqual(1);
9393
});
9494

9595
it('should properly set formatOptions and formatViews', () => {
@@ -173,7 +173,7 @@ describe('IgxMonthPicker', () => {
173173
expect(monthPicker.onSelection.emit).toHaveBeenCalled();
174174
expect(currentMonth.nativeElement.textContent.trim()).toEqual('Mar');
175175

176-
const nextDay = new Date(2019, 2, 7);
176+
const nextDay = new Date(2019, 2, 1);
177177
expect(fixture.componentInstance.model.getDate()).toEqual(nextDay.getDate());
178178
});
179179

0 commit comments

Comments
 (0)