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.

Sign up for GitHub

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

Disallowing out of date range #9201

Open
wants to merge 12 commits into
base: develop
Choose a base branch
from
+207 −65
Open

Disallowing out of date range #9201

Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
603eceb
Disallowing out of date range
Rishith25 Nov 25, 2024
8ade838
Refactor the code
Rishith25 Nov 25, 2024
b4b19f7
Merge branch 'develop' into date-range-disallowing
Rishith25 Nov 28, 2024
c7b7f85
Added changes to the date disallowing
Rishith25 Nov 28, 2024
7ce14af
Merge branch 'develop' into date-range-disallowing
Rishith25 Dec 2, 2024
eb73489
Updated month logic for both increment and decrement
Rishith25 Dec 2, 2024
32e7f94
Merge branch 'develop' into date-range-disallowing
Rishith25 Dec 5, 2024
a52b0a2
Ensured that selecting a year with invalid month ranges adjusts to th…
Rishith25 Dec 5, 2024
3707715
Merge branch 'develop' into date-range-disallowing
Rishith25 Dec 6, 2024
8d0073a
Merge branch 'develop' into date-range-disallowing
Rishith25 Dec 14, 2024
9d3e0d2
Max and min Handled correctly
Rishith25 Jan 6, 2025
27082a3
Merge branch 'develop' into date-range-disallowing
Rishith25 Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
272 changes: 207 additions & 65 deletions src/components/Common/DateInputV2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,15 +89,18 @@ const DateInputV2: React.FC<Props> = ({
);
break;
case "month":
setDatePickerHeaderDate((prev) =>
dayjs(prev).subtract(1, "year").toDate(),
);
setDatePickerHeaderDate((prev) => {
const newDate = dayjs(prev).subtract(1, "year").toDate();
if (min && newDate < min) {
return new Date(min.getFullYear(), min.getMonth(), 1);
}
return newDate;
});
break;
case "year":
setDatePickerHeaderDate((prev) =>
dayjs(prev).subtract(1, "year").toDate(),
);
setYear((prev) => dayjs(prev).subtract(10, "year").toDate());
if (!min || year.getFullYear() - 10 >= min.getFullYear()) {
setYear((prev) => dayjs(prev).subtract(10, "year").toDate());
}
Rishith25 marked this conversation as resolved.
Show resolved Hide resolved
break;
}
};
Expand All @@ -108,11 +111,18 @@ const DateInputV2: React.FC<Props> = ({
setDatePickerHeaderDate((prev) => dayjs(prev).add(1, "month").toDate());
break;
case "month":
setDatePickerHeaderDate((prev) => dayjs(prev).add(1, "year").toDate());
setDatePickerHeaderDate((prev) => {
const newDate = dayjs(prev).add(1, "year").toDate();
if (max && newDate > max) {
return new Date(max.getFullYear(), max.getMonth(), 1);
}
return newDate;
});
break;
case "year":
setDatePickerHeaderDate((prev) => dayjs(prev).add(1, "year").toDate());
setYear((prev) => dayjs(prev).add(10, "year").toDate());
if (!max || year.getFullYear() + 10 <= max.getFullYear()) {
setYear((prev) => dayjs(prev).add(10, "year").toDate());
}
break;
}
};
Expand Down Expand Up @@ -209,32 +219,82 @@ const DateInputV2: React.FC<Props> = ({
return true;
};

const isMonthWithinConstraints = (month: number) => {
const year = datePickerHeaderDate.getFullYear();

if (min && year < min.getFullYear()) return false;
if (max && year > max.getFullYear()) return false;

const firstDay = new Date(year, month, 1);
const lastDay = new Date(year, month + 1, 0);
if (min && lastDay < min) return false;
if (max && firstDay > max) return false;

return true;
};

const isYearWithinConstraints = (year: number) => {
if (min && year < min.getFullYear()) return false;
if (max && year > max.getFullYear()) return false;

const yearStart = new Date(year, 0, 1);
const yearEnd = new Date(year, 11, 31);

if (min && yearEnd < min) return false;
if (max && yearStart > max) return false;

return true;
};

const isSelectedMonth = (month: number) =>
month === datePickerHeaderDate.getMonth();

const isSelectedYear = (year: number) =>
year === datePickerHeaderDate.getFullYear();

const setMonthValue = (month: number) => () => {
setDatePickerHeaderDate(
new Date(
if (isMonthWithinConstraints(month)) {
const lastDayOfMonth = new Date(
datePickerHeaderDate.getFullYear(),
month,
datePickerHeaderDate.getDate(),
),
);
setType("date");
month + 1,
0,
).getDate();
const newDate = Math.min(datePickerHeaderDate.getDate(), lastDayOfMonth);
setDatePickerHeaderDate(
new Date(datePickerHeaderDate.getFullYear(), month, newDate),
);
setType("date");
} else {
Notification.Error({
msg: outOfLimitsErrorMessage ?? "Cannot select month out of range",
});
}
};

const setYearValue = (year: number) => () => {
setDatePickerHeaderDate(
new Date(
if (isYearWithinConstraints(year)) {
const newDate = new Date(
year,
datePickerHeaderDate.getMonth(),
datePickerHeaderDate.getDate(),
),
);
setType("date");
);
if (min && year === min.getFullYear() && newDate < min) {
setDatePickerHeaderDate(
new Date(min.getFullYear(), min.getMonth(), min.getDate()),
);
} else if (max && year === max.getFullYear() && newDate > max) {
setDatePickerHeaderDate(
new Date(max.getFullYear(), max.getMonth(), max.getDate()),
);
} else {
setDatePickerHeaderDate(newDate);
}
setType("date");
} else {
Notification.Error({
msg: outOfLimitsErrorMessage ?? "Cannot select year out of range",
});
}
};

useEffect(() => {
Expand Down Expand Up @@ -371,23 +431,62 @@ const DateInputV2: React.FC<Props> = ({
<div className="flex flex-col items-center gap-4 px-4 md:flex-row md:px-0">
<div className="flex flex-1 flex-col items-center justify-between">
<div className="flex">
<button
type="button"
disabled={
!isDateWithinConstraints(
getLastDay(),
datePickerHeaderDate.getMonth() - 1,
)
}
className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-secondary-300"
onClick={decrement}
data-test-id="decrement-date-range"
>
<CareIcon
icon="l-angle-left-b"
className="text-lg"
/>
</button>
{type === "date" && (
<button
type="button"
disabled={
!isDateWithinConstraints(
getLastDay(),
datePickerHeaderDate.getMonth() - 1,
datePickerHeaderDate.getFullYear(),
)
}
Rishith25 marked this conversation as resolved.
Show resolved Hide resolved
className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-secondary-300"
onClick={decrement}
data-test-id="decrement-date-range"
>
<CareIcon
icon="l-angle-left-b"
className="text-lg"
/>
</button>
)}
{type === "month" && (
<button
type="button"
disabled={
min &&
datePickerHeaderDate.getFullYear() <=
min.getFullYear()
}
className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-secondary-300"
onClick={decrement}
data-test-id="decrement-month-range"
>
<CareIcon
icon="l-angle-left-b"
className="text-lg"
/>
</button>
)}

{type === "year" && (
<button
type="button"
disabled={
min &&
year.getFullYear() - 10 < min.getFullYear()
}
className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-secondary-300"
onClick={decrement}
data-test-id="decrement-year-range"
>
<CareIcon
icon="l-angle-left-b"
className="text-lg"
/>
</button>
)}
Rishith25 marked this conversation as resolved.
Show resolved Hide resolved

<div className="flex items-center justify-center text-sm">
{type === "date" && (
Expand All @@ -411,23 +510,62 @@ const DateInputV2: React.FC<Props> = ({
</p>
</div>
</div>
<button
type="button"
disabled={
(type === "year" &&
new Date().getFullYear() ===
year.getFullYear()) ||
!isDateWithinConstraints(getLastDay())
}
className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-secondary-300"
onClick={increment}
data-test-id="increment-date-range"
>
<CareIcon
icon="l-angle-right-b"
className="text-lg"
/>
</button>
{type === "date" && (
<button
type="button"
disabled={
!isDateWithinConstraints(
getLastDay(),
datePickerHeaderDate.getMonth(),
datePickerHeaderDate.getFullYear(),
)
}
Rishith25 marked this conversation as resolved.
Show resolved Hide resolved
className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-secondary-300"
onClick={increment}
data-test-id="increment-date-range"
>
<CareIcon
icon="l-angle-right-b"
className="text-lg"
/>
</button>
)}
{type === "month" && (
<button
type="button"
disabled={
max &&
datePickerHeaderDate.getFullYear() >=
max.getFullYear()
}
className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-secondary-300"
onClick={increment}
data-test-id="increment-month-range"
>
<CareIcon
icon="l-angle-right-b"
className="text-lg"
/>
</button>
)}

{type === "year" && (
<button
type="button"
disabled={
max &&
year.getFullYear() + 10 > max.getFullYear()
}
className="inline-flex aspect-square cursor-pointer items-center justify-center rounded p-2 transition duration-100 ease-in-out hover:bg-secondary-300"
onClick={increment}
data-test-id="increment-year-range"
>
<CareIcon
icon="l-angle-right-b"
className="text-lg"
/>
</button>
)}
</div>

{type === "date" && (
Expand Down Expand Up @@ -510,10 +648,12 @@ const DateInputV2: React.FC<Props> = ({
key={i}
id={`month-${i}`}
className={classNames(
"w-1/4 cursor-pointer rounded-lg px-2 py-4 text-center text-sm font-semibold",
value && isSelectedMonth(i)
? "bg-primary-500 text-white"
: "text-secondary-700 hover:bg-secondary-300",
"w-1/4 rounded-lg px-2 py-4 text-center text-sm font-semibold",
isSelectedMonth(i)
? "bg-primary-500 text-white cursor-pointer"
: isMonthWithinConstraints(i)
? "text-secondary-700 hover:bg-secondary-300 cursor-pointer"
: "!text-secondary-400 !cursor-not-allowed",
)}
onClick={setMonthValue(i)}
>
Expand All @@ -533,16 +673,18 @@ const DateInputV2: React.FC<Props> = ({
{Array(12)
.fill(null)
.map((_, i) => {
const y = year.getFullYear() - 11 + i;
const y = year.getFullYear() - 10 + i;
return (
<div
key={i}
id={`year-${i}`}
className={classNames(
"w-1/4 cursor-pointer rounded-lg px-2 py-4 text-center text-sm font-semibold",
value && isSelectedYear(y)
? "bg-primary-500 text-white"
: "text-secondary-700 hover:bg-secondary-300",
"w-1/4 rounded-lg px-2 py-4 text-center text-sm font-semibold",
isSelectedYear(y)
? "bg-primary-500 text-white cursor-pointer"
: isYearWithinConstraints(y)
? "text-secondary-700 hover:bg-secondary-300 cursor-pointer"
: "!text-secondary-400 !cursor-not-allowed",
)}
onClick={setYearValue(y)}
>
Expand Down
Loading