Skip to content

Commit

Permalink
Calendar Bugfix (#1055)
Browse files Browse the repository at this point in the history
* fix: ux when clicking on same day in calendar range
  • Loading branch information
steveblue authored Sep 27, 2024
1 parent fc407c6 commit f45ef46
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 22 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,6 @@ export interface CalendarDateRange {
endDate: Date | undefined;
}

interface CalendarDateRangeSelection {
startDateSelection: boolean;
endDateSelection: boolean;
}

@Component({
selector: 'ngx-calendar',
exportAs: 'ngxCalendar',
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -328,35 +319,27 @@ 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));
} else {
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;
}

Expand Down Expand Up @@ -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
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down

0 comments on commit f45ef46

Please sign in to comment.