Temporal input components added

lib/component/input/date/DateInput.tsx

@@ -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()))}
+		/>
+	);
+}

lib/component/input/date/DateTimeInput.tsx

@@ -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()))}
+		/>
+	);
+}

lib/component/input/date/TimeInput.tsx

@@ -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()))}
+		/>
+	);
+}

lib/types/Input.d.ts

@@ -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;
+}

package-lock.json

@@ -14,6 +14,7 @@
 				"@tanstack/react-router-devtools": "^1.124.0",
 				"@types/node": "^24.0.4",
 				"clsx": "^2.1.1",
+				"moment": "^2.30.1",
 				"react": "^19.1.0",
 				"react-dom": "^19.1.0",
 				"react-icons": "^5.5.0",
@@ -4773,6 +4774,15 @@
 				"pathe": "^2.0.1"
 			}
 		},
+		"node_modules/moment": {
+			"version": "2.30.1",
+			"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+			"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+			"license": "MIT",
+			"engines": {
+				"node": "*"
+			}
+		},
 		"node_modules/ms": {
 			"version": "2.1.3",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",

package.json

@@ -16,6 +16,7 @@
 		"@tanstack/react-router-devtools": "^1.124.0",
 		"@types/node": "^24.0.4",
 		"clsx": "^2.1.1",
+		"moment": "^2.30.1",
 		"react": "^19.1.0",
 		"react-dom": "^19.1.0",
 		"react-icons": "^5.5.0",

src/routes/input/index.tsx

@@ -1,6 +1,6 @@
 import { MattrixwvTabGroup } from "$/component/tab";
 import type { TabGroupContent } from "$/types/Tab";
-import { CheckboxContent, FileContent, RadioContent, SwitchContent, TextContent } from "@/util/InputUtils";
+import { CheckboxContent, DateContent, FileContent, RadioContent, SwitchContent, TextContent } from "@/util/InputUtils";
 import { createFileRoute } from "@tanstack/react-router";
 
 
@@ -13,6 +13,7 @@ function InputPage(){
 	const tabs: TabGroupContent[] = [
 		{ tab: "Checkbox", content: <CheckboxContent/>},
 		{ tab: "Radio", content: <RadioContent/> },
+		{ tab: "Date", content: <DateContent/> },
 		{ tab: "File", content: <FileContent/> },
 		{ tab: "Switch", content: <SwitchContent/> },
 		{ tab: "Text", content: <TextContent/> }

src/util/InputUtils.tsx

@@ -11,6 +11,9 @@ import SecondaryCheckbox from "$/component/input/checkbox/SecondaryCheckbox";
 import SuccessCheckbox from "$/component/input/checkbox/SuccessCheckbox";
 import TertiaryCheckbox from "$/component/input/checkbox/TertiaryCheckbox";
 import WarningCheckbox from "$/component/input/checkbox/WarningCheckbox";
+import DateInput from "$/component/input/date/DateInput";
+import DateTimeInput from "$/component/input/date/DateTimeInput";
+import TimeInput from "$/component/input/date/TimeInput";
 import DangerRadioButton from "$/component/input/radio/DangerRadioButton";
 import DarkRadioButton from "$/component/input/radio/DarkRadioButton";
 import InfoRadioButton from "$/component/input/radio/InfoRadioButton";
@@ -743,3 +746,18 @@ function RadioDisplay({
 		</div>
 	);
 }
+
+export function DateContent(){
+	return (
+		<div
+			className="flex flex-col items-center justify-center my-8 gap-y-8"
+		>
+			<DateInput
+			/>
+			<DateTimeInput
+			/>
+			<TimeInput
+			/>
+		</div>
+	);
+}