Skip to content

Commit

Permalink
fetched user preferance of 24 hour format
Browse files Browse the repository at this point in the history
  • Loading branch information
@saikiranpatil
saikiranpatil committed Dec 16, 2024
1 parent c2981c0 commit 024df56
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 54 deletions.
81 changes: 44 additions & 37 deletions src/components/Common/DateInputV2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,11 @@ const DateInputV2: React.FC<Props> = ({
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<Array<number>>([]);
const [blankDays, setBlankDays] = useState<Array<number>>([]);

Expand All @@ -61,7 +66,7 @@ const DateInputV2: React.FC<Props> = ({

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";

Expand Down Expand Up @@ -149,7 +154,10 @@ const DateInputV2: React.FC<Props> = ({
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(),
Expand Down Expand Up @@ -276,8 +284,6 @@ const DateInputV2: React.FC<Props> = ({
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;
Expand Down Expand Up @@ -308,7 +314,7 @@ const DateInputV2: React.FC<Props> = ({
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),
)}
>
<Popover className="relative">
Expand Down Expand Up @@ -561,8 +567,8 @@ const DateInputV2: React.FC<Props> = ({
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({
Expand Down Expand Up @@ -623,36 +629,37 @@ const DateInputV2: React.FC<Props> = ({
}
}}
>
{[
...input.options,
...(input.name === "am/pm"
? []
: input.options),
...(input.name === "am/pm"
? []
: input.options),
].map((option, j) => (
<button
type="button"
key={j}
className={`flex aspect-square w-9 shrink-0 items-center justify-center rounded-md border transition-all ${(input.name === "Hours" && option === 12 ? [0, 12].includes(input.value) : input.value === option) ? "border-primary-600 bg-primary-500 font-bold text-white" : "border-gray-200 hover:bg-secondary-300"} text-sm`}
onClick={() =>
input.onChange(option as any)
}
data-selected={
(input.name === "Hours" && option === 12
? [0, 12].includes(input.value)
: input.value === option) &&
j + 1 >= input.options.length &&
j + 1 <= input.options.length * 2
}
>
{option.toLocaleString("en-US", {
minimumIntegerDigits: 2,
useGrouping: false,
})}
</button>
))}
{(!is24Hour || input.name !== "am/pm") &&
[
...input.options,
...(input.name === "am/pm"
? []
: input.options),
...(input.name === "am/pm"
? []
: input.options),
].map((option, j) => (
<button
type="button"
key={j}
className={`flex aspect-square w-9 shrink-0 items-center justify-center rounded-md border transition-all ${(input.name === "Hours" && option === 12 ? [0, 12].includes(input.value) : input.value === option) ? "border-primary-600 bg-primary-500 font-bold text-white" : "border-gray-200 hover:bg-secondary-300"} text-sm`}
onClick={() =>
input.onChange(option as any)
}
data-selected={
(input.name === "Hours" && option === 12
? [0, 12].includes(input.value)
: input.value === option) &&
j + 1 >= input.options.length &&
j + 1 <= input.options.length * 2
}
>
{option.toLocaleString("en-US", {
minimumIntegerDigits: 2,
useGrouping: false,
})}
</button>
))}
</div>
))}
</div>
Expand Down
30 changes: 13 additions & 17 deletions src/components/Common/DateTextInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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]`,
Expand Down Expand Up @@ -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]);
Expand Down Expand Up @@ -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)}
/>
Expand Down

0 comments on commit 024df56

Please sign in to comment.