diff --git a/src/Components/Assets/AssetServiceEditModal.tsx b/src/Components/Assets/AssetServiceEditModal.tsx index 3964dfe0770..13a91e36477 100644 --- a/src/Components/Assets/AssetServiceEditModal.tsx +++ b/src/Components/Assets/AssetServiceEditModal.tsx @@ -192,6 +192,7 @@ export const AssetServiceEditModal = (props: { className="mt-2" position="LEFT" value={new Date(form.serviced_on)} + max={new Date(props.service_record.created_date)} onChange={(date) => { if ( dayjs(date.value).format("YYYY-MM-DD") > diff --git a/src/Components/Common/DateInputV2.tsx b/src/Components/Common/DateInputV2.tsx index 95652e68638..da974fbe0e9 100644 --- a/src/Components/Common/DateInputV2.tsx +++ b/src/Components/Common/DateInputV2.tsx @@ -4,6 +4,8 @@ import CareIcon from "../../CAREUI/icons/CareIcon"; import { Popover } from "@headlessui/react"; import { classNames } from "../../Utils/utils"; import dayjs from "../../Utils/dayjs"; +import * as Notification from "../../Utils/Notifications.js"; +import { t } from "i18next"; type DatePickerType = "date" | "month" | "year"; export type DatePickerPosition = "LEFT" | "RIGHT" | "CENTER"; @@ -16,6 +18,7 @@ interface Props { value: Date | undefined; min?: Date; max?: Date; + outOfLimitsErrorMessage?: string; onChange: (date: Date) => void; position?: DatePickerPosition; disabled?: boolean; @@ -34,6 +37,7 @@ const DateInputV2: React.FC = ({ value, min, max, + outOfLimitsErrorMessage, onChange, position, disabled, @@ -100,16 +104,21 @@ const DateInputV2: React.FC = ({ ) => void; const setDateValue = (date: number, close: CloseFunction) => () => { - isDateWithinConstraints(date) && - onChange( - new Date( - datePickerHeaderDate.getFullYear(), - datePickerHeaderDate.getMonth(), - date - ) - ); - close(); - setIsOpen?.(false); + isDateWithinConstraints(date) + ? (() => { + onChange( + new Date( + datePickerHeaderDate.getFullYear(), + datePickerHeaderDate.getMonth(), + date + ) + ); + close(); + setIsOpen?.(false); + })() + : Notification.Error({ + msg: outOfLimitsErrorMessage ?? "Cannot select date out of range", + }); }; const getDayCount = (date: Date) => { @@ -220,7 +229,7 @@ const DateInputV2: React.FC = ({ readOnly disabled={disabled} className={`cui-input-base cursor-pointer disabled:cursor-not-allowed ${className}`} - placeholder={placeholder ?? "Select date"} + placeholder={placeholder ?? t("select_date")} value={value && dayjs(value).format("DD/MM/YYYY")} />
@@ -248,7 +257,7 @@ const DateInputV2: React.FC = ({ [dd, mm, yyyy].filter(Boolean).join("/") ) || "" } // Display the value in DD/MM/YYYY format - placeholder="DD/MM/YYYY" + placeholder={t("DD/MM/YYYY")} onChange={(e) => { setDisplayValue(e.target.value.replaceAll("/", "")); const value = dayjs(e.target.value, "DD/MM/YYYY", true); @@ -330,26 +339,41 @@ const DateInputV2: React.FC = ({ className="aspect-square w-[14.26%] border border-transparent p-1 text-center text-sm" /> ))} - {dayCount.map((d, i) => ( -
+ {dayCount.map((d, i) => { + const withinConstraints = isDateWithinConstraints(d); + const selected = value && isSelectedDate(d); + + const baseClasses = + "flex h-full items-center justify-center rounded text-center text-sm leading-loose transition duration-100 ease-in-out"; + let conditionalClasses = ""; + + if (withinConstraints) { + if (selected) { + conditionalClasses = + "bg-primary-500 font-bold text-white"; + } else { + conditionalClasses = + "hover:bg-gray-300 cursor-pointer"; + } + } else { + conditionalClasses = + "!cursor-not-allowed !text-gray-400"; + } + return (
- {d} +
+ {d} +
-
- ))} + ); + })}
)} diff --git a/src/Components/Facility/AssetCreate.tsx b/src/Components/Facility/AssetCreate.tsx index 84fc09188d0..a1e06a8c7ab 100644 --- a/src/Components/Facility/AssetCreate.tsx +++ b/src/Components/Facility/AssetCreate.tsx @@ -883,6 +883,7 @@ const AssetCreate = (props: AssetProps) => { name="last_serviced_on" className="mt-2" position="RIGHT" + disableFuture value={last_serviced_on && new Date(last_serviced_on)} onChange={(date) => { if ( diff --git a/src/Locale/en/Common.json b/src/Locale/en/Common.json index 0fe1ba1a8bf..7e357bc04b5 100644 --- a/src/Locale/en/Common.json +++ b/src/Locale/en/Common.json @@ -155,5 +155,7 @@ "all_changes_have_been_saved": "All changes have been saved", "no_data_found": "No data found", "edit": "Edit", - "clear_selection": "Clear selection" -} \ No newline at end of file + "clear_selection": "Clear selection", + "select_date": "Select date", + "DD/MM/YYYY": "DD/MM/YYYY" +}