From 70ef9178411d911bbbd553826dd5755a1b55f4da Mon Sep 17 00:00:00 2001 From: Saikiran Patil <84263946+saikiranpatil@users.noreply.github.com> Date: Wed, 11 Dec 2024 17:01:15 +0530 Subject: [PATCH 1/4] fixed 01 minute error, made text feild to 12 hour format in date time component --- src/components/Common/DateTextInput.tsx | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/Common/DateTextInput.tsx b/src/components/Common/DateTextInput.tsx index f2cd4844a1c..74b7a8c0e97 100644 --- a/src/components/Common/DateTextInput.tsx +++ b/src/components/Common/DateTextInput.tsx @@ -116,7 +116,7 @@ export default function DateTextInput(props: { date: `${value ? formatUnfocused(value.getDate(), 0) : ""}`, month: `${value ? formatUnfocused(value.getMonth() + 1, 1) : ""}`, year: `${value ? formatUnfocused(value.getFullYear(), 2, 4) : ""}`, - hour: `${value ? formatUnfocused(value.getHours(), 3) : ""}`, + hour: `${value ? formatUnfocused(value.getHours() % 12, 3) : ""}`, minute: `${value ? formatUnfocused(value.getMinutes(), 4) : ""}`, }); }, [value]); @@ -156,13 +156,12 @@ export default function DateTextInput(props: { onChange={(e) => { const value = e.target.value; if ( - (value.endsWith("/") || - value.endsWith(" ") || - value.endsWith(":") || - value.length > (key === "year" ? 3 : 1)) && - i < 4 + value.endsWith("/") || + value.endsWith(" ") || + value.endsWith(":") || + value.length > (key === "year" ? 3 : 1) ) { - goToInput(i + 1); + goToInput((i + 1) % 5); } else { setEditingText({ ...editingText, From 4226cf29597b079f83184a4aea5644b815c33386 Mon Sep 17 00:00:00 2001 From: Saikiran Patil <84263946+saikiranpatil@users.noreply.github.com> Date: Wed, 11 Dec 2024 18:35:59 +0530 Subject: [PATCH 2/4] minor error --- src/components/Common/DateTextInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Common/DateTextInput.tsx b/src/components/Common/DateTextInput.tsx index 74b7a8c0e97..4c7cdddb182 100644 --- a/src/components/Common/DateTextInput.tsx +++ b/src/components/Common/DateTextInput.tsx @@ -116,7 +116,7 @@ export default function DateTextInput(props: { date: `${value ? formatUnfocused(value.getDate(), 0) : ""}`, month: `${value ? formatUnfocused(value.getMonth() + 1, 1) : ""}`, year: `${value ? formatUnfocused(value.getFullYear(), 2, 4) : ""}`, - hour: `${value ? formatUnfocused(value.getHours() % 12, 3) : ""}`, + hour: `${value ? formatUnfocused(value.getHours() % 12 || 12, 3) : ""}`, minute: `${value ? formatUnfocused(value.getMinutes(), 4) : ""}`, }); }, [value]); From c2981c0fac483dcd6a7c6f2bff83b56b796ee012 Mon Sep 17 00:00:00 2001 From: Saikiran Patil <84263946+saikiranpatil@users.noreply.github.com> Date: Fri, 13 Dec 2024 01:25:28 +0530 Subject: [PATCH 3/4] minor changes --- src/components/Common/DateTextInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Common/DateTextInput.tsx b/src/components/Common/DateTextInput.tsx index 4c7cdddb182..74b7a8c0e97 100644 --- a/src/components/Common/DateTextInput.tsx +++ b/src/components/Common/DateTextInput.tsx @@ -116,7 +116,7 @@ export default function DateTextInput(props: { date: `${value ? formatUnfocused(value.getDate(), 0) : ""}`, month: `${value ? formatUnfocused(value.getMonth() + 1, 1) : ""}`, year: `${value ? formatUnfocused(value.getFullYear(), 2, 4) : ""}`, - hour: `${value ? formatUnfocused(value.getHours() % 12 || 12, 3) : ""}`, + hour: `${value ? formatUnfocused(value.getHours() % 12, 3) : ""}`, minute: `${value ? formatUnfocused(value.getMinutes(), 4) : ""}`, }); }, [value]); From 024df5694ebc426ef63ae4ba9e0e26e2794f2d58 Mon Sep 17 00:00:00 2001 From: Saikiran Patil <84263946+saikiranpatil@users.noreply.github.com> Date: Tue, 17 Dec 2024 01:12:37 +0530 Subject: [PATCH 4/4] fetched user preferance of 24 hour format --- src/components/Common/DateInputV2.tsx | 81 ++++++++++++++----------- src/components/Common/DateTextInput.tsx | 30 ++++----- 2 files changed, 57 insertions(+), 54 deletions(-) diff --git a/src/components/Common/DateInputV2.tsx b/src/components/Common/DateInputV2.tsx index 20027a004d2..dbf1419f6d0 100644 --- a/src/components/Common/DateInputV2.tsx +++ b/src/components/Common/DateInputV2.tsx @@ -50,6 +50,11 @@ const DateInputV2: React.FC = ({ isOpen, popOverClassName, }) => { + const is24Hour = + Intl.DateTimeFormat(undefined, { hour: "numeric" }).resolvedOptions() + .hour12 === false; + const dateFormat = `DD/MM/YYYY${allowTime ? (is24Hour ? " HH:mm" : " hh:mm a") : ""}`; + const [dayCount, setDayCount] = useState>([]); const [blankDays, setBlankDays] = useState>([]); @@ -61,7 +66,7 @@ const DateInputV2: React.FC = ({ const [popOverOpen, setPopOverOpen] = useState(false); - const hours = dayjs(value).hour() % 12; + const hours = is24Hour ? dayjs(value).hour() : dayjs(value).hour() % 12; const minutes = dayjs(value).minute(); const ampm = dayjs(value).hour() > 11 ? "PM" : "AM"; @@ -149,7 +154,10 @@ const DateInputV2: React.FC = ({ newMinutes?: typeof minutes; newAmpm?: typeof ampm; }) => { - const { newHours = hours, newMinutes = minutes, newAmpm = ampm } = options; + const { newHours = hours, newMinutes = minutes } = options; + const { newAmpm = is24Hour ? (newHours > 11 ? "PM" : "AM") : ampm } = + options; + handleChange( new Date( datePickerHeaderDate.getFullYear(), @@ -276,8 +284,6 @@ const DateInputV2: React.FC = ({ isOpen && popoverButtonRef.current?.click(); }, [isOpen]); - const dateFormat = `DD/MM/YYYY${allowTime ? " hh:mm a" : ""}`; - const getPosition = () => { const viewportWidth = document.documentElement.clientWidth; const viewportHeight = document.documentElement.clientHeight; @@ -308,7 +314,7 @@ const DateInputV2: React.FC = ({ className={`${containerClassName ?? "container mx-auto text-black"}`} data-cui-dateinput data-cui-dateinput-value={JSON.stringify( - dayjs(value).format("YYYY-MM-DDTHH:mm"), + dayjs(value).format(dateFormat), )} > @@ -561,8 +567,8 @@ const DateInputV2: React.FC = ({ name: "Hours", value: hours, options: Array.from( - { length: 12 }, - (_, i) => i + 1, + { length: is24Hour ? 24 : 12 }, + (_, i) => (is24Hour ? i : i + 1), ), onChange: (val: any) => { handleTimeChange({ @@ -623,36 +629,37 @@ const DateInputV2: React.FC = ({ } }} > - {[ - ...input.options, - ...(input.name === "am/pm" - ? [] - : input.options), - ...(input.name === "am/pm" - ? [] - : input.options), - ].map((option, j) => ( - - ))} + {(!is24Hour || input.name !== "am/pm") && + [ + ...input.options, + ...(input.name === "am/pm" + ? [] + : input.options), + ...(input.name === "am/pm" + ? [] + : input.options), + ].map((option, j) => ( + + ))} ))} diff --git a/src/components/Common/DateTextInput.tsx b/src/components/Common/DateTextInput.tsx index 74b7a8c0e97..2d68fc8cf41 100644 --- a/src/components/Common/DateTextInput.tsx +++ b/src/components/Common/DateTextInput.tsx @@ -24,6 +24,9 @@ export default function DateTextInput(props: { onFinishInitialTyping?: () => unknown; error?: string; }) { + const is24Hour = + Intl.DateTimeFormat(undefined, { hour: "numeric" }).resolvedOptions() + .hour12 === false; const { value, onChange, allowTime, error, onFinishInitialTyping } = props; const [editingText, setDirtyEditingText] = useState({ @@ -71,7 +74,7 @@ export default function DateTextInput(props: { }; const goToInput = (i: number) => { - if (i < 0 || i > 4) return; + if (i < 0 || i > 5) return; ( document.querySelectorAll( `[data-time-input]`, @@ -116,7 +119,7 @@ export default function DateTextInput(props: { date: `${value ? formatUnfocused(value.getDate(), 0) : ""}`, month: `${value ? formatUnfocused(value.getMonth() + 1, 1) : ""}`, year: `${value ? formatUnfocused(value.getFullYear(), 2, 4) : ""}`, - hour: `${value ? formatUnfocused(value.getHours() % 12, 3) : ""}`, + hour: `${value ? formatUnfocused(is24Hour ? value.getHours() : value.getHours() % 12 || 12, 3) : ""}`, minute: `${value ? formatUnfocused(value.getMinutes(), 4) : ""}`, }); }, [value]); @@ -155,21 +158,14 @@ export default function DateTextInput(props: { data-time-input={i} onChange={(e) => { const value = e.target.value; - if ( - value.endsWith("/") || - value.endsWith(" ") || - value.endsWith(":") || - value.length > (key === "year" ? 3 : 1) - ) { - goToInput((i + 1) % 5); - } else { - setEditingText({ - ...editingText, - [key]: value - .replace(/\D/g, "") - .slice(0, key === "year" ? 4 : 2), - }); - } + if (value.length > (key === "year" ? 3 : 1)) goToInput(i + 1); + + setEditingText({ + ...editingText, + [key]: value + .replace(/\D/g, "") + .slice(0, key === "year" ? 4 : 2), + }); }} onBlur={(e) => handleBlur(e.target.value, key)} />