diff --git a/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.component.ts b/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.component.ts index 3f8ea1bcb..5b02e8307 100644 --- a/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.component.ts +++ b/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.component.ts @@ -34,11 +34,6 @@ export interface CalendarDateRange { endDate: Date | undefined; } -interface CalendarDateRangeSelection { - startDateSelection: boolean; - endDateSelection: boolean; -} - @Component({ selector: 'ngx-calendar', exportAs: 'ngxCalendar', @@ -128,10 +123,6 @@ export class CalendarComponent implements OnInit, AfterViewInit, ControlValueAcc endMinute: string; startAmPmVal = 'AM'; endAmPmVal = 'AM'; - dateRangeSelection: CalendarDateRangeSelection = { - startDateSelection: false, - endDateSelection: false - }; readonly CalendarView = CalendarView; readonly CalendarSelect = CalendarSelect; @@ -328,14 +319,15 @@ export class CalendarComponent implements OnInit, AfterViewInit, ControlValueAcc onDaySelectRange(day: CalendarDay) { this.focusDate = day.date.clone(); - if (this.range.startDate === undefined && this.range.endDate === undefined) { this.range.startDate = this.focusDate.toDate(); this.range.startDate.setHours(Number(this.startHour)); this.range.startDate.setMinutes(Number(this.startMinute)); - this.dateRangeSelection.startDateSelection = true; } else if (this.range.endDate === undefined) { - if (this.focusDate.toDate() > this.range.startDate) { + if ( + this.compareCalendarDays(this.focusDate.toDate(), this.range.startDate) || + this.focusDate.toDate() > this.range.startDate + ) { this.range.endDate = this.focusDate.toDate(); this.range.endDate.setHours(Number(this.endHour)); this.range.endDate.setMinutes(Number(this.endMinute)); @@ -343,20 +335,11 @@ export class CalendarComponent implements OnInit, AfterViewInit, ControlValueAcc this.range.startDate = this.focusDate.toDate(); this.range.startDate.setHours(Number(this.startHour)); this.range.startDate.setMinutes(Number(this.startMinute)); - this.dateRangeSelection.startDateSelection = true; } } else { this.range.startDate = this.focusDate.toDate(); this.range.startDate.setHours(Number(this.startHour)); this.range.startDate.setMinutes(Number(this.startMinute)); - this.dateRangeSelection.endDateSelection = false; - this.range.endDate = undefined; - } - - if (this.dateRangeSelection.startDateSelection && this.dateRangeSelection.endDateSelection) { - this.dateRangeSelection.startDateSelection = false; - this.dateRangeSelection.endDateSelection = false; - this.range.startDate = undefined; this.range.endDate = undefined; } @@ -724,10 +707,23 @@ export class CalendarComponent implements OnInit, AfterViewInit, ControlValueAcc formatDate(date: Date): string { const customMoment = this.createMoment(date); - return customMoment.format(this.dateLabelFormat); } + compareCalendarDays(date1: Date, date2: Date) { + // Get the year, month, and day components of each date + const year1 = date1.getFullYear(); + const month1 = date1.getMonth(); + const day1 = date1.getDate(); + + const year2 = date2.getFullYear(); + const month2 = date2.getMonth(); + const day2 = date2.getDate(); + + // Check if the year, month, and day are the same + return year1 === year2 && month1 === month2 && day1 === day2; + } + private onChangeCallback: (_: any) => void = () => { // placeholder }; diff --git a/projects/swimlane/ngx-ui/src/lib/components/calendar/calender.component.spec.ts b/projects/swimlane/ngx-ui/src/lib/components/calendar/calender.component.spec.ts index 0ce76bb0b..431520cfd 100644 --- a/projects/swimlane/ngx-ui/src/lib/components/calendar/calender.component.spec.ts +++ b/projects/swimlane/ngx-ui/src/lib/components/calendar/calender.component.spec.ts @@ -407,6 +407,19 @@ describe('CalendarComponent', () => { expect(component.range?.endDate).toEqual(new Date('2024-04-10T15:45:00')); }); + it('should set range end if range start is set and focusDate is same as range start', () => { + const day = { date: moment('2024-04-10'), nextMonth: true, prevMonth: true } as CalendarDay; + component.focusDate = moment('2024-04-10'); + component.range = { startDate: new Date('2024-04-10T10:30:00'), endDate: undefined }; + component.endHour = '15'; + component.endMinute = '45'; + + component.onDaySelectRange(day); + + expect(component.range?.startDate).toEqual(new Date('2024-04-10T10:30:00')); + expect(component.range?.endDate).toEqual(new Date('2024-04-10T15:45:00')); + }); + it('should update range start if range start is set and focusDate is less than or equal to range start', () => { const day = { date: moment('2024-04-01'), nextMonth: true, prevMonth: true } as CalendarDay; component.focusDate = moment('2024-04-01');