BaseLibraries/MattrixwvReactComponents
1
0
Fork 0
mirror of https://bitbucket.org/Mattrixwv/mattrixwvreactcomponents.git synced 2025-12-06 21:53:57 -05:00
Code Issues Packages Projects Releases Wiki Activity

Temporal input components added

Browse Source
This commit is contained in:
Mattrixwv
2025-07-31 22:23:00 -04:00
parent f6f77c9d42
commit e1b3000121
8 changed files with 118 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
lib/component/input/date/DateInput.tsx Normal file
View File

@@ -0,0 +1,26 @@
import type { DateInputProps } from "$/types/Input";
import clsx from "clsx";
import moment from "moment";
export default function DateInput({
id,
className,
defaultValue,
value,
onChange
}: DateInputProps){
return (
<input
type="date"
id={id}
className={clsx(
"border rounded-lg px-2 py-1",
className
)}
defaultValue={defaultValue ? moment(defaultValue).format("YYYY-MM-DD") : undefined}
value={value ? moment(value).format("YYYY-MM-DD") : undefined}
onChange={(e) => onChange?.(new Date(moment(e.target.value, "YYYY-MM-DD").toDate()))}
/>
);
}

26
lib/component/input/date/DateTimeInput.tsx Normal file
View File

@@ -0,0 +1,26 @@
import type { DateInputProps } from "$/types/Input";
import clsx from "clsx";
import moment from "moment";
export default function DateTimeInput({
id,
className,
defaultValue,
value,
onChange
}: DateInputProps){
return (
<input
type="datetime-local"
id={id}
className={clsx(
"border rounded-lg px-2 py-1 outline-none",
className
)}
defaultValue={defaultValue ? moment(defaultValue).format("YYYY-MM-DDTHH:mm") : undefined}
value={value ? moment(value).format("YYYY-MM-DDTHH:mm") : undefined}
onChange={(e) => onChange?.(new Date(moment(e.target.value, "YYYY-MM-DDTHH:mm").toDate()))}
/>
);
}

26
lib/component/input/date/TimeInput.tsx Normal file
View File

@@ -0,0 +1,26 @@
import type { DateInputProps } from "$/types/Input";
import clsx from "clsx";
import moment from "moment";
export default function TimeInput({
id,
className,
defaultValue,
value,
onChange
}: DateInputProps){
return (
<input
type="time"
id={id}
className={clsx(
"border rounded-lg px-2 py-1 outline-none",
className
)}
defaultValue={defaultValue ? moment(defaultValue).format("YYYY-MM-DDTHH:mm") : undefined}
value={value ? moment(value).format("YYYY-MM-DDTHH:mm") : undefined}
onChange={(e) => onChange?.(new Date(moment(e.target.value, "YYYY-MM-DDTHH:mm").toDate()))}
/>
);
}

9
lib/types/Input.d.ts vendored
View File

@@ -149,3 +149,12 @@ export interface RadioListProps {
direction?: "vertical" | "horizontal";
children?: React.ReactNode;
}
export interface DateInputProps {
id?: string;
className?: string;
defaultValue?: Date;
value?: Date;
onChange?: (newValue: Date) => void;
}